'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';

type Solicitud = {
  id: string;
  data?: any;
  normalized?: { mapped?: Record<string, any> };
  status: 'pending' | 'approved' | 'rejected';
  created_at: string;
};

type Business = {
  id: number;
  name: string;
  businessName?: string;
  email?: string;
};

type Coupon = {
  id: number;
  title: string;
  category?: string;
  status?: string;
  price?: string | number;
};

type Counts = {
  pending: number;
  approved: number;
  rejected: number;
  total: number;
};

function getField(solicitud: Solicitud, key: string, fallback = 'Sin dato') {
  const mapped = solicitud.normalized?.mapped?.[key];
  if (mapped !== undefined && mapped !== null && mapped !== '') return String(mapped);

  const fields = Array.isArray(solicitud.data?.form_data?.fields) ? solicitud.data.form_data.fields : [];
  const field = fields.find((item: any) => item?.name === key || item?.field_name === key);
  return field?.value !== undefined && field?.value !== null && field?.value !== '' ? String(field.value) : fallback;
}

function formatDate(value: string) {
  return new Date(value).toLocaleDateString('es-ES', { day: '2-digit', month: 'short' });
}

export default function GestorDashboard() {
  const [pending, setPending] = useState<Solicitud[]>([]);
  const [counts, setCounts] = useState<Counts>({ pending: 0, approved: 0, rejected: 0, total: 0 });
  const [businesses, setBusinesses] = useState<Business[]>([]);
  const [coupons, setCoupons] = useState<Coupon[]>([]);
  const [loading, setLoading] = useState(true);
  const [processing, setProcessing] = useState<string | null>(null);
  const [error, setError] = useState('');

  async function loadDashboard() {
    setLoading(true);
    setError('');
    try {
      const [requestsResponse, businessesResponse, productsResponse] = await Promise.all([
        fetch('/api/solicitudes?page=1&pageSize=5&status=pending'),
        fetch('/api/gestor/businesses'),
        fetch('/api/gestor/products'),
      ]);

      const requests = await requestsResponse.json();
      const businessesData = await businessesResponse.json();
      const productsData = await productsResponse.json();

      if (!requestsResponse.ok) throw new Error(requests.error || 'No se pudieron cargar las solicitudes');
      if (!businessesResponse.ok) throw new Error(businessesData.error || 'No se pudieron cargar los negocios');
      if (!productsResponse.ok) throw new Error(productsData.error || 'No se pudieron cargar los cupones');

      setPending(requests.items || []);
      setCounts(requests.counts || { pending: 0, approved: 0, rejected: 0, total: 0 });
      setBusinesses(businessesData.businesses || []);
      setCoupons(productsData.coupons || []);
    } catch (loadError: any) {
      setError(loadError?.message || 'No se pudo cargar el dashboard');
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    loadDashboard();
  }, []);

  async function handleRequestAction(id: string, action: 'approve' | 'reject') {
    if (!window.confirm(`¿Confirmar ${action === 'approve' ? 'aprobación' : 'rechazo'} de esta solicitud?`)) return;

    setProcessing(id);
    try {
      const response = await fetch(`/api/solicitudes/${id}/action`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action }),
      });
      const result = await response.json();
      if (!response.ok || !result.ok) throw new Error(result.error || 'No se pudo actualizar la solicitud');
      await loadDashboard();
    } catch (actionError: any) {
      window.alert(actionError?.message || 'No se pudo actualizar la solicitud');
    } finally {
      setProcessing(null);
    }
  }

  if (loading) {
    return <main className="mx-auto max-w-7xl p-4 sm:p-6 lg:p-8"><p className="text-sm text-slate-500">Cargando resumen operativo...</p></main>;
  }

  return (
    <main className="mx-auto max-w-7xl space-y-6 p-4 sm:p-6 lg:p-8">
      <header className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-blue-600">Centro de mando</p>
          <h1 className="mt-2 text-2xl font-bold text-slate-900">Resumen operativo</h1>
          <p className="mt-1 text-sm text-slate-500">Revisa la actividad y resuelve lo importante desde aquí.</p>
        </div>
        <button type="button" onClick={loadDashboard} className="self-start rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:border-blue-300 hover:text-blue-600 sm:self-auto">Actualizar datos</button>
      </header>

      {error && <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</div>}

      <section className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <Link href="/gestor/solicitudes?status=pending" className="rounded-xl border border-amber-200 bg-amber-50/70 p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
          <p className="text-xs font-semibold uppercase tracking-wider text-amber-700">Solicitudes pendientes</p>
          <p className="mt-2 text-3xl font-bold text-amber-700">{counts.pending}</p>
          <p className="mt-1 text-xs text-amber-800/70">Requieren revisión</p>
        </Link>
        <Link href="/gestor/negocios" className="rounded-xl border border-sky-200 bg-sky-50/70 p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
          <p className="text-xs font-semibold uppercase tracking-wider text-sky-700">Aliados registrados</p>
          <p className="mt-2 text-3xl font-bold text-sky-700">{businesses.length}</p>
          <p className="mt-1 text-xs text-sky-800/70">Negocios activos</p>
        </Link>
        <Link href="/gestor/productos" className="rounded-xl border border-blue-200 bg-blue-50/70 p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
          <p className="text-xs font-semibold uppercase tracking-wider text-blue-700">Cupones publicados</p>
          <p className="mt-2 text-3xl font-bold text-blue-700">{coupons.length}</p>
          <p className="mt-1 text-xs text-blue-800/70">Ofertas visibles</p>
        </Link>
      </section>

      <section className="grid gap-6 xl:grid-cols-[minmax(0,1.65fr)_minmax(280px,1fr)]">
        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
          <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4">
            <div>
              <h2 className="text-sm font-bold text-slate-900">Solicitudes por revisar</h2>
              <p className="mt-1 text-xs text-slate-500">Las cinco más recientes pendientes.</p>
            </div>
            <Link href="/gestor/solicitudes" className="text-xs font-semibold text-blue-600 hover:text-blue-700">Ver todas</Link>
          </div>
          {pending.length === 0 ? (
            <div className="px-5 py-10 text-center text-sm text-slate-500">No hay solicitudes pendientes.</div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full min-w-[620px] text-left text-xs">
                <thead className="border-b border-slate-100 bg-slate-50 text-[10px] uppercase tracking-wider text-slate-500">
                  <tr><th className="px-5 py-3">Negocio</th><th className="px-5 py-3">Contacto</th><th className="px-5 py-3">Fecha</th><th className="px-5 py-3 text-right">Acciones</th></tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {pending.map((solicitud) => (
                    <tr key={solicitud.id} className="hover:bg-slate-50/70">
                      <td className="px-5 py-3 font-semibold text-slate-900">{getField(solicitud, 'nombre_negocio')}</td>
                      <td className="px-5 py-3 text-slate-600">{getField(solicitud, 'nombre_contacto')}<span className="block text-[10px] text-slate-400">{getField(solicitud, 'email')}</span></td>
                      <td className="px-5 py-3 whitespace-nowrap text-slate-500">{formatDate(solicitud.created_at)}</td>
                      <td className="px-5 py-3 text-right whitespace-nowrap"><button type="button" disabled={processing === solicitud.id} onClick={() => handleRequestAction(solicitud.id, 'approve')} className="mr-2 rounded-md bg-blue-600 px-2.5 py-1.5 text-[11px] font-semibold text-white disabled:opacity-50">Aprobar</button><button type="button" disabled={processing === solicitud.id} onClick={() => handleRequestAction(solicitud.id, 'reject')} className="rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-semibold text-slate-600 disabled:opacity-50">Rechazar</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
          <div className="flex items-center justify-between">
            <div><h2 className="text-sm font-bold text-slate-900">Actividad reciente</h2><p className="mt-1 text-xs text-slate-500">Últimos cupones creados.</p></div>
            <Link href="/gestor/productos" className="text-xs font-semibold text-blue-600 hover:text-blue-700">Ver catálogo</Link>
          </div>
          <div className="mt-4 divide-y divide-slate-100">
            {coupons.slice(0, 5).map((coupon) => (
              <div key={coupon.id} className="flex items-start justify-between gap-3 py-3 first:pt-0">
                <div className="min-w-0"><p className="truncate text-xs font-semibold text-slate-800">{coupon.title}</p><p className="mt-1 truncate text-[11px] text-slate-500">{coupon.category || 'Sin categoría'}</p></div>
                <span className="shrink-0 rounded-full bg-sky-50 px-2 py-1 text-[10px] font-semibold text-sky-700">Publicado</span>
              </div>
            ))}
            {coupons.length === 0 && <p className="py-6 text-center text-sm text-slate-500">Aún no hay cupones publicados.</p>}
          </div>
        </div>
      </section>

    </main>
  );
}