import React, { useState, useEffect } from 'react';
import { RawLeadRecord } from '../types';
import { Database, Download, FileSpreadsheet, RefreshCw, Trash2, Search, ExternalLink, ShieldAlert, CheckCircle2 } from 'lucide-react';

interface SqliteLeadsViewerProps {
  onRefreshTrigger?: () => void;
}

export const SqliteLeadsViewer: React.FC<SqliteLeadsViewerProps> = ({ onRefreshTrigger }) => {
  const [leads, setLeads] = useState<RawLeadRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [selectedLead, setSelectedLead] = useState<RawLeadRecord | null>(null);
  const [isDeleting, setIsDeleting] = useState<boolean>(false);

  const fetchLeads = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/leads');
      if (res.ok) {
        const data = await res.json();
        setLeads(data.leads || []);
      }
    } catch (e) {
      console.warn('Leads fetch error:', e);
    } finally {
      setLoading(false);
    }
  };

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

  const handleClear = async () => {
    if (!window.confirm('Voulez-vous vraiment vider toutes les entrées de la base SQLite ?')) return;
    setIsDeleting(true);
    try {
      await fetch('/api/leads', { method: 'DELETE' });
      await fetchLeads();
      if (onRefreshTrigger) onRefreshTrigger();
    } catch (e) {
      console.warn(e);
    } finally {
      setIsDeleting(false);
    }
  };

  const filteredLeads = leads.filter((l) => {
    const term = searchTerm.toLowerCase();
    return (
      (l.first_name || '').toLowerCase().includes(term) ||
      (l.last_name || '').toLowerCase().includes(term) ||
      (l.email || '').toLowerCase().includes(term) ||
      (l.phone || '').toLowerCase().includes(term) ||
      (l.event_id || '').toLowerCase().includes(term) ||
      (l.fbclid || '').toLowerCase().includes(term) ||
      (l.utm_source || '').toLowerCase().includes(term)
    );
  });

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl text-xs">
      {/* Header */}
      <div className="p-4 bg-slate-950 border-b border-slate-800 flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center">
            <Database className="w-4 h-4" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="font-bold text-white text-sm">Base SQLite &bull; Données Brutes (Unhashed)</h3>
              <span className="text-[10px] bg-slate-800 text-slate-300 px-2 py-0.5 rounded-full font-mono">
                leads.sqlite
              </span>
            </div>
            <p className="text-slate-400 text-[11px]">
              Stockage complet des coordonnées en clair avec tous les paramètres de tracking Meta (clickID, fbc, fbp, IP, UTMs).
            </p>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-2 flex-wrap">
          <button
            type="button"
            onClick={fetchLeads}
            disabled={loading}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-700 bg-slate-800 hover:bg-slate-700 text-slate-200 transition"
          >
            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
            <span>Actualiser</span>
          </button>

          <a
            href="/api/leads/download-sqlite"
            download="leads.sqlite"
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition shadow-sm"
          >
            <Download className="w-3.5 h-3.5" />
            <span>Télécharger .sqlite</span>
          </a>

          <a
            href="/api/leads/export-csv"
            download="leads_export.csv"
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-700 bg-slate-800 hover:bg-slate-700 text-slate-200 transition"
          >
            <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-400" />
            <span>Export CSV</span>
          </a>

          {leads.length > 0 && (
            <button
              type="button"
              onClick={handleClear}
              disabled={isDeleting}
              className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-rose-900/60 bg-rose-950/40 text-rose-300 hover:bg-rose-900/40 transition"
              title="Vider la table SQLite"
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>
          )}
        </div>
      </div>

      {/* Overview Stats Bar */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 p-3 bg-slate-950/60 border-b border-slate-800/80 text-[11px]">
        <div className="bg-slate-900/80 p-2.5 rounded-xl border border-slate-800">
          <span className="text-slate-400 block text-[10px] uppercase font-semibold">Total Leads SQLite</span>
          <span className="text-base font-bold text-white font-mono">{leads.length}</span>
        </div>
        <div className="bg-slate-900/80 p-2.5 rounded-xl border border-slate-800">
          <span className="text-slate-400 block text-[10px] uppercase font-semibold">Avec Meta Click ID</span>
          <span className="text-base font-bold text-indigo-400 font-mono">
            {leads.filter(l => Boolean(l.fbclid || l.fbc)).length} / {leads.length}
          </span>
        </div>
        <div className="bg-slate-900/80 p-2.5 rounded-xl border border-slate-800">
          <span className="text-slate-400 block text-[10px] uppercase font-semibold">Score EMQ Moyen</span>
          <span className="text-base font-bold text-emerald-400 font-mono">
            {leads.length > 0
              ? (leads.reduce((acc, l) => acc + (l.emq_score || 0), 0) / leads.length).toFixed(1)
              : '0.0'}{' '}
            / 10
          </span>
        </div>
        <div className="bg-slate-900/80 p-2.5 rounded-xl border border-slate-800">
          <span className="text-slate-400 block text-[10px] uppercase font-semibold">Fichier Base</span>
          <span className="text-slate-300 font-mono text-xs block truncate mt-0.5">./leads.sqlite</span>
        </div>
      </div>

      {/* Search Input */}
      <div className="p-3 border-b border-slate-800 bg-slate-900/40">
        <div className="relative max-w-sm">
          <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            placeholder="Rechercher par email, prénom, clickID, UTM..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-9 pr-3 py-1.5 text-xs text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
          />
        </div>
      </div>

      {/* Leads Table */}
      <div className="overflow-x-auto max-h-[380px]">
        {loading ? (
          <div className="p-8 text-center text-slate-400">Chargement de la base SQLite...</div>
        ) : filteredLeads.length === 0 ? (
          <div className="p-8 text-center text-slate-500">
            {searchTerm ? 'Aucun prospect ne correspond à votre recherche.' : 'Aucun lead enregistré pour le moment dans leads.sqlite. Remplissez le formulaire de test pour insérer votre premier enregistrement.'}
          </div>
        ) : (
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="border-b border-slate-800 bg-slate-950/80 text-[10px] uppercase font-semibold text-slate-400">
                <th className="p-3">#</th>
                <th className="p-3">Date</th>
                <th className="p-3">Contact (En clair)</th>
                <th className="p-3">Diagnostic Anglais</th>
                <th className="p-3">Meta Click ID (_fbc)</th>
                <th className="p-3">Browser ID (_fbp)</th>
                <th className="p-3">UTM Source</th>
                <th className="p-3 text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/60 font-sans">
              {filteredLeads.map((lead) => (
                <tr key={lead.id} className="hover:bg-slate-800/40 transition">
                  <td className="p-3 font-mono text-slate-400 font-semibold">{lead.id}</td>
                  <td className="p-3 text-slate-400 whitespace-nowrap text-[11px]">
                    {new Date(lead.created_at).toLocaleString('fr-FR', {
                      day: '2-digit',
                      month: '2-digit',
                      hour: '2-digit',
                      minute: '2-digit',
                    })}
                  </td>
                  <td className="p-3">
                    <div className="font-semibold text-white">
                      {lead.first_name} {lead.last_name}
                    </div>
                    <div className="text-slate-400 font-mono text-[11px]">{lead.email}</div>
                    {lead.phone && (
                      <div className="text-slate-400 font-mono text-[10px]">{lead.phone}</div>
                    )}
                  </td>
                  <td className="p-3 text-slate-300">
                    <div className="text-[11px] font-medium text-indigo-300">{lead.goal || '-'}</div>
                    <div className="text-[10px] text-slate-400">{lead.blocker || '-'} &bull; {lead.current_level || '-'}</div>
                  </td>
                  <td className="p-3 font-mono text-[11px]">
                    {lead.fbclid ? (
                      <span className="text-indigo-400 font-semibold truncate block max-w-[120px]" title={lead.fbclid}>
                        {lead.fbclid}
                      </span>
                    ) : lead.fbc ? (
                      <span className="text-indigo-400 truncate block max-w-[120px]" title={lead.fbc}>
                        {lead.fbc}
                      </span>
                    ) : (
                      <span className="text-slate-600">Aucun</span>
                    )}
                  </td>
                  <td className="p-3 font-mono text-[11px] text-slate-400">
                    <span className="truncate block max-w-[110px]" title={lead.fbp}>
                      {lead.fbp || '-'}
                    </span>
                  </td>
                  <td className="p-3">
                    {lead.utm_source ? (
                      <span className="bg-slate-800 text-slate-200 border border-slate-700 px-2 py-0.5 rounded text-[10px] font-mono">
                        {lead.utm_source}
                      </span>
                    ) : (
                      <span className="text-slate-600">-</span>
                    )}
                  </td>
                  <td className="p-3 text-right whitespace-nowrap">
                    <button
                      type="button"
                      onClick={() => setSelectedLead(lead)}
                      className="px-2.5 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-200 hover:text-white transition text-[11px] font-medium"
                    >
                      Détails
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Detail Modal */}
      {selectedLead && (
        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-slate-800 rounded-2xl max-w-lg w-full p-5 shadow-2xl space-y-4 max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-150">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <div>
                <h4 className="font-bold text-white text-base">
                  Détail Lead #{selectedLead.id} &bull; {selectedLead.first_name} {selectedLead.last_name}
                </h4>
                <p className="text-slate-400 text-xs font-mono">{selectedLead.event_id}</p>
              </div>
              <button
                type="button"
                onClick={() => setSelectedLead(null)}
                className="w-7 h-7 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white flex items-center justify-center"
              >
                &times;
              </button>
            </div>

            <div className="grid grid-cols-2 gap-3 text-xs">
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Email Brut</span>
                <span className="text-white font-mono">{selectedLead.email}</span>
              </div>
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Téléphone Brut</span>
                <span className="text-white font-mono">{selectedLead.phone || 'Non renseigné'}</span>
              </div>
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Objectif</span>
                <span className="text-white">{selectedLead.goal}</span>
              </div>
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Frein</span>
                <span className="text-white">{selectedLead.blocker}</span>
              </div>
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Niveau</span>
                <span className="text-white">{selectedLead.current_level}</span>
              </div>
              <div className="bg-slate-950 p-3 rounded-xl border border-slate-800">
                <span className="text-slate-400 block text-[10px] uppercase font-semibold">Score EMQ</span>
                <span className="text-emerald-400 font-bold">{selectedLead.emq_score} / 10</span>
              </div>
            </div>

            <div className="space-y-2 bg-slate-950 p-3.5 rounded-xl border border-slate-800 text-[11px] font-mono">
              <div className="text-slate-400 uppercase text-[10px] font-semibold border-b border-slate-900 pb-1">
                Paramètres de Tracking Meta &bull; Stockés en SQLite
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">fbclid :</span>
                <span className="text-indigo-400 truncate max-w-[260px]">{selectedLead.fbclid || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">_fbc :</span>
                <span className="text-slate-300 truncate max-w-[260px]">{selectedLead.fbc || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">_fbp :</span>
                <span className="text-slate-300 truncate max-w-[260px]">{selectedLead.fbp || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">utm_source :</span>
                <span className="text-amber-400">{selectedLead.utm_source || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">utm_campaign :</span>
                <span className="text-slate-300">{selectedLead.utm_campaign || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">IP Client :</span>
                <span className="text-slate-300">{selectedLead.ip_address || 'null'}</span>
              </div>
              <div className="flex justify-between py-0.5">
                <span className="text-slate-500">User Agent :</span>
                <span className="text-slate-400 truncate max-w-[260px]">{selectedLead.user_agent || 'null'}</span>
              </div>
            </div>

            <div className="flex justify-end pt-2">
              <button
                type="button"
                onClick={() => setSelectedLead(null)}
                className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold"
              >
                Fermer
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};