"use client";

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

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

function getDetailPayload(s: Solicitud) {
  const rawData = s.data && typeof s.data === 'object' ? s.data : {};
  const normalized = s.normalized && typeof s.normalized === 'object' ? s.normalized : {};

  return {
    id: s.id,
    formId: s.formId ?? rawData.form_id ?? 'N/A',
    status: s.status,
    created_at: s.created_at,
    updated_at: s.updated_at ?? null,
    raw: rawData,
    normalizedFields: normalized.fields ?? {},
    mapped: normalized.mapped ?? {},
  };
}

function getFriendlyFields(s: Solicitud) {
  const mapped = s.normalized?.mapped ?? {};
  const rawData = s.data && typeof s.data === 'object' ? s.data : {};
  const formFields = Array.isArray(rawData.form_data?.fields)
    ? rawData.form_data.fields
    : Array.isArray(rawData.fields)
      ? rawData.fields
      : [];

  const readField = (key: string, fallback = '—') => {
    const match = formFields.find((field: any) => {
      const name = (field?.name || field?.field_name || field?.key || '').toString().toLowerCase();
      return name === key.toLowerCase();
    });

    if (match && match.value !== undefined && match.value !== null && match.value !== '') {
      return match.value;
    }

    const value = mapped[key];
    if (value !== undefined && value !== null && value !== '') return value;
    return fallback;
  };

  return [
    { label: 'Nombre del negocio', value: readField('nombre_negocio') },
    { label: 'Nombre de contacto', value: readField('nombre_contacto') },
    { label: 'Email', value: readField('email') },
    { label: 'Teléfono', value: readField('telefono') },
    { label: 'Dirección', value: readField('direccion') },
    { label: 'RIF', value: readField('rif') },
    { label: 'Categoría', value: readField('categoria') },
  ];
}

export default function SolicitudesPage() {
  const [items, setItems] = useState<Solicitud[]>([]);
  const [loading, setLoading] = useState(false);
  const [processing, setProcessing] = useState<string | null>(null);
  const [selectedSolicitud, setSelectedSolicitud] = useState<Solicitud | null>(null);

  const [page, setPage] = useState(1);
  const pageSize = 8;
  const [totalPages, setTotalPages] = useState(1);
  const [total, setTotal] = useState(0);
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [query, setQuery] = useState('');
  const [counts, setCounts] = useState<{ pending: number; approved: number; rejected: number; total: number }>({ pending: 0, approved: 0, rejected: 0, total: 0 });

  useEffect(() => {
    fetchList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, statusFilter]);

  useEffect(() => {
    const timer = setTimeout(() => {
      setPage(1);
      fetchList();
    }, 350);
    return () => clearTimeout(timer);
  }, [query]);

  async function fetchList() {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      params.set('page', String(page));
      params.set('pageSize', String(pageSize));
      if (statusFilter) params.set('status', statusFilter as string);
      if (query) params.set('q', query);

      const res = await fetch(`/api/solicitudes?${params.toString()}`);
      const json = await res.json();
      setItems(json.items || []);
      setTotal(json.total || 0);
      setTotalPages(json.totalPages || 1);
      setCounts(json.counts || { pending: 0, approved: 0, rejected: 0, total: 0 });
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  async function doAction(id: string, action: 'approve' | 'reject') {
    if (!confirm(`¿Confirmar ${action} de la solicitud ${id}?`)) return;
    setProcessing(id);
    try {
      const res = await fetch(`/api/solicitudes/${id}/action`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action }),
      });
      const json = await res.json();
      if (json.ok) {
        await fetchList();
        alert(`Solicitud ${action}ada correctamente`);
      } else {
        console.error(json);
        alert('Error: ' + (json.error || JSON.stringify(json)));
      }
    } catch (err) {
      console.error(err);
      alert('Error interno');
    } finally {
      setProcessing(null);
    }
  }

  return (
    <div className="mx-auto max-w-7xl space-y-6 p-4 sm:p-6 lg:p-8">
      <div 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">Revisión</p>
          <h1 className="mt-2 text-2xl font-bold text-slate-900">Solicitudes de aliados</h1>
          <p className="mt-1 text-sm text-slate-500">Revisa los registros entrantes y decide qué negocios activar.</p>
        </div>
        <Link href="/gestor" className="text-xs font-semibold text-slate-500 transition hover:text-blue-600">Volver al resumen</Link>
      </div>

      <div className="mb-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="flex items-center gap-4">
          <div className="text-sm text-slate-600">Pendientes: <span className="font-medium">{counts.pending}</span></div>
          <div className="text-sm text-slate-600">Total: <span className="font-medium">{counts.total}</span></div>
        </div>

        <div className="flex items-center gap-3">
          <select value={statusFilter} onChange={(e) => { setPage(1); setStatusFilter(e.target.value); }} className="rounded-md border p-2">
            <option value="">Todos</option>
            <option value="pending">Pendientes</option>
            <option value="approved">Aprobadas</option>
            <option value="rejected">Rechazadas</option>
          </select>

          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Buscar por nombre o email" className="rounded-md border p-2" />
          <button onClick={() => { setPage(1); fetchList(); }} className="rounded-md bg-blue-600 text-white px-3 py-2">Buscar</button>
          <button onClick={() => { setQuery(''); setStatusFilter(''); setPage(1); fetchList(); }} className="rounded-md border px-3 py-2">Limpiar</button>
        </div>
      </div>

      {loading ? (
        <p>Cargando...</p>
      ) : total === 0 ? (
        <p>No hay solicitudes registradas.</p>
      ) : (
        <>
          <div className="grid gap-4">
            {items.map((s) => (
              <div key={s.id} className="border rounded p-4 bg-white shadow-sm">
                <div className="flex justify-between gap-3">
                  <div className="min-w-0">
                    <div className="text-base font-semibold">{s.normalized?.mapped?.nombre_negocio || s.data?.form_data?.fields?.find((f:any)=>f.name==='nombre_negocio')?.value || s.data?.nombre_negocio || 'Sin nombre'}</div>
                    <div className="text-xs text-slate-500">{new Date(s.created_at).toLocaleString()}</div>
                  </div>
                  <div className="flex items-center gap-2 flex-wrap justify-end">
                    <span className={`px-2 py-1 rounded text-[10px] font-medium ${s.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : s.status === 'approved' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                      {s.status}
                    </span>
                    <button type="button" onClick={() => setSelectedSolicitud(s)} className="px-2.5 py-1 border border-slate-300 bg-white text-slate-700 rounded text-xs">Ver más</button>
                    <button disabled={processing === s.id} onClick={() => doAction(s.id, 'approve')} className="px-2.5 py-1 bg-green-600 text-white rounded text-xs disabled:opacity-60">Aprobar</button>
                    <button disabled={processing === s.id} onClick={() => doAction(s.id, 'reject')} className="px-2.5 py-1 bg-red-600 text-white rounded text-xs disabled:opacity-60">Rechazar</button>
                  </div>
                </div>

                <div className="mt-3 text-sm text-slate-700">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-1.5">
                    <div className="truncate"><strong>Email:</strong> {s.normalized?.mapped?.email || '—'}</div>
                    <div className="truncate"><strong>Teléfono:</strong> {s.normalized?.mapped?.telefono || '—'}</div>
                    <div className="md:col-span-2 truncate"><strong>Dirección:</strong> {s.normalized?.mapped?.direccion || '—'}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 flex items-center justify-between">
            <div className="text-sm text-slate-600">Mostrando página {page} de {totalPages} — {total} resultados</div>
            <div className="flex items-center gap-2">
              <button disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))} className="px-3 py-2 rounded-md border">Anterior</button>
              <button disabled={page >= totalPages} onClick={() => setPage((p) => Math.min(totalPages, p + 1))} className="px-3 py-2 rounded-md border">Siguiente</button>
            </div>
          </div>
        </>
      )}

      {selectedSolicitud && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/50 p-4"
          onClick={() => setSelectedSolicitud(null)}
        >
          <div
            className="w-full max-w-4xl max-h-[85vh] overflow-auto rounded-xl bg-white shadow-2xl"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b px-5 py-4">
              <div>
                <h2 className="text-xl font-semibold">Detalle de solicitud</h2>
              </div>
              <button
                type="button"
                onClick={() => setSelectedSolicitud(null)}
                className="rounded-full border border-slate-300 px-3 py-1 text-lg leading-none text-slate-600"
              >
                ×
              </button>
            </div>

            <div className="space-y-5 p-5">
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
                <h3 className="mb-3 font-semibold text-slate-800">Información del negocio</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-slate-700">
                  {getFriendlyFields(selectedSolicitud).map((field) => (
                    <div key={field.label} className="rounded-md border border-slate-200 bg-white p-3">
                      <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{field.label}</div>
                      <div className="mt-1 break-words">{String(field.value)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="flex items-center justify-end gap-3 border-t px-5 py-4">
              <button
                type="button"
                onClick={() => setSelectedSolicitud(null)}
                className="rounded-md border border-slate-300 px-4 py-2 text-sm text-slate-700"
              >
                Cerrar
              </button>
              <button
                type="button"
                disabled={processing === selectedSolicitud.id}
                onClick={() => {
                  setSelectedSolicitud(null);
                  void doAction(selectedSolicitud.id, 'approve');
                }}
                className="rounded-md bg-green-600 px-4 py-2 text-sm text-white disabled:opacity-60"
              >
                Aprobar
              </button>
              <button
                type="button"
                disabled={processing === selectedSolicitud.id}
                onClick={() => {
                  setSelectedSolicitud(null);
                  void doAction(selectedSolicitud.id, 'reject');
                }}
                className="rounded-md bg-red-600 px-4 py-2 text-sm text-white disabled:opacity-60"
              >
                Rechazar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}