import React, { useState } from 'react';
import { 
  Download, 
  Smartphone, 
  Tablet, 
  CheckCircle2, 
  Share2, 
  MoreVertical, 
  ExternalLink, 
  X, 
  ShieldCheck, 
  Sparkles, 
  Zap, 
  MonitorSmartphone,
  PlusSquare,
  ArrowRight
} from 'lucide-react';
import { usePWAInstall } from '../utils/usePWAInstall';

interface InstallAppModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const InstallAppModal: React.FC<InstallAppModalProps> = ({ isOpen, onClose }) => {
  const { isInstallable, isStandalone, isIOS, isAndroid, promptInstall, isInstalled } = usePWAInstall();
  const [activeDeviceTab, setActiveDeviceTab] = useState<'android' | 'ios' | 'desktop'>(
    isIOS ? 'ios' : 'android'
  );
  const [installing, setInstalling] = useState(false);

  if (!isOpen) return null;

  const handleInstallClick = async () => {
    setInstalling(true);
    const success = await promptInstall();
    setInstalling(false);
    if (success) {
      onClose();
    }
  };

  const handleOpenExternalTab = () => {
    window.open(window.location.href, '_blank');
  };

  const isIframe = window.self !== window.top;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/70 backdrop-blur-xs animate-in fade-in duration-200">
      <div 
        className="bg-white rounded-3xl max-w-lg w-full shadow-2xl border border-slate-200 overflow-hidden flex flex-col max-h-[92vh] animate-in zoom-in-95 duration-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header with gradient badge */}
        <div className="bg-gradient-to-r from-emerald-800 via-emerald-700 to-teal-800 text-white p-5 sm:p-6 relative">
          <button
            onClick={onClose}
            className="absolute top-4 right-4 p-2 rounded-full bg-black/20 hover:bg-black/40 text-white transition"
            title="Tutup"
          >
            <X className="w-5 h-5" />
          </button>

          <div className="flex items-center gap-3.5">
            <div className="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white shrink-0 shadow-inner">
              <Download className="w-6 h-6 text-emerald-300" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="px-2 py-0.5 rounded-md bg-emerald-500/40 text-emerald-200 text-[10px] font-extrabold uppercase tracking-wider">
                  PWA / WebAPK
                </span>
                <span className="text-xs text-emerald-200/80 font-medium">Bebas Kuota Lambat</span>
              </div>
              <h2 className="text-lg sm:text-xl font-black text-white tracking-tight mt-0.5">
                Install Aplikasi Toko Makmur
              </h2>
            </div>
          </div>
        </div>

        {/* Scrollable Body */}
        <div className="p-5 sm:p-6 overflow-y-auto space-y-5 flex-1 text-slate-800 text-xs">
          
          {/* Status Message if already installed / standalone */}
          {isStandalone ? (
            <div className="p-3.5 bg-emerald-50 border border-emerald-200 rounded-2xl flex items-center gap-3 text-emerald-800 font-medium">
              <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0" />
              <div>
                <p className="font-bold text-xs">Aplikasi Sudah Terpasang!</p>
                <p className="text-[11px] text-emerald-700">Anda sedang menjalankan Toko Makmur dalam mode layar penuh (Standalone Native App).</p>
              </div>
            </div>
          ) : null}

          {/* Benefits Grid */}
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="p-2.5 bg-slate-50 border border-slate-100 rounded-xl">
              <Zap className="w-4 h-4 text-amber-600 mx-auto mb-1" />
              <p className="font-bold text-[11px] text-slate-800">Layar Penuh</p>
              <p className="text-[9px] text-slate-500">Tanpa address bar browser</p>
            </div>
            <div className="p-2.5 bg-slate-50 border border-slate-100 rounded-xl">
              <Smartphone className="w-4 h-4 text-emerald-600 mx-auto mb-1" />
              <p className="font-bold text-[11px] text-slate-800">Icon di Home</p>
              <p className="text-[9px] text-slate-500">Langsung di HP/Tablet</p>
            </div>
            <div className="p-2.5 bg-slate-50 border border-slate-100 rounded-xl">
              <Sparkles className="w-4 h-4 text-teal-600 mx-auto mb-1" />
              <p className="font-bold text-[11px] text-slate-800">Akses Cepat</p>
              <p className="text-[9px] text-slate-500">1x sentuh langsung Kasir</p>
            </div>
          </div>

          {/* Primary Action Button (If Native Prompt Available) */}
          {isInstallable && (
            <div className="p-4 bg-emerald-50 border-2 border-emerald-500/50 rounded-2xl text-center space-y-2">
              <p className="text-xs font-bold text-emerald-950">
                Perangkat Anda siap menginstal secara otomatis!
              </p>
              <button
                type="button"
                onClick={handleInstallClick}
                disabled={installing}
                className="w-full py-3 px-4 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-extrabold rounded-xl shadow-md transition flex items-center justify-center gap-2 text-sm"
              >
                <Download className="w-4 h-4" />
                <span>{installing ? 'Memproses Instalasi...' : 'Install Sekarang ke Layar Utama'}</span>
              </button>
            </div>
          )}

          {/* Device Tabs for Step-by-Step Instructions */}
          <div className="space-y-3 pt-1">
            <div className="flex items-center justify-between">
              <span className="font-bold text-slate-900 text-xs">Panduan Pemasangan Manual:</span>
              <div className="flex bg-slate-100 p-0.5 rounded-lg border border-slate-200 text-[11px]">
                <button
                  type="button"
                  onClick={() => setActiveDeviceTab('android')}
                  className={`px-2.5 py-1 rounded-md font-bold transition flex items-center gap-1 ${
                    activeDeviceTab === 'android' ? 'bg-white text-emerald-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
                  <Smartphone className="w-3.5 h-3.5" />
                  <span>Android</span>
                </button>
                <button
                  type="button"
                  onClick={() => setActiveDeviceTab('ios')}
                  className={`px-2.5 py-1 rounded-md font-bold transition flex items-center gap-1 ${
                    activeDeviceTab === 'ios' ? 'bg-white text-emerald-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
                  <Tablet className="w-3.5 h-3.5" />
                  <span>iOS / iPad</span>
                </button>
                <button
                  type="button"
                  onClick={() => setActiveDeviceTab('desktop')}
                  className={`px-2.5 py-1 rounded-md font-bold transition flex items-center gap-1 ${
                    activeDeviceTab === 'desktop' ? 'bg-white text-emerald-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
                  <MonitorSmartphone className="w-3.5 h-3.5" />
                  <span>Komputer</span>
                </button>
              </div>
            </div>

            {/* Android Instructions */}
            {activeDeviceTab === 'android' && (
              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    1
                  </div>
                  <div>
                    <p className="font-bold text-slate-800">Buka di Browser Google Chrome / Samsung Internet</p>
                    <p className="text-slate-500 text-[11px]">Pastikan tautan toko dibuka melalui browser bawaan di HP/Tablet.</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    2
                  </div>
                  <div>
                    <p className="font-bold text-slate-800 flex items-center gap-1">
                      Tekan tombol Menu <MoreVertical className="w-3.5 h-3.5 text-slate-600 inline" /> (Titik Tiga di pojok kanan atas)
                    </p>
                    <p className="text-slate-500 text-[11px]">Cari opsi menu browser Anda.</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    3
                  </div>
                  <div>
                    <p className="font-bold text-slate-800 flex items-center gap-1">
                      Pilih <span className="text-emerald-700 bg-emerald-100/70 px-1.5 py-0.5 rounded">"Install Aplikasi"</span> atau <span className="text-emerald-700 bg-emerald-100/70 px-1.5 py-0.5 rounded">"Tambahkan ke Layar Utama"</span>
                    </p>
                    <p className="text-slate-500 text-[11px]">Android akan otomatis memasang icon Toko Makmur ke layar HP Anda.</p>
                  </div>
                </div>
              </div>
            )}

            {/* iOS Instructions */}
            {activeDeviceTab === 'ios' && (
              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    1
                  </div>
                  <div>
                    <p className="font-bold text-slate-800">Buka di Browser Safari</p>
                    <p className="text-slate-500 text-[11px]">iOS hanya mendukung instalasi PWA melalui Safari.</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    2
                  </div>
                  <div>
                    <p className="font-bold text-slate-800 flex items-center gap-1">
                      Tekan tombol Share <Share2 className="w-3.5 h-3.5 text-blue-600 inline" /> di bagian bawah layar
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    3
                  </div>
                  <div>
                    <p className="font-bold text-slate-800 flex items-center gap-1">
                      Gulir ke bawah dan pilih <span className="text-emerald-700 bg-emerald-100/70 px-1.5 py-0.5 rounded flex items-center gap-1 inline-flex"><PlusSquare className="w-3 h-3" /> Tambahkan ke Layar Utama</span>
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* Desktop Instructions */}
            {activeDeviceTab === 'desktop' && (
              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    1
                  </div>
                  <div>
                    <p className="font-bold text-slate-800">Gunakan Google Chrome atau Microsoft Edge</p>
                    <p className="text-slate-500 text-[11px]">Lihat ke sebelah kanan bilah URL (Address Bar).</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-800 font-black flex items-center justify-center shrink-0 text-xs">
                    2
                  </div>
                  <div>
                    <p className="font-bold text-slate-800 flex items-center gap-1">
                      Klik icon <Download className="w-3.5 h-3.5 text-emerald-600 inline" /> "Install Toko Makmur" di ujung kanan address bar
                    </p>
                    <p className="text-slate-500 text-[11px]">Aplikasi akan terpasang di desktop Windows/Mac/Linux seperti software kasir POS mandiri.</p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Iframe tip */}
          {isIframe && (
            <div className="p-3 bg-amber-50 border border-amber-200 rounded-2xl flex items-center justify-between gap-3 text-amber-900">
              <div className="text-[11px]">
                <p className="font-bold">Membuka di Tab Baru?</p>
                <p className="text-amber-700">Untuk memunculkan menu instalasi browser secara langsung, buka di tab browser penuh.</p>
              </div>
              <button
                type="button"
                onClick={handleOpenExternalTab}
                className="px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl text-[11px] shrink-0 flex items-center gap-1 transition"
              >
                <span>Buka Tab Baru</span>
                <ExternalLink className="w-3 h-3" />
              </button>
            </div>
          )}

        </div>

        {/* Footer */}
        <div className="p-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
          <div className="flex items-center gap-1.5 text-slate-500 text-[11px]">
            <ShieldCheck className="w-4 h-4 text-emerald-600" />
            <span>Aman, Ringan & Otomatis Terhubung</span>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 font-bold rounded-xl text-xs transition"
          >
            Mengerti & Tutup
          </button>
        </div>
      </div>
    </div>
  );
};