'use client';

import { CrudToolbar, ManagementTable, Panel, StatCard } from '@chego/ui';
import { FormEvent, useEffect, useMemo, useState } from 'react';
import { CrudActionState, FormField, apiBase, currency, fetchWithSession, humanStatus, statusTone } from './api-helpers';

type RestaurantItem = {
  id: string;
  name: string;
  slug: string;
  documentNumber: string;
  city?: string | null;
  neighborhood?: string | null;
  acceptsCashOnDelivery?: boolean | null;
  commissionPercentage?: number | string | null;
  companyContractUrl?: string | null;
  businessLicenseUrl?: string | null;
  ownerDocumentUrl?: string | null;
  bankProofUrl?: string | null;
  documentReviewNotes?: string | null;
  documentsSubmittedAt?: string | null;
  approvedAt?: string | null;
  rejectedAt?: string | null;
  status: string;
  user: { email?: string | null; phone?: string | null };
  pixKey?: string | null;
  reviews?: Array<{ rating: number | string }>;
  _count?: { orders: number };
};

const fields: FormField[] = [
  { key: 'name', label: 'Nome', required: true },
  { key: 'slug', label: 'Slug', required: true },
  { key: 'documentNumber', label: 'CNPJ', required: true },
  { key: 'ownerEmail', label: 'Email responsavel', type: 'email', required: true },
  { key: 'ownerPhone', label: 'Telefone responsavel', required: true },
  { key: 'pixKey', label: 'Chave PIX repasse' },
  { key: 'password', label: 'Senha', type: 'password', required: true, hideOnEdit: true },
  { key: 'city', label: 'Cidade' },
  { key: 'neighborhood', label: 'Bairro' },
  {
    key: 'acceptsCashOnDelivery',
    label: 'Dinheiro na entrega',
    type: 'select',
    options: [
      { label: 'Nao', value: 'false' },
      { label: 'Sim', value: 'true' },
    ],
  },
  { key: 'commissionPercentage', label: 'Comissao %' },
  { key: 'companyContractUrl', label: 'Contrato social URL' },
  { key: 'businessLicenseUrl', label: 'Alvara/licenca URL' },
  { key: 'ownerDocumentUrl', label: 'Documento do responsavel URL' },
  { key: 'bankProofUrl', label: 'Comprovante bancario URL' },
  { key: 'documentReviewNotes', label: 'Parecer do diretor' },
  {
    key: 'status',
    label: 'Status',
    type: 'select',
    options: [
      { label: 'ACTIVE', value: 'ACTIVE' },
      { label: 'PENDING', value: 'PENDING' },
      { label: 'SUSPENDED', value: 'SUSPENDED' },
      { label: 'REJECTED', value: 'REJECTED' },
    ],
  },
];

const emptyValues = {
  name: '',
  slug: '',
  documentNumber: '',
  ownerEmail: '',
  ownerPhone: '',
  pixKey: '',
  password: '',
  city: '',
  neighborhood: '',
  acceptsCashOnDelivery: 'false',
  commissionPercentage: '12.5',
  companyContractUrl: '',
  businessLicenseUrl: '',
  ownerDocumentUrl: '',
  bankProofUrl: '',
  documentReviewNotes: '',
  status: 'PENDING',
};

export function RestaurantsCrudPanel() {
  const [items, setItems] = useState<RestaurantItem[]>([]);
  const [values, setValues] = useState<Record<string, string>>(emptyValues);
  const [mode, setMode] = useState<CrudActionState>('idle');
  const [editingId, setEditingId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const payload = await fetchWithSession('/restaurants');
      setItems(payload);
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : 'Falha ao carregar restaurantes.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  const metrics = useMemo(() => {
    const active = items.filter((item) => item.status === 'ACTIVE').length;
    const pending = items.filter((item) => item.status === 'PENDING').length;
    const suspended = items.filter((item) => item.status === 'SUSPENDED').length;
    return [
      { label: 'Ativos', value: String(active), hint: 'lojas aprovadas', tone: 'emerald' as const },
      { label: 'Pendentes', value: String(pending), hint: 'aguardando documentos', tone: 'amber' as const },
      { label: 'Suspensos', value: String(suspended), hint: 'visibilidade pausada', tone: 'rose' as const },
      { label: 'Registros', value: String(items.length), hint: 'sincronizados com a API', tone: 'sky' as const },
    ];
  }, [items]);

  const rows = items.map((item) => {
    const avgRating = item.reviews?.length
      ? (item.reviews.reduce((acc, entry) => acc + Number(entry.rating), 0) / item.reviews.length).toFixed(1)
      : '0.0';

    return {
      id: item.id,
      cells: {
        store: (
          <div>
            <p className="font-bold text-slate-900">{item.name}</p>
            <p className="text-xs text-slate-500">{[item.city, item.neighborhood].filter(Boolean).join(' / ') || 'Sem geografia'}</p>
          </div>
        ),
        owner: (
          <div>
            <p>{item.user.email ?? 'Sem email'}</p>
            <p className="text-xs text-slate-500">{item.user.phone ?? 'Sem telefone'}</p>
            <p className="text-xs text-slate-500">{item.pixKey ? `PIX ${item.pixKey}` : 'PIX nao informado'}</p>
          </div>
        ),
        commission: <span className="font-semibold text-slate-900">{Number(item.commissionPercentage ?? 0).toFixed(1)}%</span>,
        plan: (
          <div>
            <p>Restaurante Pro</p>
            <p className="text-xs text-slate-500">
              {[
                item.companyContractUrl ? 'contrato' : null,
                item.businessLicenseUrl ? 'alvara' : null,
                item.ownerDocumentUrl ? 'responsavel' : null,
                item.bankProofUrl ? 'banco' : null,
              ]
                .filter(Boolean)
                .join(' • ') || 'docs pendentes'}
            </p>
          </div>
        ),
        rating: <span className="font-semibold text-slate-900">{avgRating}</span>,
        status: { value: humanStatus(item.status), tone: statusTone(item.status), badge: true },
      },
    };
  });

  const handleEdit = (item: RestaurantItem) => {
    setSuccess('');
    setMode('edit');
    setEditingId(item.id);
    setValues({
      name: item.name,
      slug: item.slug,
      documentNumber: item.documentNumber,
      ownerEmail: item.user.email ?? '',
      ownerPhone: item.user.phone ?? '',
      pixKey: item.pixKey ?? '',
      password: '',
      city: item.city ?? '',
      neighborhood: item.neighborhood ?? '',
      acceptsCashOnDelivery: item.acceptsCashOnDelivery ? 'true' : 'false',
      commissionPercentage: String(item.commissionPercentage ?? ''),
      companyContractUrl: item.companyContractUrl ?? '',
      businessLicenseUrl: item.businessLicenseUrl ?? '',
      ownerDocumentUrl: item.ownerDocumentUrl ?? '',
      bankProofUrl: item.bankProofUrl ?? '',
      documentReviewNotes: item.documentReviewNotes ?? '',
      status: item.status,
    });
  };

  const handleDelete = async (item: RestaurantItem) => {
    if (!window.confirm(`Arquivar ${item.name}?`)) return;
    await fetchWithSession(`/restaurants/${item.id}`, { method: 'DELETE' });
    setSuccess(`Restaurante ${item.name} arquivado com sucesso.`);
    await load();
  };

  const updateStatus = async (item: RestaurantItem, status: 'ACTIVE' | 'REJECTED' | 'SUSPENDED') => {
    setError('');
    setSuccess('');
    try {
      await fetchWithSession(`/restaurants/${item.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ status }),
      });
      setSuccess(
        status === 'ACTIVE'
          ? `Restaurante ${item.name} aprovado e liberado para acesso.`
          : status === 'REJECTED'
            ? `Restaurante ${item.name} reprovado.`
            : `Restaurante ${item.name} suspenso.`,
      );
      await load();
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Falha ao atualizar status do restaurante.');
    }
  };

  const resetForm = () => {
    setMode('idle');
    setEditingId(null);
    setValues(emptyValues);
    setSaving(false);
  };

  const openCreateForm = () => {
    setSuccess('');
    setError('');
    setMode('create');
    setEditingId(null);
    setValues(emptyValues);
  };

  const buildSlug = (value: string) =>
    value
      .trim()
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/^-+|-+$/g, '');

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSaving(true);
    setError('');
    setSuccess('');
    const normalizedSlug = buildSlug(values.slug || values.name);
    if (!values.name.trim()) {
      setError('Informe o nome do restaurante.');
      setSaving(false);
      return;
    }
    if (!normalizedSlug) {
      setError('Informe um nome ou slug valido para a loja.');
      setSaving(false);
      return;
    }
    if (!values.documentNumber.trim()) {
      setError('Informe o CNPJ/documento do restaurante.');
      setSaving(false);
      return;
    }
    if (!values.ownerEmail.trim() || !values.ownerPhone.trim()) {
      setError('Informe email e telefone do responsavel pela loja.');
      setSaving(false);
      return;
    }
    if (mode === 'create' && values.password.trim().length < 8) {
      setError('A senha inicial da loja precisa ter pelo menos 8 caracteres.');
      setSaving(false);
      return;
    }
    try {
      const payload: Record<string, unknown> = {
        ...values,
        slug: normalizedSlug,
        acceptsCashOnDelivery: values.acceptsCashOnDelivery === 'true',
      };
      if (mode === 'edit' && !payload.password) {
        delete payload.password;
      }

      await fetchWithSession(mode === 'create' ? '/restaurants' : `/restaurants/${editingId}`, {
        method: mode === 'create' ? 'POST' : 'PATCH',
        body: JSON.stringify(payload),
      });
      setSuccess(mode === 'create' ? 'Restaurante criado com sucesso.' : 'Restaurante atualizado com sucesso.');
      resetForm();
      await load();
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Falha ao salvar restaurante.');
      setSaving(false);
    }
  };

  return (
    <>
      <section className="grid gap-4 md:grid-cols-4">
        {metrics.map((metric) => (
          <StatCard key={metric.label} {...metric} />
        ))}
      </section>

      <Panel title="Cadastro de restaurantes" eyebrow="Integracao real com a API">
        <CrudToolbar
          actions={[
            { label: 'Novo', tone: 'primary', onClick: openCreateForm },
            { label: 'Atualizar painel', tone: 'neutral', onClick: () => void load() },
          ]}
          filters={['dados remotos', 'escopo admin', 'persistencia real']}
        />
        <div className="mt-4 flex gap-3">
          <button type="button" onClick={openCreateForm} className="rounded-full border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-white">
            Novo restaurante
          </button>
          <button type="button" onClick={() => void load()} className="rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-700">
            Recarregar
          </button>
        </div>
        {success ? <p className="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{success}</p> : null}
        {error ? <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}
        {mode !== 'idle' ? (
          <form id="restaurant-form" className="mt-5 grid gap-4 rounded-[1.5rem] border border-slate-200 bg-slate-50 p-5 md:grid-cols-2" onSubmit={submit}>
            {fields.filter((field) => !(mode === 'edit' && field.hideOnEdit)).map((field) => (
              <label key={field.key} className="grid gap-2 text-sm font-semibold text-slate-700">
                <span>{field.label}</span>
                {field.type === 'select' ? (
                  <select
                    value={values[field.key] ?? ''}
                    onChange={(event) => setValues((current) => ({ ...current, [field.key]: event.target.value }))}
                    className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none"
                  >
                    {(field.options ?? []).map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                ) : (
                  <input
                    type={field.type ?? 'text'}
                    required={field.required}
                    value={values[field.key] ?? ''}
                    onChange={(event) => {
                      const nextValue = event.target.value;
                      setValues((current) => {
                        if (field.key === 'name' && mode === 'create' && !current.slug) {
                          return { ...current, name: nextValue, slug: buildSlug(nextValue) };
                        }
                        if (field.key === 'slug') {
                          return { ...current, slug: buildSlug(nextValue) };
                        }
                        return { ...current, [field.key]: nextValue };
                      });
                    }}
                    className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none"
                  />
                )}
              </label>
            ))}
            <div className="md:col-span-2 flex gap-3">
              <button type="submit" disabled={saving} className="rounded-full bg-slate-900 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-white">
                {saving ? 'Salvando...' : mode === 'create' ? 'Criar restaurante' : 'Salvar ajustes'}
              </button>
              <button type="button" onClick={resetForm} className="rounded-full border border-slate-200 bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-slate-700">
                Cancelar
              </button>
            </div>
          </form>
        ) : null}
        <div className="mt-5">
          <ManagementTable
            columns={[
              { key: 'store', label: 'Restaurante' },
              { key: 'owner', label: 'Responsavel' },
              { key: 'commission', label: 'Comissao', align: 'right' },
              { key: 'plan', label: 'Plano' },
              { key: 'rating', label: 'Nota', align: 'right' },
              { key: 'status', label: 'Status' },
            ]}
            rows={rows}
            pageLabel={loading ? 'Carregando restaurantes...' : `Mostrando ${items.length} restaurantes sincronizados`}
            getRowActions={(row) => {
              const item = items.find((entry) => entry.id === row.id);
              if (!item) return [];
              return [
                ...(item.status === 'PENDING'
                  ? [
                      { label: 'Aprovar', onClick: () => void updateStatus(item, 'ACTIVE') },
                      { label: 'Rejeitar', onClick: () => void updateStatus(item, 'REJECTED') },
                    ]
                  : []),
                { label: 'Editar', onClick: () => handleEdit(item) },
                ...(item.status === 'ACTIVE'
                  ? [{ label: 'Suspender', onClick: () => void updateStatus(item, 'SUSPENDED') }]
                  : []),
                { label: 'Arquivar', onClick: () => void handleDelete(item) },
              ];
            }}
          />
        </div>
      </Panel>
    </>
  );
}