'use client';

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

type DriverItem = {
  id: string;
  fullName: string;
  documentNumber: string;
  vehiclePlate?: string | null;
  vehicleModel?: string | null;
  pixKey?: string | null;
  status: string;
  isOnline?: boolean;
  rating?: number | string | null;
  user: { email?: string | null; phone?: string | null };
  wallet?: { balance?: number | string | null } | null;
  _count?: { deliveries: number };
};

const fields: FormField[] = [
  { key: 'fullName', label: 'Nome completo', required: true },
  { key: 'email', label: 'Email', type: 'email', required: true },
  { key: 'phone', label: 'Telefone', required: true },
  { key: 'password', label: 'Senha', type: 'password', required: true, hideOnEdit: true },
  { key: 'documentNumber', label: 'CPF', required: true },
  { key: 'vehiclePlate', label: 'Placa' },
  { key: 'vehicleModel', label: 'Veiculo' },
  { key: 'pixKey', label: 'Chave PIX' },
  { key: 'status', label: 'Status', type: 'select', options: [{ label: 'ACTIVE', value: 'ACTIVE' }, { label: 'PENDING', value: 'PENDING' }, { label: 'SUSPENDED', value: 'SUSPENDED' }] },
];

const emptyValues = {
  fullName: '',
  email: '',
  phone: '',
  password: '',
  documentNumber: '',
  vehiclePlate: '',
  vehicleModel: '',
  pixKey: '',
  status: 'ACTIVE',
};

export function DriversCrudPanel() {
  const [items, setItems] = useState<DriverItem[]>([]);
  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('/drivers'));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar entregadores.');
    } finally {
      setLoading(false);
    }
  };

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

  const metrics = useMemo(() => {
    const active = items.filter((item) => item.status === 'ACTIVE').length;
    const suspended = items.filter((item) => item.status === 'SUSPENDED').length;
    return [
      { label: 'Ativos', value: String(active), hint: 'com conta habilitada', tone: 'emerald' as const },
      { label: 'Online', value: String(items.filter((item) => item.isOnline).length), hint: 'aptos a corrida', tone: 'amber' as const },
      { label: 'Suspensos', value: String(suspended), hint: 'bloqueio operacional', tone: 'rose' as const },
      { label: 'Registros', value: String(items.length), hint: 'frota sincronizada', tone: 'sky' as const },
    ];
  }, [items]);

  const handleEdit = (item: DriverItem) => {
    setMode('edit');
    setEditingId(item.id);
    setValues({
      fullName: item.fullName,
      email: item.user.email ?? '',
      phone: item.user.phone ?? '',
      password: '',
      documentNumber: item.documentNumber,
      vehiclePlate: item.vehiclePlate ?? '',
      vehicleModel: item.vehicleModel ?? '',
      pixKey: item.pixKey ?? '',
      status: item.status,
    });
  };

  const handleDelete = async (item: DriverItem) => {
    if (!window.confirm(`Arquivar ${item.fullName}?`)) return;
    await fetchWithSession(`/drivers/${item.id}`, { method: 'DELETE' });
    await load();
  };

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

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSaving(true);
    setError('');
    try {
      const payload = { ...values };
      if (mode === 'edit' && !payload.password) delete payload.password;
      await fetchWithSession(mode === 'create' ? '/drivers' : `/drivers/${editingId}`, {
        method: mode === 'create' ? 'POST' : 'PATCH',
        body: JSON.stringify(payload),
      });
      resetForm();
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao salvar entregador.');
      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 entregadores" eyebrow="Integracao real com a API">
        <CrudToolbar actions={[{ label: 'Novo', tone: 'primary', href: '#' }, { label: 'Atualizar painel', tone: 'neutral', href: '#' }]} filters={['dados remotos', 'frota real', 'escopo admin']} />
        <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 entregador</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}>
            {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) => setValues((current) => ({ ...current, [field.key]: event.target.value }))} 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 entregador' : '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: 'driver', label: 'Entregador' },
              { key: 'vehicle', label: 'Veiculo' },
              { key: 'region', label: 'Praca' },
              { key: 'earnings', label: 'Ganhos', align: 'right' },
              { key: 'rating', label: 'Nota', align: 'right' },
              { key: 'status', label: 'Status' },
            ]}
            rows={items.map((item) => ({
              id: item.id,
              cells: {
                driver: <div><p className="font-bold text-slate-900">{item.fullName}</p><p className="text-xs text-slate-500">{item.user.email ?? 'Sem email'}</p></div>,
                vehicle: `${item.vehicleModel ?? 'Sem veiculo'} • ${item.vehiclePlate ?? 'Sem placa'}`,
                region: 'Sao Paulo',
                earnings: <span className="font-semibold text-slate-900">{currency(item.wallet?.balance)}</span>,
                rating: <span className="font-semibold text-slate-900">{Number(item.rating ?? 5).toFixed(1)}</span>,
                status: { value: humanStatus(item.status), tone: statusTone(item.status), badge: true },
              },
            }))}
            pageLabel={loading ? 'Carregando entregadores...' : `Mostrando ${items.length} entregadores sincronizados`}
            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>
    </>
  );
}