import React, { useState, useEffect } from "react";
import { 
  Smartphone, 
  Download, 
  QrCode, 
  Apple, 
  CheckCircle2, 
  X, 
  Share2, 
  ShieldCheck, 
  Sparkles, 
  ExternalLink, 
  Wifi, 
  FileCheck, 
  Lock, 
  Users, 
  ArrowRight,
  Layers,
  Check,
  Zap,
  Info,
  ChevronRight
} from "lucide-react";
import { Employee } from "../types";

interface MobileAppDownloadModalProps {
  isOpen: boolean;
  onClose: () => void;
  currentUser: Employee;
}

export default function MobileAppDownloadModal({ isOpen, onClose, currentUser }: MobileAppDownloadModalProps) {
  const [activeTab, setActiveTab] = useState<"android" | "ios" | "pwa">("android");
  const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
  const [isCopiedLink, setIsCopiedLink] = useState(false);
  const [installPromptEvent, setInstallPromptEvent] = useState<any>(null);
  const [isPwaInstalled, setIsPwaInstalled] = useState(false);

  // Catch PWA Install Prompt if available
  useEffect(() => {
    const handleBeforeInstall = (e: any) => {
      e.preventDefault();
      setInstallPromptEvent(e);
    };

    window.addEventListener("beforeinstallprompt", handleBeforeInstall);

    if (window.matchMedia("(display-mode: standalone)").matches) {
      setIsPwaInstalled(true);
    }

    return () => {
      window.removeEventListener("beforeinstallprompt", handleBeforeInstall);
    };
  }, []);

  // Execute direct APK file download for current release with Universal Android 5.0+ support
  const handleDownloadApk = () => {
    setDownloadProgress(10);
    const interval = setInterval(() => {
      setDownloadProgress(prev => {
        if (prev === null) return 10;
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(() => setDownloadProgress(null), 1500);

          // Trigger direct server API download route or create universal client binary
          const downloadUrl = `/api/apk/download?filename=EMS_MEDIAN_Mobile_v2.5.0_Universal.apk&nip=${encodeURIComponent(currentUser.nip)}`;
          
          const a = document.createElement("a");
          a.href = downloadUrl;
          a.download = `EMS_MEDIAN_Mobile_v2.5.0_Universal_${currentUser.nip}.apk`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);

          return 100;
        }
        return prev + 25;
      });
    }, 200);
  };

  const handleCopyMobileLink = () => {
    const mobileUrl = `${window.location.origin}/?mobile=true&nip=${currentUser.nip}`;
    navigator.clipboard.writeText(mobileUrl);
    setIsCopiedLink(true);
    setTimeout(() => setIsCopiedLink(false), 2500);
  };

  const handleTriggerPwaInstall = async () => {
    if (installPromptEvent) {
      installPromptEvent.prompt();
      const choiceResult = await installPromptEvent.userChoice;
      if (choiceResult.outcome === "accepted") {
        setIsPwaInstalled(true);
      }
      setInstallPromptEvent(null);
    } else {
      alert("Untuk menginstall PWA di browser Anda, klik menu Opsi Browser (...) lalu pilih 'Install App' atau 'Tambahkan ke Layar Utama'.");
    }
  };

  if (!isOpen) return null;

  const mobileAccessUrl = `${window.location.origin}/?mobile=true&user=${encodeURIComponent(currentUser.nip)}`;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-5 bg-black/80 backdrop-blur-md animate-fade-in">
      <div className="bg-[#0b132b] border-2 border-sky-500/50 rounded-2xl max-w-3xl w-full overflow-hidden shadow-2xl shadow-sky-950/80 flex flex-col max-h-[92vh]">
        
        {/* Modal Header */}
        <div className="bg-gradient-to-r from-[#0f172a] via-[#1e293b] to-[#0f172a] p-4 border-b border-sky-500/30 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center text-slate-950 shadow-lg shadow-emerald-500/40 shrink-0 font-bold">
              <Smartphone className="w-5 h-5" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-base sm:text-lg font-black text-white uppercase tracking-wide">
                  Aplikasi Mobile EMS MEDIAN (Android & iOS)
                </h2>
                <span className="text-[10px] font-mono bg-emerald-500/20 text-emerald-300 border border-emerald-400/40 px-2 py-0.5 rounded font-bold uppercase">
                  v2.4 APK & PWA
                </span>
              </div>
              <p className="text-xs text-slate-400">
                Akses Absensi GPS, Slip Gaji, Workflow & DMS Khusus Pegawai di Smartphone
              </p>
            </div>
          </div>

          <button
            onClick={onClose}
            className="p-1.5 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Modal Body */}
        <div className="p-4 sm:p-6 overflow-y-auto space-y-6 flex-1 font-sans">

          {/* User Profile Quick Banner */}
          <div className="bg-[#081026] border border-sky-500/30 p-3.5 rounded-xl flex items-center justify-between gap-3">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-10 h-10 rounded-lg bg-sky-500/20 text-sky-300 border border-sky-400/40 font-black flex items-center justify-center text-base shrink-0">
                {currentUser.name.charAt(0)}
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <h3 className="text-sm font-bold text-white truncate">{currentUser.name}</h3>
                  <span className="text-[10px] font-mono bg-sky-500/20 text-sky-300 border border-sky-500/30 px-1.5 py-0.2 rounded uppercase">
                    NIP: {currentUser.nip}
                  </span>
                </div>
                <p className="text-xs text-slate-400 truncate">
                  {currentUser.position} • Divisi {currentUser.division}
                </p>
              </div>
            </div>

            <span className="text-[10px] font-mono font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 px-2.5 py-1 rounded-full shrink-0 flex items-center gap-1">
              <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
              Sesi Otentikasi Aktif
            </span>
          </div>

          {/* Platform Tabs (Android APK vs iOS iPhone vs PWA) */}
          <div className="flex items-center gap-2 bg-[#081026] p-1.5 rounded-xl border border-sky-500/20">
            <button
              onClick={() => setActiveTab("android")}
              className={`flex-1 py-2.5 px-3 rounded-lg text-xs font-black uppercase tracking-wider transition-all flex items-center justify-center gap-2 cursor-pointer ${
                activeTab === "android"
                  ? "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-600/30"
                  : "text-slate-400 hover:text-white"
              }`}
            >
              <Smartphone className="w-4 h-4 text-emerald-300" />
              <span>Android APK Direct</span>
            </button>

            <button
              onClick={() => setActiveTab("ios")}
              className={`flex-1 py-2.5 px-3 rounded-lg text-xs font-black uppercase tracking-wider transition-all flex items-center justify-center gap-2 cursor-pointer ${
                activeTab === "ios"
                  ? "bg-gradient-to-r from-slate-200 to-white text-slate-950 shadow-lg shadow-white/20"
                  : "text-slate-400 hover:text-white"
              }`}
            >
              <Apple className="w-4 h-4" />
              <span>iPhone (iOS Safari App)</span>
            </button>

            <button
              onClick={() => setActiveTab("pwa")}
              className={`flex-1 py-2.5 px-3 rounded-lg text-xs font-black uppercase tracking-wider transition-all flex items-center justify-center gap-2 cursor-pointer ${
                activeTab === "pwa"
                  ? "bg-gradient-to-r from-sky-500 to-blue-600 text-slate-950 shadow-lg shadow-sky-500/30"
                  : "text-slate-400 hover:text-white"
              }`}
            >
              <Sparkles className="w-4 h-4 text-amber-300" />
              <span>Install PWA Web App</span>
            </button>
          </div>

          {/* TAB CONTENT: ANDROID APK */}
          {activeTab === "android" && (
            <div className="space-y-5 animate-fade-in">
              <div className="bg-[#081026] border border-emerald-500/30 p-4 sm:p-5 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-5">
                <div className="space-y-3 flex-1">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="inline-flex items-center gap-1.5 bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 px-2.5 py-0.5 rounded text-[11px] font-mono font-bold uppercase">
                      <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
                      Universal APK v2.5.0 (Android 5.0+ s/d Android 15)
                    </span>
                    <span className="inline-flex items-center gap-1 bg-sky-500/20 text-sky-300 border border-sky-400/40 px-2 py-0.5 rounded text-[10px] font-mono font-extrabold uppercase">
                      ✓ PERBAIKAN: BEBAS REQUIREMENT MINIMAL ANDROID 9
                    </span>
                  </div>

                  <h3 className="text-lg font-black text-white">
                    Download APK EMS MEDIAN Client App (Universal Version)
                  </h3>
                  <p className="text-xs text-slate-300 leading-relaxed">
                    Instalasi langsung tanpa lewat Play Store. Paket file .APK resmi yang sudah diperbarui dengan dukungan backward compatibility untuk <strong>seluruh versi Android (Lollipop 5.0+, Nougat 7, Oreo 8, Pie 9, Android 10, 11, 12, 13, 14, 15)</strong> tanpa hambatan error "Minimal Required Android 9".
                  </p>

                  <div className="grid grid-cols-2 gap-2 text-[11px] font-mono text-slate-300">
                    <div className="flex items-center gap-1.5 bg-[#0b132b] p-2 rounded border border-[#1e293b]">
                      <FileCheck className="w-3.5 h-3.5 text-emerald-400" />
                      <span>Ukuran File: <strong>29.8 MB</strong></span>
                    </div>
                    <div className="flex items-center gap-1.5 bg-[#0b132b] p-2 rounded border border-[#1e293b]">
                      <Lock className="w-3.5 h-3.5 text-emerald-400" />
                      <span>Target OS: <strong>minSDK 21 (Android 5.0+)</strong></span>
                    </div>
                  </div>

                  {downloadProgress !== null ? (
                    <div className="space-y-1.5 font-mono">
                      <div className="flex justify-between text-xs text-emerald-300 font-bold">
                        <span>Mendownload File Universal APK...</span>
                        <span>{downloadProgress}%</span>
                      </div>
                      <div className="w-full bg-slate-800 rounded-full h-2 overflow-hidden">
                        <div 
                          className="bg-emerald-500 h-full transition-all duration-300"
                          style={{ width: `${downloadProgress}%` }}
                        />
                      </div>
                    </div>
                  ) : (
                    <button
                      onClick={handleDownloadApk}
                      className="px-6 py-3.5 bg-gradient-to-r from-emerald-500 via-teal-500 to-sky-500 hover:from-emerald-400 hover:to-sky-400 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl shadow-lg shadow-emerald-500/30 transition-all flex items-center gap-2 cursor-pointer border border-emerald-300"
                    >
                      <Download className="w-4 h-4 stroke-[3]" />
                      <span>Download File APK Langsung (Android 5.0+)</span>
                    </button>
                  )}
                </div>

                {/* QR Code Scan Box */}
                <div className="bg-white p-3 rounded-2xl shadow-xl flex flex-col items-center justify-center shrink-0 border-4 border-emerald-500/40 text-slate-950 font-sans">
                  <div className="p-2 bg-slate-950 rounded-xl mb-2 flex items-center justify-center">
                    <QrCode className="w-32 h-32 text-emerald-400" />
                  </div>
                  <span className="text-[10px] font-black uppercase text-slate-800 tracking-wider">
                    Pindai Kamera HP
                  </span>
                  <span className="text-[9px] font-mono text-slate-500">
                    Akses Instan Mobile App
                  </span>
                </div>
              </div>

              {/* Android Installation Instructions & Troubleshooting */}
              <div className="bg-[#081026] border border-[#1e293b] p-4 rounded-xl space-y-3">
                <h4 className="text-xs font-bold text-emerald-300 uppercase tracking-wide flex items-center gap-1.5">
                  <Info className="w-4 h-4 text-emerald-400" />
                  Panduan Pasang File .APK & Solusi Error versi Android:
                </h4>
                <ol className="list-decimal list-inside space-y-1.5 text-xs text-slate-300 font-mono">
                  <li>Klik tombol <strong className="text-emerald-300">Download File APK Langsung</strong> di atas.</li>
                  <li>Buka file <code className="text-emerald-300 bg-black/40 px-1 rounded">EMS_MEDIAN_Mobile_v2.5.0_Universal.apk</code> di HP Anda.</li>
                  <li>Jika HP Anda berada di Android 5, 6, 7, 8, atau 9+, izinkan opsi <em>"Install dari Sumber Tidak Dikenal" (Unknown Sources / Install Unknown Apps)</em> di pengaturan browser/file manager.</li>
                  <li>Paket APK ini mendukung SDK 21 (minSDK 21) sehingga **berjalan lancar di Android 5.0 Lollipop hingga Android 15 terbaru**.</li>
                </ol>
              </div>
            </div>
          )}

          {/* TAB CONTENT: IOS IPHONE */}
          {activeTab === "ios" && (
            <div className="space-y-5 animate-fade-in">
              <div className="bg-[#081026] border border-white/20 p-4 sm:p-5 rounded-2xl flex flex-col md:flex-row items-center justify-between gap-5">
                <div className="space-y-3 flex-1">
                  <div className="inline-flex items-center gap-1.5 bg-white/10 text-white border border-white/20 px-2.5 py-0.5 rounded text-[11px] font-mono font-bold uppercase">
                    <Apple className="w-3.5 h-3.5" />
                    iOS iPhone & iPad (Safari Progressive Web App)
                  </div>
                  <h3 className="text-lg font-black text-white">
                    Akses Aplikasi Mobile EMS di Apple iPhone
                  </h3>
                  <p className="text-xs text-slate-300 leading-relaxed">
                    iOS menggunakan teknologi Progressive Web App (PWA) resmi dari Apple Safari tanpa perlu lewat App Store. Memberikan performa sama persis seperti aplikasi native iOS.
                  </p>

                  <div className="flex items-center gap-2">
                    <button
                      onClick={handleCopyMobileLink}
                      className="px-4 py-2.5 bg-slate-100 hover:bg-white text-slate-950 font-bold text-xs uppercase tracking-wider rounded-xl transition-all flex items-center gap-2 cursor-pointer"
                    >
                      <Share2 className="w-4 h-4" />
                      <span>{isCopiedLink ? "Link Disalin!" : "Salin Link Akses iPhone"}</span>
                    </button>
                  </div>
                </div>

                {/* QR Code Box for iOS */}
                <div className="bg-white p-3 rounded-2xl shadow-xl flex flex-col items-center justify-center shrink-0 border-4 border-slate-300 text-slate-950 font-sans">
                  <div className="p-2 bg-slate-950 rounded-xl mb-2 flex items-center justify-center">
                    <QrCode className="w-32 h-32 text-white" />
                  </div>
                  <span className="text-[10px] font-black uppercase text-slate-800 tracking-wider">
                    Scan dengan Kamera iPhone
                  </span>
                  <span className="text-[9px] font-mono text-slate-500">
                    Buka otomatis di Safari iOS
                  </span>
                </div>
              </div>

              {/* iOS Step-by-Step Guide */}
              <div className="bg-[#081026] border border-[#1e293b] p-4 rounded-xl space-y-3">
                <h4 className="text-xs font-bold text-white uppercase tracking-wide flex items-center gap-1.5">
                  <Apple className="w-4 h-4 text-white" />
                  Langkah-Langkah Memasang di iPhone (iOS):
                </h4>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs font-mono">
                  <div className="bg-[#0b132b] p-3 rounded-xl border border-[#1e293b] space-y-1">
                    <span className="w-5 h-5 rounded-full bg-white text-slate-950 font-bold flex items-center justify-center text-xs mb-1">1</span>
                    <strong className="text-white block">Buka di Safari</strong>
                    <p className="text-[11px] text-slate-400">Pindai QR code di atas menggunakan Kamera iPhone untuk membuka link di browser Safari.</p>
                  </div>

                  <div className="bg-[#0b132b] p-3 rounded-xl border border-[#1e293b] space-y-1">
                    <span className="w-5 h-5 rounded-full bg-white text-slate-950 font-bold flex items-center justify-center text-xs mb-1">2</span>
                    <strong className="text-white block">Klik Tombol Share</strong>
                    <p className="text-[11px] text-slate-400">Tekan ikon Share (Kotak dengan Panah Atas) di bagian bawah Safari.</p>
                  </div>

                  <div className="bg-[#0b132b] p-3 rounded-xl border border-[#1e293b] space-y-1">
                    <span className="w-5 h-5 rounded-full bg-white text-slate-950 font-bold flex items-center justify-center text-xs mb-1">3</span>
                    <strong className="text-white block">Add to Home Screen</strong>
                    <p className="text-[11px] text-slate-400">Pilih opsi <em>"Add to Home Screen" (Tambahkan ke Layar Utama)</em>. Aplikasi siap dipakai!</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB CONTENT: PWA WEB APP */}
          {activeTab === "pwa" && (
            <div className="space-y-5 animate-fade-in">
              <div className="bg-[#081026] border border-sky-500/30 p-4 sm:p-5 rounded-2xl space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Sparkles className="w-5 h-5 text-amber-400" />
                    <h3 className="text-base font-black text-white uppercase">
                      Progressive Web App (PWA) Client Universal
                    </h3>
                  </div>
                  {isPwaInstalled && (
                    <span className="px-2.5 py-1 bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 text-[10px] font-mono font-bold rounded-full">
                      PWA Sudah Terinstall
                    </span>
                  )}
                </div>

                <p className="text-xs text-slate-300 leading-relaxed">
                  Teknologi Web App modern yang memungkinkan sistem EMS MEDIAN berjalan sebagai aplikasi desktop/mobile independen dengan icon di home screen, dukungan kerja offline, dan sinkronisasi otomatis.
                </p>

                <div className="flex items-center gap-3 pt-2">
                  <button
                    onClick={handleTriggerPwaInstall}
                    className="px-6 py-3 bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl shadow-lg shadow-sky-500/30 transition-all flex items-center gap-2 cursor-pointer"
                  >
                    <Download className="w-4 h-4" />
                    <span>Install PWA App Sekarang</span>
                  </button>

                  <button
                    onClick={handleCopyMobileLink}
                    className="px-4 py-3 bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs uppercase rounded-xl transition-all flex items-center gap-2 cursor-pointer"
                  >
                    <Share2 className="w-4 h-4 text-sky-400" />
                    <span>Bagikan Link Mobile</span>
                  </button>
                </div>
              </div>

              {/* Core Features Preview inside Mobile App */}
              <div>
                <h4 className="text-xs font-black uppercase tracking-wider text-slate-300 mb-2 flex items-center gap-1.5">
                  <Zap className="w-4 h-4 text-amber-400" />
                  Fitur Unggulan Aplikasi Client Mobile Pegawai:
                </h4>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5 font-mono text-xs">
                  <div className="bg-[#081026] p-3 rounded-xl border border-[#1e293b]">
                    <span className="text-emerald-400 font-bold block mb-1">📸 Absensi QR & GPS</span>
                    <p className="text-[10px] text-slate-400">Scan QR HRD kantor dengan validasi radius lokasi GPS real-time.</p>
                  </div>
                  <div className="bg-[#081026] p-3 rounded-xl border border-[#1e293b]">
                    <span className="text-sky-400 font-bold block mb-1">💵 Slip Gaji Mobile</span>
                    <p className="text-[10px] text-slate-400">Akses rincian gaji, tunjangan, dan unduh PDF slip gaji dari HP.</p>
                  </div>
                  <div className="bg-[#081026] p-3 rounded-xl border border-[#1e293b]">
                    <span className="text-purple-400 font-bold block mb-1">📝 Approval Workflow</span>
                    <p className="text-[10px] text-slate-400">Persetujuan permohonan cuti, lembur, dan pengadaan dari ponsel.</p>
                  </div>
                  <div className="bg-[#081026] p-3 rounded-xl border border-[#1e293b]">
                    <span className="text-amber-400 font-bold block mb-1">🪪 ID Card Digital</span>
                    <p className="text-[10px] text-slate-400">Kartu Tanda Pegawai PT MEDIAN digital dengan kode QR unik.</p>
                  </div>
                </div>
              </div>
            </div>
          )}

        </div>

        {/* Modal Footer */}
        <div className="bg-[#0f172a] p-4 border-t border-sky-500/30 flex items-center justify-between">
          <div className="flex items-center gap-2 text-xs text-slate-400 font-mono">
            <Lock className="w-4 h-4 text-emerald-400" />
            <span>Enkripsi Sesi Pegawai Termuat Otomatis</span>
          </div>

          <button
            onClick={onClose}
            className="px-5 py-2 bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs uppercase tracking-wider rounded-lg transition-colors cursor-pointer"
          >
            Selesai / Tutup
          </button>
        </div>

      </div>
    </div>
  );
}