'use client';

import Link from 'next/link';
import { CrudToolbar, ManagementTable, Panel, StatCard } from '@chego/ui';
import { FormEvent, useEffect, useMemo, useState } from 'react';
import { fetchWithSession } from './api-helpers';

type CategoryItem = {
  id: string;
  name: string;
  sortOrder: number;
  _count?: { products: number };
};

const emptyValues = { name: '', sortOrder: '0' };

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

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      setItems(await fetchWithSession('/catalog/categories'));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar categorias.');
    } finally {
      setLoading(false);
    }
  };

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

  const metrics = useMemo(() => [
    { label: 'Categorias ativas', value: String(items.length), hint: 'catalogo isolado', tone: 'emerald' as const },
    { label: 'Com produtos', value: String(items.filter((item) => (item._count?.products ?? 0) > 0).length), hint: 'visiveis no menu', tone: 'sky' as const },
    { label: 'Sem produtos', value: String(items.filter((item) => (item._count?.products ?? 0) === 0).length), hint: 'pedem revisao', tone: 'amber' as const },
    { label: 'Ultima ordenacao', value: items.length ? String(Math.max(...items.map((item) => item.sortOrder ?? 0))) : '0', hint: 'ordem atual', tone: 'rose' as const },
  ], [items]);

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

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSaving(true);
    setError('');
    try {
      await fetchWithSession(mode === 'create' ? '/catalog/categories' : `/catalog/categories/${editingId}`, {
        method: mode === 'create' ? 'POST' : 'PATCH',
        body: JSON.stringify({
          name: values.name,
          sortOrder: Number(values.sortOrder || 0),
        }),
      });
      resetForm();
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao salvar categoria.');
      setSaving(false);
    }
  };

  const handleEdit = (item: CategoryItem) => {
    setMode('edit');
    setEditingId(item.id);
    setValues({ name: item.name, sortOrder: String(item.sortOrder ?? 0) });
  };

  const handleDelete = async (item: CategoryItem) => {
    if (!window.confirm(`Arquivar categoria ${item.name}?`)) return;
    await fetchWithSession(`/catalog/categories/${item.id}`, { method: 'DELETE' });
    await load();
  };

  return (
    <>
      <section className="overflow-hidden rounded-[2rem] border border-white/80 bg-[linear-gradient(135deg,#1a110f_0%,#6a3818_55%,#ff8a2a_100%)] p-6 text-white shadow-[0_24px_70px_rgba(90,44,15,0.18)]">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="max-w-3xl">
            <p className="text-[11px] font-black uppercase tracking-[0.28em] text-orange-100">Categorias da loja</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight">Organize o cardapio por tipo de comida.</h2>
            <p className="mt-3 text-sm leading-6 text-orange-50/90">
              Cadastre categorias como pizza, japonesa, acai ou bebidas. Depois, cada produto passa a ser vinculado a uma categoria e o app do cliente lista tudo do jeito certo.
            </p>
          </div>

          <div className="flex flex-wrap gap-3">
            <button
              type="button"
              onClick={() => {
                setMode('create');
                setEditingId(null);
                setValues(emptyValues);
              }}
              className="rounded-full bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-[#2a160f]"
            >
              Criar categoria
            </button>
            <Link
              href="/products"
              className="rounded-full border border-white/25 bg-white/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-white"
            >
              Ir para produtos
            </Link>
          </div>
        </div>
      </section>

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

      <Panel title="Categorias do cardapio" eyebrow="Integracao real do parceiro">
        <CrudToolbar filters={['somente loja logada', 'dados remotos', 'tenant isolado']} />
        <div className="mt-4 flex flex-wrap gap-3">
          <button type="button" onClick={() => { setMode('create'); setEditingId(null); setValues(emptyValues); }} className="rounded-full border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-white">Nova categoria</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>
        {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}
        {!items.length && mode === 'idle' ? (
          <div className="mt-5 rounded-[1.5rem] border border-dashed border-orange-200 bg-orange-50 p-5">
            <p className="text-sm font-black text-slate-950">Sua loja ainda nao tem categorias cadastradas.</p>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              Comece criando as secoes do cardapio. Exemplo: pizzas, lanches, japonesa, sobremesas, bebidas.
            </p>
            <button
              type="button"
              onClick={() => {
                setMode('create');
                setEditingId(null);
                setValues(emptyValues);
              }}
              className="mt-4 rounded-full bg-[#2b180f] px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white"
            >
              Cadastrar primeira categoria
            </button>
          </div>
        ) : null}
        {mode !== 'idle' ? (
          <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}>
            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              <span>Nome</span>
              <input required value={values.name} onChange={(event) => setValues((current) => ({ ...current, name: event.target.value }))} className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none" />
            </label>
            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              <span>Ordem</span>
              <input type="number" min="0" value={values.sortOrder} onChange={(event) => setValues((current) => ({ ...current, sortOrder: event.target.value }))} className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none" />
              <span className="text-xs font-medium text-slate-500">A menor ordem aparece primeiro no app do cliente.</span>
            </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 categoria' : '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: 'name', label: 'Categoria' },
              { key: 'order', label: 'Ordem', align: 'right' },
              { key: 'products', label: 'Produtos', align: 'right' },
            ]}
            rows={items.map((item) => ({
              id: item.id,
              cells: {
                name: <span className="font-bold text-slate-900">{item.name}</span>,
                order: <span className="font-semibold text-slate-900">{item.sortOrder}</span>,
                products: <span className="font-semibold text-slate-900">{item._count?.products ?? 0}</span>,
              },
            }))}
            pageLabel={loading ? 'Carregando categorias...' : `Mostrando ${items.length} categorias desta loja`}
            getRowActions={(row) => {
              const item = items.find((entry) => entry.id === row.id);
              if (!item) return [];
              return [
                { label: 'Editar', onClick: () => handleEdit(item) },
                { label: 'Arquivar', onClick: () => void handleDelete(item) },
              ];
            }}
          />
        </div>
      </Panel>
    </>
  );
}