import React, { useState } from 'react';
import { Calculator, Percent, ShieldCheck, RefreshCw, Plus, Trash2, CheckCircle2, AlertCircle, Info, Layers, DollarSign } from 'lucide-react';
import { SalarySettings, ProgressiveTaxBracket, Employee } from '../types';
import { calculateProgressiveTaxBreakdown, DEFAULT_TAX_BRACKETS, formatRupiah, formatRupiahShort, getPTKPAmount, calculateSalaryTotals } from '../utils/salaryUtils';

interface AutomatedTaxCalculatorProps {
  employee: Employee;
  salarySettings: SalarySettings;
  onUpdateSettings: (newSettings: SalarySettings) => void;
  onClose?: () => void;
  isModal?: boolean;
}

export const AutomatedTaxCalculator: React.FC<AutomatedTaxCalculatorProps> = ({
  employee,
  salarySettings,
  onUpdateSettings,
  onClose,
  isModal = true
}) => {
  const [calcMode, setCalcMode] = useState<'progressive' | 'fixed'>(
    salarySettings.taxCalculationMode || 'progressive'
  );
  const [taxStatus, setTaxStatus] = useState(salarySettings.taxStatus || 'TK/0');
  const [fixedRatePercent, setFixedRatePercent] = useState(salarySettings.taxRatePercent || 5);
  const [brackets, setBrackets] = useState<ProgressiveTaxBracket[]>(
    salarySettings.customTaxBrackets && salarySettings.customTaxBrackets.length > 0
      ? salarySettings.customTaxBrackets
      : DEFAULT_TAX_BRACKETS
  );
  
  // Custom PTKP override option
  const [ptkpOverride, setPtkpOverride] = useState<number | undefined>(salarySettings.annualPtkpOverride);
  const [showBracketEditor, setShowBracketEditor] = useState(false);

  // Calculate current gross monthly income based on current salary settings
  const currentTotals = calculateSalaryTotals(salarySettings);
  const monthlyGross = currentTotals.grossIncome;

  // Compute live breakdown using current parameters
  const taxResult = calculateProgressiveTaxBreakdown(
    monthlyGross,
    taxStatus,
    brackets,
    ptkpOverride
  );

  // New bracket form state
  const [newMin, setNewMin] = useState<string>('');
  const [newMax, setNewMax] = useState<string>('');
  const [newRate, setNewRate] = useState<string>('');

  const handleAddBracket = () => {
    if (!newRate) return;
    const minVal = Number(newMin) || 0;
    const maxVal = newMax.trim() === '' ? null : Number(newMax);
    const rateVal = Number(newRate) || 0;

    const newBracketItem: ProgressiveTaxBracket = {
      id: `bracket-${Date.now()}`,
      minAnnualIncome: minVal,
      maxAnnualIncome: maxVal,
      ratePercent: rateVal
    };

    const updated = [...brackets, newBracketItem].sort((a, b) => a.minAnnualIncome - b.minAnnualIncome);
    setBrackets(updated);
    setNewMin('');
    setNewMax('');
    setNewRate('');
  };

  const handleRemoveBracket = (id: string) => {
    if (brackets.length <= 1) {
      alert("Minimal harus ada 1 lapisan rentang tarif pajak.");
      return;
    }
    setBrackets(brackets.filter(b => b.id !== id));
  };

  const handleResetToStandard = () => {
    setBrackets(DEFAULT_TAX_BRACKETS);
  };

  const handleApplyToSlip = () => {
    const updatedSettings: SalarySettings = {
      ...salarySettings,
      taxStatus: taxStatus as any,
      taxCalculationMode: calcMode,
      taxRatePercent: calcMode === 'progressive' ? taxResult.effectiveTaxRatePercent : fixedRatePercent,
      customTaxBrackets: brackets,
      annualPtkpOverride: ptkpOverride
    };

    onUpdateSettings(updatedSettings);
    if (onClose) onClose();
  };

  const content = (
    <div className="bg-[#0c0d12] border border-[#222] text-slate-100 p-6 space-y-6 font-sans max-w-4xl w-full mx-auto shadow-2xl">
      
      {/* Header Bar */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-[#222] pb-4">
        <div>
          <div className="flex items-center gap-2">
            <span className="bg-[#facc15] text-black text-[10px] font-black px-2 py-0.5 uppercase tracking-wider">
              AUTOMATED TAX ENGINE
            </span>
            <span className="text-xs font-mono text-slate-400">UU HPP PPh 21 Compliant</span>
          </div>
          <h3 className="text-lg font-black text-white uppercase tracking-tight mt-1 flex items-center gap-2">
            <Calculator className="w-5 h-5 text-[#facc15]" />
            Kalkulator Potongan Pajak Progresif Gaji
          </h3>
          <p className="text-xs text-slate-400 font-mono mt-0.5">
            Perhitungan otomatis potongan PPh 21 berdasarkan rentang gaji tahunan & PTKP pegawai <strong className="text-white">{employee.name}</strong>.
          </p>
        </div>

        {onClose && (
          <button
            type="button"
            onClick={onClose}
            className="text-slate-400 hover:text-white font-bold text-sm bg-[#1a1d26] px-3 py-1.5 border border-[#333] cursor-pointer"
          >
            ✕ Tutup
          </button>
        )}
      </div>

      {/* Mode Selection Tabs */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 bg-[#12151f] p-2 border border-[#222]">
        <button
          type="button"
          onClick={() => setCalcMode('progressive')}
          className={`flex items-center gap-3 p-3 text-left border transition-all cursor-pointer ${
            calcMode === 'progressive'
              ? 'bg-[#1e2333] border-[#facc15] text-white shadow-md'
              : 'bg-[#0a0c10] border-[#222] text-slate-400 hover:text-slate-200'
          }`}
        >
          <div className={`p-2 shrink-0 ${calcMode === 'progressive' ? 'bg-[#facc15] text-black' : 'bg-[#1f2430] text-slate-400'}`}>
            <Layers className="w-5 h-5" />
          </div>
          <div>
            <span className="text-xs font-black uppercase tracking-wider block text-[#facc15]">
              1. Tarif Progresif Berlapis (Rekomendasi UU HPP)
            </span>
            <span className="text-[11px] text-slate-300 block font-mono">
              Potongan dihitung otomatis sesuai rentang gaji tahunan & PTKP.
            </span>
          </div>
        </button>

        <button
          type="button"
          onClick={() => setCalcMode('fixed')}
          className={`flex items-center gap-3 p-3 text-left border transition-all cursor-pointer ${
            calcMode === 'fixed'
              ? 'bg-[#1e2333] border-[#facc15] text-white shadow-md'
              : 'bg-[#0a0c10] border-[#222] text-slate-400 hover:text-slate-200'
          }`}
        >
          <div className={`p-2 shrink-0 ${calcMode === 'fixed' ? 'bg-[#facc15] text-black' : 'bg-[#1f2430] text-slate-400'}`}>
            <Percent className="w-5 h-5" />
          </div>
          <div>
            <span className="text-xs font-black uppercase tracking-wider block text-white">
              2. Tarif Flat / Manual (%)
            </span>
            <span className="text-[11px] text-slate-300 block font-mono">
              Persentase pajak langsung ditetapkan secara manual.
            </span>
          </div>
        </button>
      </div>

      {/* Main Panel Content */}
      {calcMode === 'progressive' ? (
        <div className="space-y-6">

          {/* Quick Config Row: PTKP Status Selection */}
          <div className="bg-[#12151e] border border-[#222] p-4 space-y-3">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
              <div>
                <label className="text-xs font-black uppercase text-[#facc15] tracking-wider flex items-center gap-1.5">
                  <ShieldCheck className="w-4 h-4 text-[#facc15]" />
                  Status PTKP (Penghasilan Tidak Kena Pajak)
                </label>
                <p className="text-[11px] text-slate-400 font-mono">
                  Batas dasar penghasilan tahunan bebas pajak sesuai status pernikahan & tanggungan.
                </p>
              </div>

              <select
                value={taxStatus}
                onChange={e => setTaxStatus(e.target.value as any)}
                className="bg-[#0a0c10] border border-[#333] text-xs font-mono font-bold text-white px-3 py-2 focus:border-[#facc15] outline-none cursor-pointer min-w-[240px]"
              >
                <option value="TK/0">TK/0 — Tidak Kawin (Rp 54 Juta/thn)</option>
                <option value="TK/1">TK/1 — Tidak Kawin, 1 Tanggungan (Rp 58,5 Juta/thn)</option>
                <option value="TK/2">TK/2 — Tidak Kawin, 2 Tanggungan (Rp 63 Juta/thn)</option>
                <option value="TK/3">TK/3 — Tidak Kawin, 3 Tanggungan (Rp 67,5 Juta/thn)</option>
                <option value="K/0">K/0 — Kawin, 0 Tanggungan (Rp 58,5 Juta/thn)</option>
                <option value="K/1">K/1 — Kawin, 1 Tanggungan (Rp 63 Juta/thn)</option>
                <option value="K/2">K/2 — Kawin, 2 Tanggungan (Rp 67,5 Juta/thn)</option>
                <option value="K/3">K/3 — Kawin, 3 Tanggungan (Rp 72 Juta/thn)</option>
              </select>
            </div>

            {/* Live Calculation Pipeline Cards */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs font-mono pt-2 border-t border-[#222]">
              <div className="bg-[#0a0c10] p-2.5 border border-[#222]">
                <span className="text-slate-500 block text-[10px] uppercase">1. Gaji Kotor Setahun</span>
                <span className="font-bold text-white block text-sm mt-0.5">{formatRupiah(taxResult.annualGrossIncome)}</span>
                <span className="text-[9px] text-slate-400">({formatRupiah(monthlyGross)} / bln x 12)</span>
              </div>

              <div className="bg-[#0a0c10] p-2.5 border border-[#222]">
                <span className="text-slate-500 block text-[10px] uppercase">2. Biaya Jabatan (5%)</span>
                <span className="font-bold text-rose-400 block text-sm mt-0.5">-{formatRupiah(taxResult.biayaJabatanAnnual)}</span>
                <span className="text-[9px] text-slate-400">(Maks. Rp 6 Juta / Thn)</span>
              </div>

              <div className="bg-[#0a0c10] p-2.5 border border-[#222]">
                <span className="text-slate-500 block text-[10px] uppercase">3. PTKP ({taxStatus})</span>
                <span className="font-bold text-rose-400 block text-sm mt-0.5">-{formatRupiah(taxResult.ptkpAmountAnnual)}</span>
                <span className="text-[9px] text-slate-400">(Bebas Pajak Dasar)</span>
              </div>

              <div className="bg-[#1e2333] p-2.5 border border-[#facc15]/40">
                <span className="text-[#facc15] block text-[10px] font-bold uppercase">4. PKP Setahun (Kena Pajak)</span>
                <span className="font-black text-white block text-sm mt-0.5">{formatRupiah(taxResult.annualTaxableIncome)}</span>
                <span className="text-[9px] text-slate-300">Dasar Lapisan Progresif</span>
              </div>
            </div>
          </div>

          {/* Configured Annual Salary Ranges / Tax Brackets Table */}
          <div className="bg-[#0a0c10] border border-[#222] p-4 space-y-3 font-mono text-xs">
            <div className="flex items-center justify-between border-b border-[#222] pb-2">
              <div className="flex items-center gap-2">
                <h4 className="font-black text-[#facc15] uppercase tracking-wider text-xs">
                  Konfigurasi Rentang Gaji Tahunan & Lapisan Tarif Pajak
                </h4>
                <span className="bg-[#222] text-slate-300 text-[10px] px-2 py-0.5">
                  {brackets.length} Lapisan
                </span>
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={handleResetToStandard}
                  className="text-[10px] text-slate-400 hover:text-white underline flex items-center gap-1 cursor-pointer"
                >
                  <RefreshCw className="w-3 h-3" />
                  Reset Standar UU HPP
                </button>
                <button
                  type="button"
                  onClick={() => setShowBracketEditor(!showBracketEditor)}
                  className="bg-[#1f2432] hover:bg-[#283042] text-[#facc15] text-[10px] font-black uppercase px-2.5 py-1 border border-[#333] cursor-pointer"
                >
                  {showBracketEditor ? 'Sembunyikan Editor' : '+ Edit Rentang Gaji'}
                </button>
              </div>
            </div>

            {/* Bracket Breakdown Table */}
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-[#121520] text-slate-400 text-[10px] uppercase border-b border-[#222]">
                    <th className="p-2">Lapisan & Rentang Gaji Tahunan</th>
                    <th className="p-2 text-center">Tarif (%)</th>
                    <th className="p-2 text-right">PKP Dalam Lapisan</th>
                    <th className="p-2 text-right">Pajak Setahun</th>
                    <th className="p-2 text-right text-[#facc15]">Pajak Sebulan</th>
                    {showBracketEditor && <th className="p-2 text-center">Aksi</th>}
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#1a1d26] text-slate-200 text-xs">
                  {taxResult.bracketBreakdowns.map((item, idx) => {
                    const isApplied = item.taxableAmountInBracket > 0;
                    return (
                      <tr key={item.bracketId} className={isApplied ? 'bg-[#151926]/80' : 'opacity-60'}>
                        <td className="p-2 font-bold flex items-center gap-2">
                          <span className={`w-2 h-2 rounded-full ${isApplied ? 'bg-emerald-400' : 'bg-slate-600'}`}></span>
                          {item.label}
                        </td>
                        <td className="p-2 text-center font-bold text-amber-400">{item.ratePercent}%</td>
                        <td className="p-2 text-right">{formatRupiah(item.taxableAmountInBracket)}</td>
                        <td className="p-2 text-right">{formatRupiah(item.annualTaxInBracket)}</td>
                        <td className="p-2 text-right font-black text-[#facc15]">
                          {formatRupiah(item.monthlyTaxInBracket)}
                        </td>
                        {showBracketEditor && (
                          <td className="p-2 text-center">
                            <button
                              type="button"
                              onClick={() => handleRemoveBracket(item.bracketId)}
                              className="text-rose-400 hover:text-rose-300 p-1"
                              title="Hapus Lapisan Ini"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </td>
                        )}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* Optional Add New Custom Bracket Form */}
            {showBracketEditor && (
              <div className="bg-[#121522] p-3 border border-[#333] space-y-2 mt-3">
                <span className="text-[10px] font-black uppercase text-[#facc15] block">
                  Tambah Kustom Rentang Gaji Tahunan Baru:
                </span>
                <div className="grid grid-cols-1 sm:grid-cols-4 gap-2">
                  <input
                    type="number"
                    placeholder="Min Gaji Tahunan (Rp)"
                    value={newMin}
                    onChange={e => setNewMin(e.target.value)}
                    className="bg-[#0a0c10] border border-[#333] text-xs text-white px-2 py-1.5 focus:border-[#facc15] outline-none"
                  />
                  <input
                    type="number"
                    placeholder="Max Gaji Tahunan (Kosongkan = Unlimited)"
                    value={newMax}
                    onChange={e => setNewMax(e.target.value)}
                    className="bg-[#0a0c10] border border-[#333] text-xs text-white px-2 py-1.5 focus:border-[#facc15] outline-none"
                  />
                  <input
                    type="number"
                    step="0.5"
                    placeholder="Tarif Pajak (%)"
                    value={newRate}
                    onChange={e => setNewRate(e.target.value)}
                    className="bg-[#0a0c10] border border-[#333] text-xs text-white px-2 py-1.5 focus:border-[#facc15] outline-none"
                  />
                  <button
                    type="button"
                    onClick={handleAddBracket}
                    className="bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase text-xs py-1.5 cursor-pointer flex items-center justify-center gap-1"
                  >
                    <Plus className="w-3.5 h-3.5" />
                    + Tambah Lapisan
                  </button>
                </div>
              </div>
            )}
          </div>

          {/* Grand Total Summary Box */}
          <div className="bg-[#121826] border-2 border-[#facc15] p-4 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div>
              <span className="text-[10px] font-black text-[#facc15] uppercase tracking-widest block">
                HASIL KALKULASI PAJAK PROGRESIF PPh 21 BULANAN
              </span>
              <div className="flex items-baseline gap-2 mt-0.5">
                <span className="text-2xl font-black text-white">
                  {formatRupiah(taxResult.monthlyTaxTotal)}
                </span>
                <span className="text-xs text-slate-400 font-mono">
                  / bulan (Total Setahun: {formatRupiah(taxResult.annualTaxTotal)})
                </span>
              </div>
            </div>

            <div className="text-right font-mono bg-[#0a0c10] px-4 py-2 border border-[#2e364f]">
              <span className="text-[10px] text-slate-400 block uppercase">Tarif Efektif Terhitung</span>
              <span className="text-lg font-black text-[#facc15]">
                {taxResult.effectiveTaxRatePercent}%
              </span>
            </div>
          </div>

        </div>
      ) : (
        /* Fixed Rate Mode Form */
        <div className="bg-[#0a0c10] border border-[#222] p-5 space-y-4 font-mono text-xs">
          <h4 className="font-black text-white uppercase text-xs tracking-wider border-b border-[#222] pb-2">
            Pengaturan Tarif Pajak Flat / Manual
          </h4>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-slate-400 font-bold uppercase mb-1">
                Persentase Flat Pajak PPh 21 (%)
              </label>
              <div className="relative">
                <input
                  type="number"
                  step="0.1"
                  min="0"
                  max="35"
                  value={fixedRatePercent}
                  onChange={e => setFixedRatePercent(Number(e.target.value) || 0)}
                  className="w-full bg-[#111] border border-[#333] text-rose-400 font-black px-3 py-2 text-sm focus:border-[#facc15] outline-none"
                />
                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 font-bold">%</span>
              </div>
            </div>

            <div className="bg-[#12151f] p-3 border border-[#222] text-slate-300">
              <span className="text-[10px] text-slate-400 uppercase block">Estimasi Potongan Bulanan</span>
              <span className="text-lg font-black text-rose-400 block mt-1">
                {formatRupiah(Math.round(monthlyGross * (fixedRatePercent / 100)))}
              </span>
              <span className="text-[10px] text-slate-500">Dihitung langsung {fixedRatePercent}% dari Gaji Kotor ({formatRupiah(monthlyGross)})</span>
            </div>
          </div>
        </div>
      )}

      {/* Action Footer Bar */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-3 border-t border-[#222]">
        <div className="flex items-center gap-2 text-xs text-slate-400 font-mono">
          <Info className="w-4 h-4 text-[#facc15] shrink-0" />
          <span>Hasil kalkulasi akan disimpan ke profil gaji dan tercetak otomatis di slip gaji PDF.</span>
        </div>

        <div className="flex items-center gap-3 w-full sm:w-auto">
          {onClose && (
            <button
              type="button"
              onClick={onClose}
              className="flex-1 sm:flex-none bg-[#1a1d26] hover:bg-[#252936] text-slate-300 font-bold uppercase text-xs px-4 py-2.5 border border-[#333] cursor-pointer"
            >
              Batal
            </button>
          )}

          <button
            type="button"
            onClick={handleApplyToSlip}
            className="flex-1 sm:flex-none bg-[#facc15] hover:bg-yellow-500 text-black font-black uppercase tracking-wider text-xs px-5 py-2.5 flex items-center justify-center gap-2 shadow-lg transition-all cursor-pointer"
          >
            <CheckCircle2 className="w-4 h-4" />
            Terapkan Ke Slip Gaji Pegawai
          </button>
        </div>
      </div>

    </div>
  );

  if (isModal) {
    return (
      <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
        {content}
      </div>
    );
  }

  return content;
};