'use client';

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

type CategoryOption = { id: string; name: string };
type ProductItem = {
  id: string;
  name: string;
  description?: string | null;
  imageUrl?: string | null;
  price: number | string;
  isActive: boolean;
  category?: { id: string; name: string } | null;
};

const emptyValues = { name: '', description: '', imageUrl: '', price: '', categoryId: '', isActive: 'true' };

export function ProductsCrudPanel() {
  const [items, setItems] = useState<ProductItem[]>([]);
  const [categories, setCategories] = useState<CategoryOption[]>([]);
  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 [uploadingImage, setUploadingImage] = useState(false);
  const [error, setError] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [products, categoryPayload] = await Promise.all([
        fetchWithSession('/catalog/products'),
        fetchWithSession('/catalog/categories'),
      ]);
      setItems(products);
      setCategories(categoryPayload.map((entry: CategoryOption) => ({ id: entry.id, name: entry.name })));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar produtos.');
    } finally {
      setLoading(false);
    }
  };

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

  const metrics = useMemo(() => [
    { label: 'Produtos ativos', value: String(items.filter((item) => item.isActive).length), hint: 'visiveis no menu', tone: 'emerald' as const },
    { label: 'Inativos', value: String(items.filter((item) => !item.isActive).length), hint: 'fora da vitrine', tone: 'rose' as const },
    { label: 'Categorias usadas', value: String(new Set(items.map((item) => item.category?.name).filter(Boolean)).size), hint: 'menu atual', tone: 'sky' as const },
    { label: 'Cadastro total', value: String(items.length), hint: 'tenant isolado', tone: 'amber' as const },
  ], [items]);

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

  const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) {
      return;
    }

    setUploadingImage(true);
    setError('');
    try {
      const formData = new FormData();
      formData.append('file', file);
      const payload = await fetchWithSession('/uploads?folder=products', {
        method: 'POST',
        body: formData,
      });
      setValues((current) => ({ ...current, imageUrl: payload.url ?? '' }));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao enviar a foto do produto.');
    } finally {
      setUploadingImage(false);
      event.target.value = '';
    }
  };

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

  const handleEdit = (item: ProductItem) => {
    setMode('edit');
    setEditingId(item.id);
    setValues({
      name: item.name,
      description: item.description ?? '',
      imageUrl: item.imageUrl ?? '',
      price: String(item.price),
      categoryId: item.category?.id ?? '',
      isActive: item.isActive ? 'true' : 'false',
    });
  };

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

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

      <Panel title="Produtos da loja" eyebrow="Catalogo real do parceiro">
        <CrudToolbar filters={['sessao isolada', 'dados remotos', 'tenant restaurante']} />
        <div className="mt-4 flex flex-wrap gap-3">
          <button type="button" onClick={() => { setMode('create'); setEditingId(null); setValues(emptyValues); }} className="rounded-full bg-slate-950 px-5 py-3 text-xs font-black uppercase tracking-[0.2em] text-white shadow-[0_14px_30px_rgba(15,23,42,0.2)] transition hover:-translate-y-0.5">Novo produto</button>
          <button type="button" onClick={() => void load()} className="rounded-full border border-slate-200 bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.2em] text-slate-700 transition hover:border-slate-300 hover:bg-slate-50">Recarregar</button>
          <Link href="/categories" className="rounded-full border border-orange-200 bg-orange-50 px-5 py-3 text-xs font-black uppercase tracking-[0.2em] text-orange-700 transition hover:border-orange-300 hover:bg-orange-100">
            Cadastrar categorias
          </Link>
        </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}
        {!categories.length ? (
          <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">Cadastre as categorias da loja antes de publicar produtos.</p>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              O app do cliente usa as categorias para organizar o cardapio. Sem isso, o fluxo da vitrine fica mais fraco.
            </p>
            <Link href="/categories" className="mt-4 inline-flex rounded-full bg-[#2b180f] px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white">
              Abrir categorias
            </Link>
          </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>Preco</span>
              <input required type="number" step="0.01" min="0" value={values.price} onChange={(event) => setValues((current) => ({ ...current, price: 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 md:col-span-2">
              <span>Descricao</span>
              <input value={values.description} onChange={(event) => setValues((current) => ({ ...current, description: 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 md:col-span-2">
              <span>Foto do produto</span>
              <div className="grid gap-3 rounded-[1.35rem] border border-slate-200 bg-white p-4 md:grid-cols-[1fr_auto] md:items-center">
                <input value={values.imageUrl} onChange={(event) => setValues((current) => ({ ...current, imageUrl: event.target.value }))} placeholder="https://... ou envie direto da sua maquina" className="h-12 rounded-2xl border border-slate-200 bg-slate-50 px-4 outline-none" />
                <label className="inline-flex cursor-pointer items-center justify-center rounded-full border border-orange-200 bg-orange-50 px-4 py-3 text-xs font-black uppercase tracking-[0.18em] text-orange-700 transition hover:border-orange-300 hover:bg-orange-100">
                  {uploadingImage ? 'Enviando...' : 'Enviar imagem'}
                  <input type="file" accept="image/*" className="hidden" onChange={(event) => void handleImageUpload(event)} disabled={uploadingImage} />
                </label>
              </div>
              <span className="text-xs font-medium text-slate-500">Use uma unica foto por produto. Ela sera a imagem principal no app do cliente.</span>
              {values.imageUrl ? <p className="text-xs font-semibold text-emerald-700">Imagem pronta para uso no app do cliente.</p> : null}
            </label>
            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              <span>Categoria</span>
              <select required value={values.categoryId} onChange={(event) => setValues((current) => ({ ...current, categoryId: event.target.value }))} className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none">
                <option value="">Selecione o tipo de comida</option>
                {categories.map((category) => <option key={category.id} value={category.id}>{category.name}</option>)}
              </select>
              <span className="text-xs font-medium text-slate-500">Se a categoria nao existir ainda, crie primeiro em Categorias.</span>
            </label>
            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              <span>Status</span>
              <select value={values.isActive} onChange={(event) => setValues((current) => ({ ...current, isActive: event.target.value }))} className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none">
                <option value="true">ACTIVE</option>
                <option value="false">SUSPENDED</option>
              </select>
            </label>
            <div className="md:col-span-2 flex gap-3">
              <button type="submit" disabled={saving || uploadingImage} className="rounded-full bg-slate-950 px-5 py-3 text-xs font-black uppercase tracking-[0.2em] text-white shadow-[0_14px_30px_rgba(15,23,42,0.2)] transition hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-60">{saving ? 'Salvando...' : mode === 'create' ? 'Criar produto' : '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.2em] text-slate-700 transition hover:border-slate-300 hover:bg-slate-50">Cancelar</button>
            </div>
          </form>
        ) : null}
        <div className="mt-5">
          <ManagementTable
            columns={[
              { key: 'product', label: 'Produto' },
              { key: 'category', label: 'Categoria' },
              { key: 'price', label: 'Preco', align: 'right' },
              { key: 'status', label: 'Status' },
            ]}
            rows={items.map((item) => ({
              id: item.id,
              cells: {
                product: <div><p className="font-bold text-slate-900">{item.name}</p><p className="text-xs text-slate-500">{item.description ?? 'Sem descricao'}</p><p className="text-[11px] text-slate-400">{item.imageUrl ? '1 foto principal cadastrada' : 'Sem foto principal'}</p></div>,
                category: item.category?.name ?? 'Sem categoria',
                price: <span className="font-semibold text-slate-900">{currency(item.price)}</span>,
                status: { value: humanStatus(item.isActive ? 'ACTIVE' : 'SUSPENDED'), tone: statusTone(item.isActive ? 'ACTIVE' : 'SUSPENDED'), badge: true },
              },
            }))}
            pageLabel={loading ? 'Carregando produtos...' : `Mostrando ${items.length} produtos 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>
    </>
  );
}