import { createForm } from '@felte/solid'
import { validator } from '@felte/validator-zod'
import { useLocation, useNavigate } from '@solidjs/router'
import { IconX } from '@tabler/icons-solidjs'
import ky from 'ky'
import { For, onMount } from 'solid-js'
import { toast } from 'solid-toast'
import { v4 as uuid } from 'uuid'
import { z } from 'zod'
import { Button } from '~/components'
import { transformEndpointURL } from '~/helpers'
import { useI18n } from '~/i18n'
import {
  endpointList,
  selectedEndpoint,
  setEndpointList,
  setSelectedEndpoint,
} from '~/signals'

const schema = z.object({
  url: z.string().min(1),
  secret: z.string(),
})

export default () => {
  const [t] = useI18n()
  const location = useLocation()
  const navigate = useNavigate()

  const onSetupSuccess = (id: string) => {
    setSelectedEndpoint(id)
    navigate('/overview')
  }

  const checkEndpoint = (url: string, secret: string) =>
    ky
      .get(url, {
        headers: secret
          ? {
              Authorization: `Bearer ${secret}`,
            }
          : {},
      })
      .then(({ ok }) => ok)
      .catch((err) => {
        const { message } = err as Error

        toast.error(message)
      })

  const onEndpointSelect = async (id: string) => {
    const endpoint = endpointList().find((e) => e.id === id)

    if (!endpoint) {
      return
    }

    if (!(await checkEndpoint(endpoint.url, endpoint.secret))) {
      return
    }

    onSetupSuccess(id)
  }

  const onSubmit = async ({ url, secret }: { url: string; secret: string }) => {
    const transformedURL = transformEndpointURL(url)

    if (!(await checkEndpoint(transformedURL, secret))) {
      return
    }

    const id = uuid()
    const list = endpointList().slice()
    const point = list.find((history) => history.url === transformedURL)

    if (!point) {
      // new host and secret
      setEndpointList([{ id, url: transformedURL, secret }, ...list])
      onSetupSuccess(id)

      return
    }

    // exist host we update secret and id no matter if secret is equal or not
    point.secret = secret
    point.id = id

    setEndpointList(list)
    onSetupSuccess(id)
  }

  const onError = (err: unknown) => {
    const { message } = err as Error

    toast.error(message)
  }

  const { form } = createForm<z.infer<typeof schema>>({
    extend: validator({ schema }),
    onSubmit,
    onError,
  })

  const onRemove = (id: string) => {
    if (selectedEndpoint() === id) {
      setSelectedEndpoint('')
    }

    setEndpointList(endpointList().filter((e) => e.id !== id))
  }

  onMount(() => {
    const query = new URLSearchParams(location.search)

    if (query.has('hostname')) {
      void onSubmit({
        url: `${window.location.protocol}//${query.get('hostname')}${
          query.get('port') ? `:${query.get('port')}` : ''
        }`,
        secret: query.get('secret') ?? '',
      })
    } else if (endpointList().length === 0) {
      /**
        we only try auto login when there is nothing in endpoint list
        or user who is using default config won't be able to switch to another endpoint ever
      */
      void onSubmit({
        url: 'http://127.0.0.1:9090',
        secret: '',
      })
    }
  })

  return (
    <div class="mx-auto flex max-w-screen-sm flex-col items-center gap-4 py-10">
      <form class="contents" use:form={form}>
        <div class="flex w-full flex-col gap-4">
          <div class="flex-1">
            <label class="label">
              <span class="label-text">{t('endpointURL')}</span>
            </label>

            <input
              name="url"
              type="url"
              class="input input-bordered w-full"
              placeholder="http://127.0.0.1:9090"
              list="defaultEndpoints"
            />

            <datalist id="defaultEndpoints">
              <option value="http://127.0.0.1:9090" />
            </datalist>
          </div>

          <div class="flex-1">
            <label class="label">
              <span class="label-text">{t('secret')}</span>
            </label>

            <input
              name="secret"
              type="password"
              class="input input-bordered w-full"
              placeholder="secret"
            />
          </div>

          <Button type="submit" class="btn-primary uppercase">
            {t('add')}
          </Button>
        </div>
      </form>

      <div class="grid w-full grid-cols-2 gap-4">
        <For each={endpointList()}>
          {({ id, url }) => (
            <div
              class="badge badge-info flex w-full cursor-pointer items-center justify-between gap-4 py-4"
              onClick={() => onEndpointSelect(id)}
            >
              <span class="truncate">{url}</span>

              <Button
                class="btn-circle btn-ghost btn-xs text-white"
                onClick={(e) => {
                  e.stopPropagation()
                  onRemove(id)
                }}
              >
                <IconX />
              </Button>
            </div>
          )}
        </For>
      </div>
    </div>
  )
}