'use client';

import Link from 'next/link';
import { FormEvent, useMemo, useState } from 'react';
import { formatCep, lookupCep } from '../lib/cep';

const apiBase = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001/api';

type UploadField =
  | 'companyContractUrl'
  | 'businessLicenseUrl'
  | 'ownerDocumentUrl'
  | 'bankProofUrl'
  | 'logoUrl'
  | 'coverImageUrl';

type FormState = {
  name: string;
  slug: string;
  documentNumber: string;
  description: string;
  ownerEmail: string;
  password: string;
  ownerPhone: string;
  pixKey: string;
  zipCode: string;
  street: string;
  number: string;
  complement: string;
  neighborhood: string;
  city: string;
  state: string;
  logoUrl: string;
  coverImageUrl: string;
  companyContractUrl: string;
  businessLicenseUrl: string;
  ownerDocumentUrl: string;
  bankProofUrl: string;
};

const initialState: FormState = {
  name: '',
  slug: '',
  documentNumber: '',
  description: '',
  ownerEmail: '',
  password: '',
  ownerPhone: '',
  pixKey: '',
  zipCode: '',
  street: '',
  number: '',
  complement: '',
  neighborhood: '',
  city: '',
  state: '',
  logoUrl: '',
  coverImageUrl: '',
  companyContractUrl: '',
  businessLicenseUrl: '',
  ownerDocumentUrl: '',
  bankProofUrl: '',
};

const uploadLabels: Record<UploadField, string> = {
  companyContractUrl: 'Contrato social',
  businessLicenseUrl: 'Alvara ou licenca',
  ownerDocumentUrl: 'Documento do responsavel',
  bankProofUrl: 'Comprovante bancario',
  logoUrl: 'Logo da loja',
  coverImageUrl: 'Capa da loja',
};

function normalizeSlug(value: string) {
  return value
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
}

export function SignupForm() {
  const [form, setForm] = useState<FormState>(initialState);
  const [submitting, setSubmitting] = useState(false);
  const [loadingCep, setLoadingCep] = useState(false);
  const [uploadingField, setUploadingField] = useState<UploadField | ''>('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const completedUploads = useMemo(
    () =>
      (['companyContractUrl', 'businessLicenseUrl', 'ownerDocumentUrl', 'bankProofUrl'] as UploadField[]).filter(
        (field) => Boolean(form[field]),
      ).length,
    [form],
  );

  const setField = (field: keyof FormState, value: string) => {
    setForm((current) => ({ ...current, [field]: value }));
  };

  const handleCepLookup = async () => {
    setLoadingCep(true);
    setError('');
    try {
      const result = await lookupCep(form.zipCode);
      setForm((current) => ({
        ...current,
        zipCode: result.zipCode,
        street: current.street || result.street,
        neighborhood: current.neighborhood || result.neighborhood,
        city: current.city || result.city,
        state: current.state || result.state,
        complement: current.complement || result.complement,
      }));
    } catch (lookupError) {
      setError(lookupError instanceof Error ? lookupError.message : 'Nao foi possivel consultar o CEP.');
    } finally {
      setLoadingCep(false);
    }
  };

  const handleUpload = async (field: UploadField, file: File | null) => {
    if (!file) {
      return;
    }

    setUploadingField(field);
    setError('');
    const data = new FormData();
    data.append('file', file);

    try {
      const response = await fetch(`${apiBase}/public/restaurants/uploads/${field}`, {
        method: 'POST',
        body: data,
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok || !payload?.url) {
        throw new Error(payload?.message ?? `Falha ao enviar ${uploadLabels[field].toLowerCase()}.`);
      }
      setField(field, payload.url);
    } catch (uploadError) {
      setError(uploadError instanceof Error ? uploadError.message : 'Falha no upload do documento.');
    } finally {
      setUploadingField('');
    }
  };

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitting(true);
    setError('');
    setSuccess('');

    try {
      const response = await fetch(`${apiBase}/public/restaurants/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...form,
          slug: normalizeSlug(form.slug || form.name),
          zipCode: form.zipCode.replace(/\D/g, ''),
        }),
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(
          Array.isArray(payload?.message) ? payload.message[0] : payload?.message ?? 'Nao foi possivel concluir o cadastro.',
        );
      }

      setSuccess('Cadastro enviado com sucesso. A loja ficara em analise ate a validacao dos documentos.');
      setForm(initialState);
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Falha ao enviar cadastro.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form className="space-y-8" onSubmit={handleSubmit}>
      <section className="grid gap-4 md:grid-cols-2">
        <div className="md:col-span-2">
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Nome da loja</label>
          <input value={form.name} onChange={(event) => setField('name', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Slug da loja</label>
          <input value={form.slug} onChange={(event) => setField('slug', normalizeSlug(event.target.value))} placeholder="minha-loja" className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">CNPJ ou documento</label>
          <input value={form.documentNumber} onChange={(event) => setField('documentNumber', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Email responsavel</label>
          <input type="email" value={form.ownerEmail} onChange={(event) => setField('ownerEmail', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Telefone</label>
          <input value={form.ownerPhone} onChange={(event) => setField('ownerPhone', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Senha</label>
          <input type="password" value={form.password} onChange={(event) => setField('password', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Pix</label>
          <input value={form.pixKey} onChange={(event) => setField('pixKey', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div className="md:col-span-2">
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Descricao</label>
          <textarea value={form.description} onChange={(event) => setField('description', event.target.value)} rows={4} className="mt-2 w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
      </section>

      <section className="rounded-[1.8rem] border border-white/10 bg-white/[0.03] p-5">
        <div className="flex items-center justify-between gap-4">
          <div>
            <p className="text-sm font-black text-white">Identidade visual da loja</p>
            <p className="mt-1 text-sm text-slate-400">Cada parceiro pode subir a propria logo e uma imagem de capa.</p>
          </div>
          <span className="rounded-full border border-white/10 px-3 py-1 text-xs font-bold text-slate-300">logo + capa</span>
        </div>
        <div className="mt-5 grid gap-4 md:grid-cols-2">
          {(['logoUrl', 'coverImageUrl'] as UploadField[]).map((field) => (
            <label key={field} className="rounded-2xl border border-white/10 bg-[#0f172a] p-4">
              <span className="block text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">{uploadLabels[field]}</span>
              <input
                type="file"
                accept="image/*"
                className="mt-3 block w-full text-sm text-slate-300 file:mr-4 file:rounded-full file:border-0 file:bg-[#ff7a1a] file:px-4 file:py-2 file:text-xs file:font-black file:text-[#10141b]"
                onChange={(event) => void handleUpload(field, event.target.files?.[0] ?? null)}
              />
              <span className="mt-3 block text-xs text-slate-500">
                {uploadingField === field ? 'Enviando imagem...' : form[field] ? 'Imagem enviada.' : 'Nenhuma imagem enviada.'}
              </span>
            </label>
          ))}
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-[1fr_auto]">
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">CEP</label>
          <input value={form.zipCode} onChange={(event) => setField('zipCode', formatCep(event.target.value))} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <button type="button" onClick={() => void handleCepLookup()} className="mt-7 h-14 rounded-2xl border border-white/10 px-5 text-sm font-bold text-slate-200 transition hover:border-[#ff7a1a]" disabled={loadingCep}>
          {loadingCep ? 'Buscando CEP...' : 'Buscar CEP'}
        </button>
      </section>

      <section className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Rua</label>
          <input value={form.street} onChange={(event) => setField('street', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Numero</label>
          <input value={form.number} onChange={(event) => setField('number', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Complemento</label>
          <input value={form.complement} onChange={(event) => setField('complement', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Bairro</label>
          <input value={form.neighborhood} onChange={(event) => setField('neighborhood', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">Cidade</label>
          <input value={form.city} onChange={(event) => setField('city', event.target.value)} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
        <div>
          <label className="text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">UF</label>
          <input value={form.state} onChange={(event) => setField('state', event.target.value.toUpperCase())} maxLength={2} className="mt-2 h-14 w-full rounded-2xl border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-[#ff7a1a]" />
        </div>
      </section>

      <section className="rounded-[1.8rem] border border-white/10 bg-white/[0.03] p-5">
        <div className="flex items-center justify-between gap-4">
          <div>
            <p className="text-sm font-black text-white">Documentos da loja</p>
            <p className="mt-1 text-sm text-slate-400">Envie os 4 arquivos para analise do cadastro.</p>
          </div>
          <span className="rounded-full border border-white/10 px-3 py-1 text-xs font-bold text-slate-300">{completedUploads}/4 enviados</span>
        </div>
        <div className="mt-5 grid gap-4 md:grid-cols-2">
          {(['companyContractUrl', 'businessLicenseUrl', 'ownerDocumentUrl', 'bankProofUrl'] as UploadField[]).map((field) => (
            <label key={field} className="rounded-2xl border border-white/10 bg-[#0f172a] p-4">
              <span className="block text-[11px] font-bold uppercase tracking-[0.24em] text-slate-400">{uploadLabels[field]}</span>
              <input
                type="file"
                className="mt-3 block w-full text-sm text-slate-300 file:mr-4 file:rounded-full file:border-0 file:bg-[#ff7a1a] file:px-4 file:py-2 file:text-xs file:font-black file:text-[#10141b]"
                onChange={(event) => void handleUpload(field, event.target.files?.[0] ?? null)}
              />
              <span className="mt-3 block text-xs text-slate-500">
                {uploadingField === field ? 'Enviando...' : form[field] ? 'Documento enviado.' : 'Nenhum arquivo enviado.'}
              </span>
            </label>
          ))}
        </div>
      </section>

      {error ? <p className="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">{error}</p> : null}
      {success ? <p className="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-200">{success}</p> : null}

      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-slate-400">
          Ja tem acesso?{' '}
          <Link href="/login" className="font-semibold text-[#ff9a57] transition hover:text-white">
            Entrar na loja
          </Link>
        </p>
        <button type="submit" disabled={submitting || uploadingField !== ''} className="h-14 rounded-2xl bg-[#ff7a1a] px-8 text-sm font-black uppercase tracking-[0.24em] text-[#10141b] transition hover:bg-[#ff8f3d] disabled:cursor-not-allowed disabled:opacity-70">
          {submitting ? 'Enviando cadastro...' : 'Enviar cadastro'}
        </button>
      </div>
    </form>
  );
}