'use client';

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

type CouponItem = {
  id: string;
  code: string;
  type: 'PERCENTAGE' | 'FIXED' | 'FREE_DELIVERY';
  value: number | string;
  minOrderValue?: number | string | null;
  usageLimit?: number | null;
  perUserLimit?: number | null;
  validFrom: string;
  validUntil: string;
  isActive: boolean;
};

const emptyValues = {
  code: '',
  type: 'PERCENTAGE',
  value: '',
  minOrderValue: '',
  usageLimit: '',
  perUserLimit: '',
  validFrom: '',
  validUntil: '',
  isActive: 'true',
};

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

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

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

  const metrics = useMemo(
    () => [
      { label: 'Cupons ativos', value: String(items.filter((item) => item.isActive).length), hint: 'liberados na vitrine', tone: 'emerald' as const },
      { label: 'Agendados', value: String(items.filter((item) => new Date(item.validFrom) > new Date()).length), hint: 'ainda nao iniciados', tone: 'amber' as const },
      { label: 'Frete gratis', value: String(items.filter((item) => item.type === 'FREE_DELIVERY').length), hint: 'cupons especiais', tone: 'sky' as const },
      { label: 'Cadastro total', value: String(items.length), hint: 'base da loja', 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' ? '/coupons' : `/coupons/${editingId}`, {
        method: mode === 'create' ? 'POST' : 'PATCH',
        body: JSON.stringify({
          code: values.code,
          type: values.type,
          value: Number(values.value),
          minOrderValue: values.minOrderValue ? Number(values.minOrderValue) : null,
          usageLimit: values.usageLimit ? Number(values.usageLimit) : null,
          perUserLimit: values.perUserLimit ? Number(values.perUserLimit) : null,
          validFrom: values.validFrom,
          validUntil: values.validUntil,
          isActive: values.isActive === 'true',
        }),
      });
      resetForm();
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao salvar cupom.');
      setSaving(false);
    }
  };

  const handleEdit = (item: CouponItem) => {
    setMode('edit');
    setEditingId(item.id);
    setValues({
      code: item.code,
      type: item.type,
      value: String(item.value),
      minOrderValue: item.minOrderValue ? String(item.minOrderValue) : '',
      usageLimit: item.usageLimit ? String(item.usageLimit) : '',
      perUserLimit: item.perUserLimit ? String(item.perUserLimit) : '',
      validFrom: item.validFrom.slice(0, 16),
      validUntil: item.validUntil.slice(0, 16),
      isActive: item.isActive ? 'true' : 'false',
    });
  };

  const handleArchive = async (item: CouponItem) => {
    if (!window.confirm(`Desativar cupom ${item.code}?`)) return;
    await fetchWithSession(`/coupons/${item.id}`, { method: 'DELETE' });
    await load();
  };

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

      <Panel title="Cupons da loja" eyebrow="Campanhas reais">
        <CrudToolbar filters={['tipo: percentual', 'tipo: frete gratis', 'vigentes', 'cupom manual']} />
        <div className="mt-4 flex 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">Novo cupom</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}
        {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>Codigo</span>
              <input required value={values.code} onChange={(event) => setValues((current) => ({ ...current, code: event.target.value.toUpperCase() }))} 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>Tipo</span>
              <select value={values.type} onChange={(event) => setValues((current) => ({ ...current, type: event.target.value }))} className="h-12 rounded-2xl border border-slate-200 bg-white px-4 outline-none">
                <option value="PERCENTAGE">Percentual</option>
                <option value="FIXED">Valor fixo</option>
                <option value="FREE_DELIVERY">Frete gratis</option>
              </select>
            </label>
            <label className="grid gap-2 text-sm font-semibold text-slate-700">
              <span>Valor</span>
              <input required type="number" step="0.01" min="0" value={values.value} onChange={(event) => setValues((current) => ({ ...current, value: 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>Pedido minimo</span>
              <input type="number" step="0.01" min="0" value={values.minOrderValue} onChange={(event) => setValues((current) => ({ ...current, minOrderValue: 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>Limite total</span>
              <input type="number" min="0" value={values.usageLimit} onChange={(event) => setValues((current) => ({ ...current, usageLimit: 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>Limite por cliente</span>
              <input type="number" min="0" value={values.perUserLimit} onChange={(event) => setValues((current) => ({ ...current, perUserLimit: 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>Inicio</span>
              <input required type="datetime-local" value={values.validFrom} onChange={(event) => setValues((current) => ({ ...current, validFrom: 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>Fim</span>
              <input required type="datetime-local" value={values.validUntil} onChange={(event) => setValues((current) => ({ ...current, validUntil: 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>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">Ativo</option>
                <option value="false">Inativo</option>
              </select>
            </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 cupom' : 'Salvar cupom'}</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: 'code', label: 'Codigo' },
              { key: 'type', label: 'Tipo' },
              { key: 'discount', label: 'Desconto', align: 'right' },
              { key: 'validity', label: 'Validade' },
              { key: 'status', label: 'Status' },
            ]}
            rows={items.map((item) => ({
              id: item.id,
              cells: {
                code: <div><p className="font-bold text-slate-900">{item.code}</p><p className="text-xs text-slate-500">Minimo {currency(item.minOrderValue ?? 0)}</p></div>,
                type: item.type === 'PERCENTAGE' ? 'Percentual' : item.type === 'FIXED' ? 'Valor fixo' : 'Frete gratis',
                discount: <span className="font-semibold text-slate-900">{item.type === 'PERCENTAGE' ? `${item.value}%` : currency(item.value)}</span>,
                validity: new Date(item.validUntil).toLocaleString('pt-BR'),
                status: { value: humanStatus(item.isActive ? 'ACTIVE' : 'SUSPENDED'), tone: statusTone(item.isActive ? 'ACTIVE' : 'SUSPENDED'), badge: true },
              },
            }))}
            pageLabel={loading ? 'Carregando cupons...' : `Mostrando ${items.length} cupons desta loja`}
            getRowActions={(row) => {
              const item = items.find((entry) => entry.id === row.id);
              if (!item) return [];
              return [
                { label: 'Editar', onClick: () => handleEdit(item) },
                { label: 'Desativar', onClick: () => void handleArchive(item) },
              ];
            }}
          />
        </div>
      </Panel>
    </div>
  );
}