/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect, useRef } from "react";
import QRCode from "qrcode";
import { Employee } from "../types";
import { 
  QrCode, 
  Printer, 
  Download, 
  X, 
  ShieldCheck, 
  Copy, 
  Check, 
  RefreshCw, 
  Building2, 
  User, 
  Sparkles,
  ExternalLink,
  CreditCard,
  Layers,
  Smartphone
} from "lucide-react";

interface DigitalIdCardModalProps {
  employee: Employee;
  isOpen: boolean;
  onClose: () => void;
}

export function DigitalIdCardModal({ employee, isOpen, onClose }: DigitalIdCardModalProps) {
  const [qrFormat, setQrFormat] = useState<"url" | "vcard" | "json">("url");
  const [cardTheme, setCardTheme] = useState<"dark" | "navy" | "gold" | "light">("dark");
  const [qrDataUrl, setQrDataUrl] = useState<string>("");
  const [isCopied, setIsCopied] = useState<boolean>(false);
  const [activeSide, setActiveSide] = useState<"front" | "back">("front");
  const cardRef = useRef<HTMLDivElement>(null);

  // Verification Hash / Serial
  const issueYear = employee.tmtKerja ? employee.tmtKerja.substring(0, 4) : "2024";
  const securityHash = React.useMemo(() => {
    return `EMS-ID-${employee.nip}-${employee.id.substring(0, 6).toUpperCase()}-VERIFIED`;
  }, [employee]);

  // Construct QR Payload text
  const rawQrPayload = React.useMemo(() => {
    if (qrFormat === "url") {
      return `https://ems.median.co.id/verify-id?nip=${encodeURIComponent(employee.nip)}&hash=${encodeURIComponent(securityHash)}`;
    } else if (qrFormat === "vcard") {
      return `BEGIN:VCARD
VERSION:3.0
N:${employee.name};;;
FN:${employee.name}
ORG:PT MEDIAN ENTERPRISE DATA
TITLE:${employee.position}
TEL;TYPE=CELL:${employee.phone || ''}
EMAIL:${employee.email || ''}
NOTE:NIP: ${employee.nip} | Divisi: ${employee.division} | Status: ${employee.status}
END:VCARD`;
    } else {
      return JSON.stringify({
        company: "PT MEDIAN ENTERPRISE DATA",
        nip: employee.nip,
        nik: employee.nik,
        name: employee.name,
        position: employee.position,
        division: employee.division,
        status: employee.status,
        securityHash: securityHash
      }, null, 2);
    }
  }, [employee, qrFormat, securityHash]);

  // Generate QR Data URL whenever payload or theme changes
  useEffect(() => {
    if (!isOpen) return;

    let darkColor = "#0f172a";
    let lightColor = "#ffffff";

    if (cardTheme === "dark") {
      darkColor = "#facc15";
      lightColor = "#0a0a0a";
    } else if (cardTheme === "navy") {
      darkColor = "#38bdf8";
      lightColor = "#030712";
    } else if (cardTheme === "gold") {
      darkColor = "#d97706";
      lightColor = "#fffbeb";
    } else {
      darkColor = "#0f172a";
      lightColor = "#ffffff";
    }

    QRCode.toDataURL(rawQrPayload, {
      width: 400,
      margin: 1.5,
      color: {
        dark: darkColor,
        light: lightColor
      },
      errorCorrectionLevel: "H"
    })
      .then(url => setQrDataUrl(url))
      .catch(err => console.error("Error generating QR code:", err));
  }, [rawQrPayload, cardTheme, isOpen]);

  if (!isOpen) return null;

  const handleCopyPayload = () => {
    navigator.clipboard.writeText(rawQrPayload);
    setIsCopied(true);
    setTimeout(() => setIsCopied(false), 2500);
  };

  const handleDownloadQr = () => {
    if (!qrDataUrl) return;
    const a = document.createElement("a");
    a.href = qrDataUrl;
    a.download = `QR_Code_${employee.nip}_${employee.name.replace(/\s+/g, "_")}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  const handlePrintCard = () => {
    window.print();
  };

  // Color styles based on theme
  const themeStyles = {
    dark: {
      cardBg: "bg-gradient-to-br from-[#0c0c0c] via-[#121212] to-[#050505] border-2 border-[#facc15]/50 text-white",
      headerBg: "bg-gradient-to-r from-[#facc15]/20 via-[#111] to-[#facc15]/10 border-b border-[#facc15]/30",
      accentText: "text-[#facc15]",
      badgeBg: "bg-[#facc15] text-black font-black",
      secBadge: "bg-amber-500/10 text-amber-300 border-amber-500/30"
    },
    navy: {
      cardBg: "bg-gradient-to-br from-[#030712] via-[#0f172a] to-[#020617] border-2 border-sky-500/50 text-white",
      headerBg: "bg-gradient-to-r from-sky-500/20 via-[#0f172a] to-sky-500/10 border-b border-sky-500/30",
      accentText: "text-sky-400",
      badgeBg: "bg-sky-500 text-slate-950 font-black",
      secBadge: "bg-sky-500/10 text-sky-300 border-sky-500/30"
    },
    gold: {
      cardBg: "bg-gradient-to-br from-[#1c1917] via-[#292524] to-[#1c1917] border-2 border-amber-500/60 text-amber-100",
      headerBg: "bg-gradient-to-r from-amber-500/20 via-[#292524] to-amber-500/10 border-b border-amber-500/40",
      accentText: "text-amber-400",
      badgeBg: "bg-amber-500 text-slate-950 font-black",
      secBadge: "bg-amber-500/20 text-amber-300 border-amber-500/40"
    },
    light: {
      cardBg: "bg-gradient-to-br from-slate-50 via-white to-slate-100 border-2 border-slate-300 text-slate-900 shadow-2xl",
      headerBg: "bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white border-b border-slate-700",
      accentText: "text-blue-700",
      badgeBg: "bg-slate-900 text-white font-black",
      secBadge: "bg-slate-200 text-slate-800 border-slate-300"
    }
  }[cardTheme];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md overflow-y-auto animate-fadeIn font-mono">
      {/* Print Styles CSS injected for perfect CR80 ID Card dimensions when printed */}
      <style>{`
        @media print {
          body * {
            visibility: hidden !important;
          }
          #printable-id-card-sheet, #printable-id-card-sheet * {
            visibility: visible !important;
          }
          #printable-id-card-sheet {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            padding: 20px !important;
            background: white !important;
            color: black !important;
          }
          .no-print {
            display: none !important;
          }
        }
      `}</style>

      {/* Main Modal Container */}
      <div className="bg-[#0a0a0a] border border-[#262626] rounded-xl w-full max-w-4xl max-h-[92vh] overflow-y-auto shadow-2xl space-y-6 p-6 text-slate-200 relative">
        
        {/* Header Modal */}
        <div className="flex items-center justify-between border-b border-[#222] pb-4">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-[#facc15]/10 border border-[#facc15]/30 text-[#facc15] rounded-lg">
              <QrCode className="w-6 h-6 animate-pulse" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="text-[10px] font-black uppercase px-2 py-0.5 bg-[#facc15] text-black rounded font-mono">
                  DIGITAL ID CARD GENERATOR
                </span>
                <span className="text-[10px] font-bold text-slate-400 font-mono">
                  NIP: {employee.nip}
                </span>
              </div>
              <h3 className="text-lg font-black text-white uppercase tracking-tight mt-1">
                Kartu ID Digital & Generator QR Code Pegawai
              </h3>
            </div>
          </div>

          <button
            type="button"
            onClick={onClose}
            className="p-2 text-slate-400 hover:text-white bg-[#141414] hover:bg-[#222] border border-[#333] rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Customization Bar */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 bg-[#050505] p-3.5 rounded-lg border border-[#222] text-xs">
          {/* Card Theme Picker */}
          <div>
            <label className="text-[10px] font-black uppercase text-slate-400 block mb-1.5">
              🎨 Tema Visual ID Card
            </label>
            <div className="grid grid-cols-4 gap-1.5 font-bold">
              <button
                type="button"
                onClick={() => setCardTheme("dark")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  cardTheme === "dark" ? "bg-[#facc15] text-black border-[#facc15] font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                Executive
              </button>
              <button
                type="button"
                onClick={() => setCardTheme("navy")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  cardTheme === "navy" ? "bg-sky-500 text-slate-950 border-sky-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                Navy
              </button>
              <button
                type="button"
                onClick={() => setCardTheme("gold")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  cardTheme === "gold" ? "bg-amber-600 text-amber-950 border-amber-500 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                Luxury
              </button>
              <button
                type="button"
                onClick={() => setCardTheme("light")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  cardTheme === "light" ? "bg-slate-200 text-slate-900 border-slate-300 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                Light
              </button>
            </div>
          </div>

          {/* QR Code Payload Format */}
          <div>
            <label className="text-[10px] font-black uppercase text-slate-400 block mb-1.5">
              🔗 Format QR Code Data
            </label>
            <div className="grid grid-cols-3 gap-1.5 font-bold">
              <button
                type="button"
                onClick={() => setQrFormat("url")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  qrFormat === "url" ? "bg-emerald-500 text-black border-emerald-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
                title="URL Verifikasi Resmi Kepegawaian EMS"
              >
                Web Link
              </button>
              <button
                type="button"
                onClick={() => setQrFormat("vcard")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  qrFormat === "vcard" ? "bg-emerald-500 text-black border-emerald-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
                title="vCard Contact (Langsung simpan kontak di HP saat discan)"
              >
                vCard HP
              </button>
              <button
                type="button"
                onClick={() => setQrFormat("json")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer ${
                  qrFormat === "json" ? "bg-emerald-500 text-black border-emerald-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
                title="Teks Data Kredensial Terenkripsi JSON"
              >
                JSON Data
              </button>
            </div>
          </div>

          {/* Card Side View Switch */}
          <div>
            <label className="text-[10px] font-black uppercase text-slate-400 block mb-1.5">
              💳 Sisi Kartu ID (Tampilan)
            </label>
            <div className="grid grid-cols-2 gap-1.5 font-bold">
              <button
                type="button"
                onClick={() => setActiveSide("front")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer flex items-center justify-center gap-1 ${
                  activeSide === "front" ? "bg-sky-500 text-black border-sky-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                <CreditCard className="w-3.5 h-3.5" />
                Depan (Front)
              </button>
              <button
                type="button"
                onClick={() => setActiveSide("back")}
                className={`py-1.5 px-2 text-[10px] uppercase rounded border transition-all cursor-pointer flex items-center justify-center gap-1 ${
                  activeSide === "back" ? "bg-sky-500 text-black border-sky-400 font-black" : "bg-[#111] text-slate-400 border-[#222]"
                }`}
              >
                <QrCode className="w-3.5 h-3.5" />
                Belakang + QR
              </button>
            </div>
          </div>
        </div>

        {/* ID Card Display Area & Printable Section */}
        <div className="flex flex-col items-center justify-center p-6 bg-[#050505] rounded-xl border border-[#222] relative overflow-hidden">
          
          {/* Subtle grid background */}
          <div className="absolute inset-0 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px] opacity-30 pointer-events-none"></div>

          <div id="printable-id-card-sheet" className="relative z-10 w-full flex flex-col items-center gap-8">
            
            {/* Front & Back Card Layout Container */}
            <div className="flex flex-col lg:flex-row items-center justify-center gap-8 w-full">
              
              {/* FRONT SIDE CARD (Standard CR80 Ratio 85.6mm x 53.9mm -> ~ 340px x 215px or scaled) */}
              {(activeSide === "front" || activeSide === "back") && (
                <div 
                  className={`w-[340px] h-[520px] rounded-2xl p-5 shadow-2xl flex flex-col justify-between relative overflow-hidden transition-all duration-300 ${themeStyles.cardBg}`}
                >
                  {/* Holographic Security Pattern Badge Line */}
                  <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-amber-400 via-rose-500 to-sky-400 animate-pulse"></div>

                  {/* Header Branding */}
                  <div className={`p-3 rounded-xl flex items-center justify-between ${themeStyles.headerBg}`}>
                    <div className="flex items-center gap-2">
                      <div className="w-7 h-7 rounded-lg bg-black/40 border border-white/20 flex items-center justify-center text-amber-400 font-black text-xs">
                        MED
                      </div>
                      <div>
                        <h4 className="text-[10px] font-black uppercase tracking-wider leading-none">
                          PT MEDIAN ENTERPRISE DATA
                        </h4>
                        <p className="text-[8px] font-bold text-slate-400 tracking-tight mt-0.5">
                          OFFICIAL DIGITAL EMPLOYEE IDENTIFICATION
                        </p>
                      </div>
                    </div>
                    <ShieldCheck className={`w-5 h-5 ${themeStyles.accentText}`} />
                  </div>

                  {/* Center Employee Photo & Info */}
                  <div className="flex flex-col items-center text-center space-y-3 my-auto">
                    {/* Photo Box */}
                    <div className="relative group">
                      <div className="w-28 h-28 rounded-xl bg-black/60 border-2 border-white/20 flex items-center justify-center overflow-hidden shadow-xl">
                        {employee.photoUrl ? (
                          <img src={employee.photoUrl} alt={employee.name} className="w-full h-full object-cover" />
                        ) : (
                          <div className={`text-2xl font-black ${themeStyles.accentText}`}>
                            {(employee.name || "").split(" ").filter(Boolean).map(n => n[0]).join("").substring(0, 2).toUpperCase()}
                          </div>
                        )}
                      </div>
                      <span className={`absolute -bottom-2.5 left-1/2 -translate-x-1/2 text-[8px] uppercase tracking-wider px-2 py-0.5 rounded-full border shadow-md font-extrabold ${themeStyles.secBadge}`}>
                        {employee.status}
                      </span>
                    </div>

                    {/* Name & Position */}
                    <div className="pt-2">
                      <h3 className="text-base font-black uppercase tracking-tight line-clamp-1">
                        {employee.name}
                      </h3>
                      <p className={`text-xs font-bold uppercase ${themeStyles.accentText} mt-0.5`}>
                        {employee.position}
                      </p>
                      <p className="text-[10px] text-slate-400 uppercase font-bold mt-0.5">
                        Divisi: {employee.division}
                      </p>
                    </div>

                    {/* NIP & NIK Metadata Box */}
                    <div className="w-full bg-black/30 border border-white/10 rounded-xl p-2.5 text-[10px] grid grid-cols-2 gap-2 text-left font-mono">
                      <div>
                        <span className="text-[8px] text-slate-400 block uppercase">NIP Pegawai</span>
                        <strong className={`font-bold ${themeStyles.accentText}`}>{employee.nip}</strong>
                      </div>
                      <div>
                        <span className="text-[8px] text-slate-400 block uppercase">NIK KTP</span>
                        <strong className="text-white font-bold">{employee.nik}</strong>
                      </div>
                      <div>
                        <span className="text-[8px] text-slate-400 block uppercase">TMT Join</span>
                        <span className="text-slate-300 font-bold">{employee.tmtKerja}</span>
                      </div>
                      <div>
                        <span className="text-[8px] text-slate-400 block uppercase">Masa Berlaku</span>
                        <span className="text-emerald-400 font-extrabold">SEUMUR HIDUP</span>
                      </div>
                    </div>
                  </div>

                  {/* Card Footer Signature & Barcode Simulation */}
                  <div className="border-t border-white/10 pt-2 flex items-center justify-between text-[8px] font-mono opacity-80">
                    <div>
                      <span className="block text-slate-400">Security Hash:</span>
                      <span className="font-bold tracking-tight text-slate-300">{securityHash.substring(0, 20)}...</span>
                    </div>
                    <div className="text-right">
                      <span className="block text-slate-400">Verifikasi EMS:</span>
                      <span className="text-emerald-400 font-bold uppercase">VALIDATED</span>
                    </div>
                  </div>
                </div>
              )}

              {/* BACK SIDE CARD WITH DYNAMIC QR CODE */}
              {(activeSide === "back" || activeSide === "front") && (
                <div 
                  className={`w-[340px] h-[520px] rounded-2xl p-5 shadow-2xl flex flex-col justify-between relative overflow-hidden transition-all duration-300 ${themeStyles.cardBg}`}
                >
                  {/* Magnetic Strip Visual */}
                  <div className="w-[calc(100%+2.5rem)] -mx-5 -mt-5 h-10 bg-slate-950 border-b border-slate-800 flex items-center justify-end px-4">
                    <span className="text-[8px] font-mono text-slate-600 tracking-widest uppercase">
                      EMS-CARD-MAGNETIC-STRIP-2026
                    </span>
                  </div>

                  {/* Header Title */}
                  <div className="text-center pt-2">
                    <span className="text-[9px] font-black uppercase tracking-wider text-slate-400 block">
                      PEMINDAIAN INTEGRITAS DIGITAL
                    </span>
                    <h4 className={`text-xs font-black uppercase tracking-tight ${themeStyles.accentText}`}>
                      SCAN UNTUK VERIFIKASI RESMI PEGAWAI
                    </h4>
                  </div>

                  {/* QR Code Container */}
                  <div className="flex flex-col items-center justify-center p-3 bg-white/5 border border-white/10 rounded-xl my-2">
                    <div className="p-2 bg-white rounded-lg shadow-2xl border-2 border-amber-400/80 relative group">
                      {qrDataUrl ? (
                        <img src={qrDataUrl} alt="QR Code Pegawai" className="w-40 h-40 object-contain" />
                      ) : (
                        <div className="w-40 h-40 flex items-center justify-center text-slate-500 text-xs">
                          Generating QR...
                        </div>
                      )}
                      
                      {/* Logo watermark overlay in center of QR */}
                      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div className="w-8 h-8 rounded-md bg-[#0a0a0a] border border-[#facc15] flex items-center justify-center text-[#facc15] font-black text-[9px] shadow-lg">
                          MED
                        </div>
                      </div>
                    </div>

                    <p className="text-[9px] text-slate-300 font-mono text-center mt-2 font-bold uppercase">
                      {qrFormat === "url" && "🌐 Format Web URL Verifikasi"}
                      {qrFormat === "vcard" && "📇 Format vCard Kontak Smartphone"}
                      {qrFormat === "json" && "🔑 Format Teks Kredensial JSON"}
                    </p>
                  </div>

                  {/* Corporate Terms & Emergency Note */}
                  <div className="space-y-1 text-[8px] text-slate-400 text-justify leading-tight border-t border-white/10 pt-2 font-mono">
                    <p>
                      Kartu ini adalah milik PT MEDIAN ENTERPRISE DATA. Apabila ditemukan, harap kembalikan ke Kantor HRD Pusat atau hubungi hotline resmi: (021) 555-8899.
                    </p>
                    <div className="flex items-center justify-between text-slate-300 pt-1 font-bold">
                      <span>NIP: {employee.nip}</span>
                      <span>EMS HR VERIFIED</span>
                    </div>
                  </div>
                </div>
              )}

            </div>
          </div>
        </div>

        {/* QR Payload Raw Content Inspection & Copy */}
        <div className="bg-[#050505] p-3.5 rounded-lg border border-[#222] space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-[10px] font-black uppercase text-slate-400 flex items-center gap-1.5">
              <Sparkles className="w-3.5 h-3.5 text-[#facc15]" />
              Isi Data QR Code Encoded ({qrFormat.toUpperCase()} Payload):
            </span>
            <button
              type="button"
              onClick={handleCopyPayload}
              className="text-[10px] font-bold text-amber-300 hover:text-white bg-[#111] hover:bg-[#222] border border-amber-500/30 px-2.5 py-1 rounded flex items-center gap-1 transition-colors cursor-pointer"
            >
              {isCopied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3 text-amber-400" />}
              {isCopied ? "Berhasil Disalin!" : "Salin Data QR"}
            </button>
          </div>
          <pre className="text-[10px] bg-[#0a0a0a] border border-[#1e1e1e] p-2.5 rounded font-mono text-emerald-400 overflow-x-auto max-h-24 whitespace-pre-wrap">
            {rawQrPayload}
          </pre>
        </div>

        {/* Bottom Actions Bar */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2 border-t border-[#222]">
          <div className="flex items-center gap-2 text-xs text-slate-400">
            <Printer className="w-4 h-4 text-[#facc15]" />
            <span>Format Cetak Disesuaikan untuk Kartu ID Standar (CR80) & Kertas Lamineit A4</span>
          </div>

          <div className="flex items-center gap-2 w-full sm:w-auto">
            <button
              type="button"
              onClick={handleDownloadQr}
              className="flex-1 sm:flex-initial px-4 py-2 bg-[#141414] hover:bg-[#222] text-amber-300 border border-amber-500/40 text-xs font-bold uppercase rounded-lg transition-colors flex items-center justify-center gap-2 cursor-pointer"
            >
              <Download className="w-4 h-4" />
              Unduh QR PNG
            </button>
            <button
              type="button"
              onClick={handlePrintCard}
              className="flex-1 sm:flex-initial px-5 py-2 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 text-xs font-black uppercase rounded-lg transition-all flex items-center justify-center gap-2 shadow-lg shadow-amber-500/20 cursor-pointer"
            >
              <Printer className="w-4 h-4" />
              Cetak ID Card Digital
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}