import { Link, useForm, usePage } from '@inertiajs/react'
import { Info } from 'lucide-react'
import type { FormEvent } from 'react'
import { useEffect, useRef } from 'react'

import { CopyButton } from '@/components/CopyButton'
import { RichText } from '@/components/RichText'
import { SectionCard } from '@/components/SectionCard'
import { SiteFields } from '@/components/SiteFields'
import { AppLayout } from '@/layouts/AppLayout'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { faultText } from '@/lib/errors'
import { t } from '@/lib/i18n'
import { route } from '@/lib/routes'

interface Props {
  property_types: { value: string; label: string }[]
  client_email: string
}

/**
 * El alta suelta de un sitio.
 *
 * **Está fuera del menú.** Con la interfaz acotada a un sitio por cuenta, el
 * alta vive adentro de la conexión, que es la pantalla que tiene que dejar a
 * Google conectado de punta a punta. Esta pantalla sigue respondiendo en su
 * dirección y sin cambios: es la que se vuelve a colgar del menú el día que la
 * cuenta necesite más de uno, y guardarla entera cuesta menos que rehacerla.
 *
 * Los dos campos son los mismos que los de la conexión, y por eso son un
 * componente compartido: escritos dos veces, la explicación de las formas de
 * propiedad se corregiría en uno solo.
 */
export default function DomainsCreate({ property_types, client_email }: Props) {
  const { errors } = usePage().props
  const form = useForm({ hostname: '', property_type: 'DOMAIN' })
  const hostnameField = useRef<HTMLInputElement>(null)

  // El foco vuelve al primer campo con error al recibir la respuesta: sin esto,
  // quien navega con teclado tiene que recorrer el formulario entero para
  // encontrar qué salió mal (RT-17).
  useEffect(() => {
    if (errors.hostname) hostnameField.current?.focus()
  }, [errors.hostname])

  const submit = (event: FormEvent) => {
    event.preventDefault()
    form.post(route('domain.new'))
  }

  return (
    <AppLayout title={t('domainCreate.title')} description={t('domainCreate.description')}>
      <form onSubmit={submit} className="flex max-w-2xl flex-col gap-6" noValidate>
        <SectionCard
          title={{ text: t('domainCreate.domain.title') }}
          description={t('domainCreate.shape.description')}
        >
          <SiteFields
            hostname={form.data.hostname}
            propertyType={form.data.property_type}
            propertyTypes={property_types}
            hostnameError={faultText(errors.hostname)}
            propertyTypeError={faultText(errors.property_type)}
            onHostnameChange={(value) => form.setData('hostname', value)}
            onPropertyTypeChange={(value) => form.setData('property_type', value)}
            hostnameRef={hostnameField}
          />

          {errors.duplicate_id ? (
            <div>
              <Button asChild size="sm" variant="outline">
                <Link
                  href={route('domain.show', {
                    domain_id: String(errors.duplicate_id.params?.id ?? ''),
                  })}
                >
                  {t('domainCreate.seeExisting')}
                </Link>
              </Button>
            </div>
          ) : null}
        </SectionCard>

        {/*
          La dirección de la cuenta de servicio se muestra antes del alta y no
          después. El paso siguiente es autorizarla en Search Console, y tenerla
          acá ahorra un viaje: se copia ahora y se pega allá sin volver.
        */}
        <Alert>
          <Info />
          <AlertTitle>{t('domainCreate.next.title')}</AlertTitle>
          <AlertDescription className="flex flex-col items-start gap-3">
            <span>
              <RichText text={t('domainCreate.next.body')} />
            </span>
            <span className="flex flex-wrap items-center gap-2">
              <code className="bg-muted/60 rounded px-2 py-1 text-sm break-all" translate="no">
                {client_email}
              </code>
              <CopyButton value={client_email} label={t('serviceAccount.copy')} />
            </span>
          </AlertDescription>
        </Alert>

        <div className="flex items-center gap-3">
          <Button type="submit" disabled={form.processing} aria-busy={form.processing}>
            {form.processing ? t('domainCreate.submitting') : t('domainCreate.submit')}
          </Button>
          <Button asChild variant="ghost">
            {/* A la conexión: el listado del que se venía ya no tiene dirección. */}
            <Link href={route('settings')}>{t('common.cancel')}</Link>
          </Button>
        </div>
      </form>
    </AppLayout>
  )
}