import React, { useState } from 'react';
import { Akun, Jurnal, PeriodeAkuntansi, ProfilPerusahaan } from '../../types/accounting';
import { AccountingEngine } from '../../services/accountingEngine';
import { Lock, ArrowRight, CheckCircle2, AlertTriangle, X, RefreshCw } from 'lucide-react';
import confetti from 'canvas-confetti';

interface TutupBukuModalProps {
  isOpen: boolean;
  onClose: () => void;
  currentPeriod: PeriodeAkuntansi;
  akuns: Akun[];
  journals: Jurnal[];
  profile: ProfilPerusahaan;
  onConfirmClose: (
    currentPeriod: PeriodeAkuntansi,
    nextPeriod: PeriodeAkuntansi,
    updatedAkuns: Akun[]
  ) => void;
}

export const TutupBukuModal: React.FC<TutupBukuModalProps> = ({
  isOpen,
  onClose,
  currentPeriod,
  akuns,
  journals,
  profile,
  onConfirmClose,
}) => {
  const INDO_MONTHS = [
    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
  ];

  // Helper to get default next period from currentPeriod
  const getNextPeriodDefaults = () => {
    let nextM = (currentPeriod?.bulan || 1) + 1;
    let nextY = currentPeriod?.tahun || 2026;
    if (nextM > 12) {
      nextM = 1;
      nextY += 1;
    }
    return {
      month: nextM,
      year: nextY,
      name: `${INDO_MONTHS[nextM - 1]} ${nextY}`,
    };
  };

  const initialDefaults = getNextPeriodDefaults();
  const [nextPeriodName, setNextPeriodName] = useState<string>(initialDefaults.name);
  const [nextPeriodMonth, setNextPeriodMonth] = useState<number>(initialDefaults.month);
  const [nextPeriodYear, setNextPeriodYear] = useState<number>(initialDefaults.year);
  const [showPreview, setShowPreview] = useState(false);

  // Update when currentPeriod changes
  React.useEffect(() => {
    if (currentPeriod) {
      const def = getNextPeriodDefaults();
      setNextPeriodMonth(def.month);
      setNextPeriodYear(def.year);
      setNextPeriodName(def.name);
    }
  }, [currentPeriod?.id, currentPeriod?.bulan, currentPeriod?.tahun]);

  if (!isOpen) return null;

  // Calculate new master balances
  const updatedAkuns = AccountingEngine.generatePostClosingMasterAkuns(
    akuns,
    journals,
    profile
  );

  const lr = AccountingEngine.calculateLabaRugi(akuns, journals, profile);
  const netIncome = lr.labaBersihSetelahPajak;

  const handleConfirm = () => {
    const nextPeriod: PeriodeAkuntansi = {
      id: `per-${nextPeriodYear}-${String(nextPeriodMonth).padStart(2, '0')}`,
      tahun: nextPeriodYear,
      bulan: nextPeriodMonth,
      namaPeriode: nextPeriodName,
      isClosed: false,
    };

    onConfirmClose(currentPeriod, nextPeriod, updatedAkuns);
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
      <div className="flex max-h-[92vh] w-full max-w-3xl flex-col rounded-lg bg-white shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-slate-200 bg-slate-800 px-6 py-4 text-white rounded-t-lg">
          <div className="flex items-center gap-2">
            <Lock className="h-5 w-5 text-amber-400" />
            <h3 className="text-sm font-semibold">
              Tutup Buku Periode & Roll-over Otomatis Saldo Awal
            </h3>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-white">
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6 space-y-5">
          {/* Explanation Box */}
          <div className="rounded-lg border border-blue-200 bg-blue-50/70 p-4 text-xs text-blue-950 space-y-2">
            <div className="flex items-center gap-1.5 font-bold text-blue-900">
              <RefreshCw className="h-4 w-4" />
              <span>Mekanisme Otomasi Tutup Buku Periode:</span>
            </div>
            <ul className="list-disc pl-5 space-y-1 text-slate-700">
              <li>
                <strong>Laba Bersih Berjalan</strong> (Rp {netIncome.toLocaleString('id-ID')}) otomatis
                ditransfer ke akun <strong>3-1002 (Laba Ditahan / Retained Earnings)</strong>.
              </li>
              <li>
                Semua akun nominal (<strong>Pendapatan & Beban</strong>) akan otomatis di-reset ke saldo 0
                untuk memulai pencatatan periode baru.
              </li>
              <li>
                Semua akun riil (<strong>Aktiva, Kewajiban, Modal</strong>) secara otomatis membawa saldo
                akhir periode ini menjadi <strong>Post Closing Trial Balance / Saldo Awal</strong> di periode berikutnya.
              </li>
            </ul>
          </div>

          {/* Form Setting Next Period */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-lg border border-slate-200 bg-slate-50 p-4">
            <div>
              <label className="block text-xs font-semibold text-slate-700">Periode Saat Ini (Akan Ditutup)</label>
              <input
                type="text"
                readOnly
                value={currentPeriod.namaPeriode}
                className="mt-1 w-full rounded border border-slate-300 bg-slate-200 px-3 py-1.5 text-xs font-bold text-slate-800"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700">Nama Periode Baru *</label>
              <input
                type="text"
                required
                value={nextPeriodName}
                onChange={(e) => setNextPeriodName(e.target.value)}
                className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-bold text-blue-900 focus:border-blue-500 focus:outline-hidden"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700">Bulan & Tahun *</label>
              <div className="grid grid-cols-2 gap-2 mt-1">
                <select
                  value={nextPeriodMonth}
                  onChange={(e) => setNextPeriodMonth(parseInt(e.target.value))}
                  className="rounded border border-slate-300 bg-white px-2 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                >
                  {Array.from({ length: 12 }, (_, i) => (
                    <option key={i + 1} value={i + 1}>
                      Bulan {i + 1}
                    </option>
                  ))}
                </select>
                <input
                  type="number"
                  value={nextPeriodYear}
                  onChange={(e) => setNextPeriodYear(parseInt(e.target.value))}
                  className="rounded border border-slate-300 px-2 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                />
              </div>
            </div>
          </div>

          {/* Toggle Preview Table */}
          <div>
            <button
              type="button"
              onClick={() => setShowPreview(!showPreview)}
              className="text-xs font-semibold text-blue-600 hover:text-blue-800 underline"
            >
              {showPreview ? 'Sembunyikan Pratinjau Saldo Awal Baru' : 'Lihat Pratinjau Saldo Awal Baru (Post Closing TB)'}
            </button>

            {showPreview && (
              <div className="mt-2 max-h-60 overflow-y-auto rounded border border-slate-200">
                <table className="w-full text-left text-xs border-collapse">
                  <thead className="sticky top-0 bg-slate-100 text-slate-700 font-semibold uppercase">
                    <tr>
                      <th className="py-1.5 px-3">Kode</th>
                      <th className="py-1.5 px-3">Nama Akun</th>
                      <th className="py-1.5 px-3 text-right">Saldo Awal Debet Baru</th>
                      <th className="py-1.5 px-3 text-right">Saldo Awal Kredit Baru</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200 font-mono">
                    {updatedAkuns.map((a) => (
                      <tr key={a.id} className="hover:bg-slate-50">
                        <td className="py-1 px-3 font-bold text-blue-900">{a.kodeAkun}</td>
                        <td className="py-1 px-3 font-sans text-slate-800">{a.namaAkun}</td>
                        <td className="py-1 px-3 text-right">
                          {a.saldoAwalDebet > 0 ? a.saldoAwalDebet.toLocaleString('id-ID') : '-'}
                        </td>
                        <td className="py-1 px-3 text-right">
                          {a.saldoAwalKredit > 0 ? a.saldoAwalKredit.toLocaleString('id-ID') : '-'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex justify-between items-center px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-lg">
          <div className="text-xs text-slate-500">
            Aksi ini akan dicatat ke dalam <strong>Audit Trail</strong> sistem.
          </div>

          <div className="flex gap-2">
            <button
              type="button"
              onClick={onClose}
              className="rounded bg-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-300"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleConfirm}
              className="inline-flex items-center gap-1.5 rounded bg-amber-600 px-5 py-2 text-xs font-semibold text-white shadow-xs hover:bg-amber-700"
            >
              <Lock className="h-4 w-4" />
              Konfirmasi Tutup Buku Sekarang
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};