import React, { useState } from 'react';
import { getStandaloneFormHtml } from '../data/standaloneFormCode';
import { STANDALONE_PHP_CODE } from '../data/standalonePhpCode';
import { FormConfig, DEFAULT_FORM_CONFIG } from '../types';
import { Copy, Check, Code2, Server, Download, FileCode, Database } from 'lucide-react';

interface CodeViewerProps {
  config?: FormConfig;
}

export const CodeViewer: React.FC<CodeViewerProps> = ({ config = DEFAULT_FORM_CONFIG }) => {
  const [copied, setCopied] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'php' | 'html' | 'server'>('php');

  const generatedHtml = getStandaloneFormHtml(config);

  const serverCode = `// server.ts - Endpoint CAPI Sécurisé + Sauvegarde SQLite (Express + Node.js)
import express from 'express';
import crypto from 'crypto';
import { insertRawLead, getAllRawLeads } from './sqliteDb';

const app = express();
app.use(express.json());

// Normalisation & Hachage SHA-256 Meta
function hashMeta(val) {
  if (!val) return undefined;
  return crypto.createHash('sha256').update(val.trim().toLowerCase()).digest('hex');
}

function hashPhone(phone) {
  if (!phone) return undefined;
  const digits = phone.replace(/\\D/g, '');
  return crypto.createHash('sha256').update(digits).digest('hex');
}

app.post('/api/meta-capi', async (req, res) => {
  const { userData, assessmentData, trackingData, eventId } = req.body;

  const clientIp = req.headers['x-forwarded-for']?.split(',')[0].trim() || req.socket.remoteAddress;
  const userAgent = req.headers['user-agent'] || trackingData.userAgent;

  // 1. Sauvegarde SQLite des données brutes NON-HACHÉES
  try {
    await insertRawLead({
      event_id: eventId,
      created_at: new Date().toISOString(),
      first_name: userData.firstName || '',
      last_name: userData.lastName || '',
      email: userData.email || '',
      phone: userData.phone || '',
      goal: assessmentData.goal || '',
      blocker: assessmentData.blocker || '',
      current_level: assessmentData.currentLevel || '',
      fbclid: trackingData.fbclid || '',
      fbc: trackingData.fbc || '',
      fbp: trackingData.fbp || '',
      utm_source: trackingData.utm_source || '',
      utm_medium: trackingData.utm_medium || '',
      utm_campaign: trackingData.utm_campaign || '',
      utm_content: trackingData.utm_content || '',
      utm_term: trackingData.utm_term || '',
      ip_address: clientIp,
      user_agent: userAgent,
      page_url: trackingData.pageUrl || '',
      emq_score: 9.0,
      raw_json: JSON.stringify(req.body)
    });
  } catch (err) {
    console.error('Erreur insertion SQLite:', err);
  }

  // 2. Formatage du payload officiel Meta Conversions API v19.0
  const payload = {
    data: [{
      event_name: 'Lead',
      event_time: Math.floor(Date.now() / 1000),
      event_id: eventId, // Assure la déduplication parfaite avec le Pixel navigateur
      event_source_url: trackingData.pageUrl || 'https://votre-site.com',
      action_source: 'website',
      user_data: {
        em: [hashMeta(userData.email)],
        ph: userData.phone ? [hashPhone(userData.phone)] : undefined,
        fn: [hashMeta(userData.firstName)],
        ln: [hashMeta(userData.lastName)],
        client_ip_address: clientIp,
        client_user_agent: userAgent,
        fbc: trackingData.fbc || undefined,
        fbp: trackingData.fbp || undefined
      },
      custom_data: {
        content_name: 'Test Anglais Gratuit',
        ...assessmentData,
        fbclid: trackingData.fbclid,
        utm_source: trackingData.utm_source,
        utm_campaign: trackingData.utm_campaign
      }
    }]
  };

  const pixelId = process.env.META_PIXEL_ID;
  const token = process.env.META_CAPI_ACCESS_TOKEN;

  if (pixelId && token) {
    const metaRes = await fetch(
      \`https://graph.facebook.com/v19.0/\${pixelId}/events?access_token=\${token}\`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      }
    );
    const result = await metaRes.json();
    return res.json({ success: true, result });
  }

  return res.json({ success: true, simulated: true, payload });
});

app.listen(3000, () => console.log('Serveur CAPI & SQLite prêt'));`;

  const getActiveCode = () => {
    switch (activeTab) {
      case 'php':
        return STANDALONE_PHP_CODE;
      case 'html':
        return generatedHtml;
      case 'server':
        return serverCode;
    }
  };

  const handleCopy = () => {
    const content = getActiveCode();
    navigator.clipboard.writeText(content);
    setCopied(activeTab);
    setTimeout(() => setCopied(null), 2000);
  };

  const handleDownload = () => {
    let filename = 'form-anglais-meta-capi.html';
    let mime = 'text/html';
    let content = generatedHtml;

    if (activeTab === 'php') {
      filename = 'capi.php';
      mime = 'application/x-httpd-php';
      content = STANDALONE_PHP_CODE;
    } else if (activeTab === 'server') {
      filename = 'server.ts';
      mime = 'text/typescript';
      content = serverCode;
    }

    const blob = new Blob([content], { type: mime });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl text-xs">
      <div className="px-4 py-3 bg-slate-950 border-b border-slate-800 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-1.5 flex-wrap">
          <button
            type="button"
            onClick={() => setActiveTab('php')}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
              activeTab === 'php'
                ? 'bg-indigo-600 text-white shadow-sm'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <FileCode className="w-3.5 h-3.5" />
            <span>Backend PHP (capi.php + SQLite)</span>
            <span className="text-[10px] bg-indigo-950 text-indigo-300 px-1.5 py-0.2 rounded border border-indigo-700/50 ml-1">
              Production
            </span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('html')}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
              activeTab === 'html'
                ? 'bg-indigo-600 text-white shadow-sm'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Code2 className="w-3.5 h-3.5" />
            <span>Frontend HTML + jQuery (Dynamique)</span>
          </button>

          <button
            type="button"
            onClick={() => setActiveTab('server')}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
              activeTab === 'server'
                ? 'bg-indigo-600 text-white shadow-sm'
                : 'text-slate-400 hover:text-white hover:bg-slate-800'
            }`}
          >
            <Server className="w-3.5 h-3.5" />
            <span>Node / Express (Alternative)</span>
          </button>
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={handleDownload}
            className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-slate-700 text-slate-300 hover:bg-slate-800 hover:text-white transition cursor-pointer"
            title={`Télécharger ${activeTab === 'php' ? 'capi.php' : activeTab === 'html' ? 'index.html' : 'server.ts'}`}
          >
            <Download className="w-3.5 h-3.5" />
            <span className="text-[11px]">
              Télécharger {activeTab === 'php' ? '.php' : activeTab === 'html' ? '.html' : '.ts'}
            </span>
          </button>

          <button
            type="button"
            onClick={handleCopy}
            className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-white transition font-medium cursor-pointer"
          >
            {copied === activeTab ? (
              <>
                <Check className="w-3.5 h-3.5 text-emerald-400" />
                <span className="text-emerald-400 text-[11px]">Copié !</span>
              </>
            ) : (
              <>
                <Copy className="w-3.5 h-3.5" />
                <span className="text-[11px]">Copier le code</span>
              </>
            )}
          </button>
        </div>
      </div>

      {activeTab === 'php' && (
        <div className="px-4 py-2 bg-indigo-950/40 border-b border-indigo-900/40 text-[11px] text-indigo-300 flex flex-wrap items-center justify-between gap-2">
          <span className="flex items-center gap-1.5">
            <Database className="w-3 h-3 text-amber-400" />
            <span>Sauvegarde automatique native dans <strong>leads.sqlite</strong> (données non-hachées + fbclid, _fbc, _fbp, IP, UTMs)</span>
          </span>
          <span className="font-mono text-[10px] text-indigo-400">cURL Meta Graph API v19.0 + PDO SQLite</span>
        </div>
      )}

      {activeTab === 'html' && (
        <div className="px-4 py-2 bg-slate-950 border-b border-slate-800/80 text-[11px] text-slate-400 flex flex-wrap items-center justify-between gap-2">
          <span>
            Généré avec votre configuration actuelle : <strong>{config.businessName}</strong> &bull;{' '}
            {(config.enableQuestion1 ? 1 : 0) + (config.enableQuestion2 ? 1 : 0) + 1} étapes actives
          </span>
          <span className="text-indigo-400">Prêt à copier/coller dans WordPress, Webflow ou HTML pur</span>
        </div>
      )}

      <div className="p-4 bg-slate-950 font-mono text-[11px] leading-relaxed max-h-[480px] overflow-y-auto text-slate-300">
        <pre className="whitespace-pre">
          {getActiveCode()}
        </pre>
      </div>
    </div>
  );
};