import React, { useState } from 'react';
import { MetaTrackingData, CAPIEventRecord } from '../types';
import { Activity, ShieldAlert, CheckCircle2, RefreshCw, Send, Terminal, Link, ChevronDown, ChevronUp } from 'lucide-react';

interface MetaInspectorProps {
  currentMetaVars: MetaTrackingData;
  recentEvents: CAPIEventRecord[];
  onApplyUrlPreset: (preset: { fbclid: string; utm_source: string; utm_campaign: string }) => void;
  onRefreshEvents: () => void;
}

export const MetaInspector: React.FC<MetaInspectorProps> = ({
  currentMetaVars,
  recentEvents,
  onApplyUrlPreset,
  onRefreshEvents,
}) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const [selectedEvent, setSelectedEvent] = useState<CAPIEventRecord | null>(null);

  const presets = [
    {
      label: 'Meta Ad (Mobile Feed)',
      fbclid: 'IwAR0x_MetaAd_Click_987654321',
      utm_source: 'meta',
      utm_campaign: 'neuro_english_mobile_v1',
    },
    {
      label: 'LinkedIn Sponsored (Mobile)',
      fbclid: 'li_sync_click_456789123',
      utm_source: 'linkedin',
      utm_campaign: 'b2b_english_executive',
    },
    {
      label: 'Instagram Story Ad',
      fbclid: 'IwAR1z_InstaStory_Click_771892',
      utm_source: 'instagram',
      utm_campaign: 'speaking_fluency_story',
    },
  ];

  return (
    <div className="w-full bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl text-xs">
      {/* Header bar */}
      <div className="px-4 py-3 bg-slate-950 border-b border-slate-800 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Activity className="w-4 h-4 text-indigo-400" />
          <span className="font-semibold text-white">Console CAPI & Variables Meta</span>
          <span className="bg-indigo-950 text-indigo-400 border border-indigo-800/60 px-2 py-0.5 rounded-full text-[10px] font-mono">
            {recentEvents.length} événement(s)
          </span>
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={onRefreshEvents}
            title="Rafraîchir les logs"
            className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
          >
            <RefreshCw className="w-3.5 h-3.5" />
          </button>
          <button
            type="button"
            onClick={() => setIsExpanded(!isExpanded)}
            className="flex items-center gap-1 text-slate-400 hover:text-white transition"
          >
            <span className="text-[11px]">{isExpanded ? 'Réduire' : 'Développer'}</span>
            {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
          </button>
        </div>
      </div>

      {/* Primary Variable Badges (Always visible) */}
      <div className="p-3.5 grid grid-cols-2 sm:grid-cols-4 gap-2 bg-slate-900/80">
        <div className="bg-slate-950 border border-slate-800/80 p-2.5 rounded-xl">
          <div className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-0.5">fbclid</div>
          <div className="font-mono text-slate-200 truncate" title={currentMetaVars.fbclid || 'Non présent'}>
            {currentMetaVars.fbclid ? `${currentMetaVars.fbclid.slice(0, 14)}...` : '—'}
          </div>
        </div>

        <div className="bg-slate-950 border border-slate-800/80 p-2.5 rounded-xl">
          <div className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-0.5">_fbc (Cookie)</div>
          <div className="font-mono text-slate-200 truncate" title={currentMetaVars.fbc || 'Non généré'}>
            {currentMetaVars.fbc ? `${currentMetaVars.fbc.slice(0, 16)}...` : 'Auto-format'}
          </div>
        </div>

        <div className="bg-slate-950 border border-slate-800/80 p-2.5 rounded-xl">
          <div className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-0.5">_fbp (Browser)</div>
          <div className="font-mono text-slate-200 truncate" title={currentMetaVars.fbp || 'Généré'}>
            {currentMetaVars.fbp ? `${currentMetaVars.fbp.slice(0, 16)}...` : 'Actif'}
          </div>
        </div>

        <div className="bg-slate-950 border border-slate-800/80 p-2.5 rounded-xl">
          <div className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-0.5">UTM Source</div>
          <div className="font-mono text-indigo-400 truncate">
            {currentMetaVars.utm_source || 'meta_ads'}
          </div>
        </div>
      </div>

      {/* Expanded diagnostic view */}
      {isExpanded && (
        <div className="border-t border-slate-800 p-4 space-y-4 animate-in fade-in duration-150">
          {/* URL Simulator */}
          <div>
            <div className="text-[11px] font-semibold text-slate-400 mb-2 flex items-center gap-1.5">
              <Link className="w-3.5 h-3.5 text-indigo-400" />
              <span>Simuler une redirection publicitaire (Meta / LinkedIn)</span>
            </div>
            <div className="flex flex-wrap gap-2">
              {presets.map((preset, idx) => (
                <button
                  key={idx}
                  type="button"
                  onClick={() => onApplyUrlPreset(preset)}
                  className="py-1.5 px-3 rounded-lg border border-slate-800 bg-slate-950 hover:border-indigo-500 hover:text-white text-slate-300 transition text-[11px] font-medium active:scale-95"
                >
                  {preset.label}
                </button>
              ))}
            </div>
          </div>

          {/* Recent CAPI Dispatch Events */}
          <div>
            <div className="text-[11px] font-semibold text-slate-400 mb-2 flex items-center gap-1.5">
              <Terminal className="w-3.5 h-3.5 text-emerald-400" />
              <span>Flux temps réel des envois CAPI (Backend SHA-256)</span>
            </div>

            {recentEvents.length === 0 ? (
              <div className="bg-slate-950 border border-slate-800/80 rounded-xl p-4 text-center text-slate-500">
                Soumettez le formulaire mobile ci-dessus pour observer le déclenchement CAPI en temps réel.
              </div>
            ) : (
              <div className="space-y-2">
                {recentEvents.slice(0, 3).map((ev) => (
                  <div
                    key={ev.id}
                    onClick={() => setSelectedEvent(ev)}
                    className="p-3 bg-slate-950 border border-slate-800/80 rounded-xl cursor-pointer hover:border-slate-700 transition"
                  >
                    <div className="flex items-center justify-between mb-1.5">
                      <div className="flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-emerald-400" />
                        <span className="font-semibold text-white">{ev.eventName}</span>
                        <span className="text-slate-500 font-mono text-[10px]">{ev.timestamp}</span>
                      </div>
                      <span className="text-amber-400 font-mono font-medium">
                        EMQ {ev.eventMatchQuality}/10
                      </span>
                    </div>

                    <div className="text-[11px] text-slate-400 font-mono truncate">
                      ID: {ev.eventId} &bull; Chiffrés: {ev.matchedParameters.join(', ')}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Event Details Inspector Modal */}
          {selectedEvent && (
            <div className="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px]">
              <div className="flex items-center justify-between text-slate-400 border-b border-slate-800/80 pb-1.5 mb-2">
                <span>Détail Payload CAPI transmis à Meta :</span>
                <button
                  type="button"
                  onClick={() => setSelectedEvent(null)}
                  className="text-slate-400 hover:text-white"
                >
                  Fermer
                </button>
              </div>
              <pre className="text-slate-300 max-h-48 overflow-y-auto whitespace-pre-wrap">
                {JSON.stringify(selectedEvent.rawPayload, null, 2)}
              </pre>
            </div>
          )}
        </div>
      )}
    </div>
  );
};