import React, { useState } from 'react';
import { Akun, Jurnal, ProfilPerusahaan, PeriodeAkuntansi } from '../../types/accounting';
import { AccountingEngine } from '../../services/accountingEngine';
import { ExcelService } from '../../services/excelService';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';
import { Download, Printer, CheckCircle2, AlertTriangle, Search, Calendar, Sparkles } from 'lucide-react';

interface NeracaSaldoViewProps {
  akuns: Akun[];
  journals: Jurnal[];
  profile: ProfilPerusahaan;
  periodes: PeriodeAkuntansi[];
  activePeriode: PeriodeAkuntansi;
  onOpenAiDiagnostic?: () => void;
}

export const NeracaSaldoView: React.FC<NeracaSaldoViewProps> = ({
  akuns,
  journals,
  profile,
  periodes,
  activePeriode,
  onOpenAiDiagnostic,
}) => {
  const [selectedBulan, setSelectedBulan] = useState<string>(
    activePeriode?.namaPeriode || 'Januari 2026'
  );
  const [searchTerm, setSearchTerm] = useState('');
  const [hideZeroBalance, setHideZeroBalance] = useState(false);

  // Sync with activePeriode when changed from top navbar or period manager
  React.useEffect(() => {
    if (activePeriode?.namaPeriode) {
      setSelectedBulan(activePeriode.namaPeriode);
    }
  }, [activePeriode?.namaPeriode]);

  // Konsep Saldo Berjalan (Carrying Balance) untuk periode bulanan
  const { carryingAkuns, periodJournals } = AccountingEngine.getCarryingAkunsForPeriod(
    selectedBulan,
    akuns,
    journals,
    periodes || [],
    profile
  );

  // Calculate Neraca Saldo using carrying balances and period journals
  const result = AccountingEngine.calculateNeracaSaldo(carryingAkuns, periodJournals);

  // Filter rows by search and zero balance
  const filteredRows = result.rows.filter((row) => {
    const matchesSearch =
      row.akun.kodeAkun.toLowerCase().includes(searchTerm.toLowerCase()) ||
      row.akun.namaAkun.toLowerCase().includes(searchTerm.toLowerCase());

    const hasBalance =
      row.saldoAwalDebet > 0 ||
      row.saldoAwalKredit > 0 ||
      row.mutasiDebet > 0 ||
      row.mutasiKredit > 0 ||
      row.neracaSaldoDebet > 0 ||
      row.neracaSaldoKredit > 0;

    return matchesSearch && (!hideZeroBalance || hasBalance);
  });

  const handleExportExcel = () => {
    const headers = [
      'Kode Perkiraan',
      'Keterangan Perkiraan / Nama Akun',
      'Post Closing TB (Debet)',
      'Post Closing TB (Kredit)',
      'Transaksi Mutasi (Debet)',
      'Transaksi Mutasi (Kredit)',
      'Neraca Saldo Akhir (Debet)',
      'Neraca Saldo Akhir (Kredit)',
    ];

    const rows = filteredRows.map((r) => [
      r.akun.kodeAkun,
      r.akun.namaAkun,
      r.saldoAwalDebet,
      r.saldoAwalKredit,
      r.mutasiDebet,
      r.mutasiKredit,
      r.neracaSaldoDebet,
      r.neracaSaldoKredit,
    ]);

    ExcelService.exportToStyledExcel(
      `Neraca_Saldo_${selectedBulan.replace(/\s+/g, '_')}`,
      `NERACA SALDO (TRIAL BALANCE) - PERIODE ${selectedBulan.toUpperCase()}`,
      headers,
      rows
    );
  };

  return (
    <div className="space-y-5">
      {/* Print View Header */}
      <div className="hidden print:block">
        <PrintHeader
          profile={profile}
          title="NERACA SALDO (TRIAL BALANCE)"
          subtitle="Post Closing Trial Balance, Transaksi Mutasi, dan Saldo Akhir"
          periode={selectedBulan === 'SEMUA' ? activePeriode.namaPeriode : selectedBulan}
        />
      </div>

      {/* Screen Card */}
      <div className="rounded-lg border border-slate-200 bg-white shadow-xs print:border-none print:shadow-none">
        {/* Header */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-3.5 print:hidden">
          <div className="flex items-center gap-2">
            <span className="h-3 w-3 rounded-full bg-indigo-600 inline-block"></span>
            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Neraca Saldo (Trial Balance)
            </h2>
            <span className="rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-800">
              Komparasi 3 Tahap
            </span>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <button
              onClick={handleExportExcel}
              className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
            >
              <Download className="h-3.5 w-3.5 text-blue-600" />
              Download Excel (.xls)
            </button>
            <button
              onClick={() => window.print()}
              className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
            >
              <Printer className="h-3.5 w-3.5 text-slate-600" />
              Cetak / PDF
            </button>
          </div>
        </div>

        {/* Filter Toolbar */}
        <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3 border-b border-slate-100 print:hidden">
          <div className="flex flex-wrap items-center gap-3">
            <div className="relative min-w-[220px]">
              <Search className="absolute left-3 top-2.5 h-3.5 w-3.5 text-slate-400" />
              <input
                type="text"
                placeholder="Cari kode akun atau nama perkiraan..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full rounded border border-slate-300 pl-9 pr-3 py-1.5 text-xs focus:border-blue-500 focus:outline-hidden"
              />
            </div>

            <div className="flex items-center gap-1.5">
              <Calendar className="h-3.5 w-3.5 text-slate-500" />
              <select
                value={selectedBulan}
                onChange={(e) => setSelectedBulan(e.target.value)}
                className="rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-700 focus:border-blue-500 focus:outline-hidden"
              >
                <option value="SEMUA">Semua Transaksi (Akumulatif)</option>
                {periodes.map((p) => (
                  <option key={p.id} value={p.namaPeriode}>
                    Periode: {p.namaPeriode}
                  </option>
                ))}
              </select>
            </div>

            <label className="flex items-center gap-1.5 text-xs text-slate-600 cursor-pointer select-none">
              <input
                type="checkbox"
                checked={hideZeroBalance}
                onChange={(e) => setHideZeroBalance(e.target.checked)}
                className="rounded border-slate-300 text-blue-600 focus:ring-0"
              />
              Sembunyikan Akun Saldo Nol
            </label>
          </div>

          <div className="flex items-center gap-2">
            <div
              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ${
                result.isBalanced
                  ? 'bg-emerald-100 text-emerald-800'
                  : 'bg-red-100 text-red-800'
              }`}
            >
              {result.isBalanced ? (
                <>
                  <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
                  STATUS: SEIMBANG (BALANCED)
                </>
              ) : (
                <>
                  <AlertTriangle className="h-3.5 w-3.5 text-red-600" />
                  SELISIH: Rp {Math.abs(result.totalNeracaSaldoDebet - result.totalNeracaSaldoKredit).toLocaleString('id-ID')}
                </>
              )}
            </div>

            {onOpenAiDiagnostic && (
              <button
                onClick={onOpenAiDiagnostic}
                className="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1 text-xs font-bold text-white shadow-xs hover:bg-indigo-700"
              >
                <Sparkles className="h-3.5 w-3.5" />
                Audit & AI Diagnosa
              </button>
            )}
          </div>
        </div>

        {/* Warning Callout if Unbalanced */}
        {!result.isBalanced && (
          <div className="mx-5 my-3 flex items-center justify-between rounded-lg border border-red-200 bg-red-50 p-3.5 text-xs text-red-900 print:hidden">
            <div className="flex items-center gap-2.5">
              <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
              <div>
                <strong>Neraca Saldo Belum Seimbang!</strong>
                <p className="text-red-700">
                  Total Debet Rp {result.totalNeracaSaldoDebet.toLocaleString('id-ID')} tidak sama dengan Total Kredit Rp {result.totalNeracaSaldoKredit.toLocaleString('id-ID')}.
                </p>
              </div>
            </div>
            {onOpenAiDiagnostic && (
              <button
                onClick={onOpenAiDiagnostic}
                className="rounded bg-red-600 px-3 py-1.5 text-xs font-bold text-white shadow-xs hover:bg-red-700 shrink-0"
              >
                Cari Penyebab dengan AI &rarr;
              </button>
            )}
          </div>
        )}

        {/* 3 Summary Info Boxes */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 p-5 bg-slate-50/50 border-b border-slate-200 print:hidden">
          {/* Box 1: Post Closing Trial Balance */}
          <div className="rounded border border-slate-200 bg-white p-3 shadow-2xs">
            <span className="text-[11px] font-bold uppercase tracking-wider text-slate-500">
              1. Post Closing Trial Balance (Saldo Awal)
            </span>
            <div className="mt-2 grid grid-cols-2 gap-2 font-mono text-xs">
              <div>
                <span className="text-slate-400">Debet:</span>
                <p className="font-bold text-slate-800">
                  Rp {result.totalSaldoAwalDebet.toLocaleString('id-ID')}
                </p>
              </div>
              <div>
                <span className="text-slate-400">Kredit:</span>
                <p className="font-bold text-slate-800">
                  Rp {result.totalSaldoAwalKredit.toLocaleString('id-ID')}
                </p>
              </div>
            </div>
          </div>

          {/* Box 2: Mutasi Transaksi */}
          <div className="rounded border border-slate-200 bg-white p-3 shadow-2xs">
            <span className="text-[11px] font-bold uppercase tracking-wider text-slate-500">
              2. Mutasi Transaksi Berjalan
            </span>
            <div className="mt-2 grid grid-cols-2 gap-2 font-mono text-xs">
              <div>
                <span className="text-slate-400">Debet:</span>
                <p className="font-bold text-blue-900">
                  Rp {result.totalMutasiDebet.toLocaleString('id-ID')}
                </p>
              </div>
              <div>
                <span className="text-slate-400">Kredit:</span>
                <p className="font-bold text-amber-900">
                  Rp {result.totalMutasiKredit.toLocaleString('id-ID')}
                </p>
              </div>
            </div>
          </div>

          {/* Box 3: Neraca Saldo Akhir */}
          <div className="rounded border border-blue-200 bg-blue-50/50 p-3 shadow-2xs">
            <span className="text-[11px] font-bold uppercase tracking-wider text-blue-900">
              3. Neraca Saldo Akhir
            </span>
            <div className="mt-2 grid grid-cols-2 gap-2 font-mono text-xs">
              <div>
                <span className="text-blue-600">Debet:</span>
                <p className="font-bold text-blue-950">
                  Rp {result.totalNeracaSaldoDebet.toLocaleString('id-ID')}
                </p>
              </div>
              <div>
                <span className="text-blue-600">Kredit:</span>
                <p className="font-bold text-blue-950">
                  Rp {result.totalNeracaSaldoKredit.toLocaleString('id-ID')}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Neraca Saldo Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="border-b border-slate-300 bg-slate-100 text-slate-700 font-semibold uppercase text-center">
                <th rowSpan={2} className="py-2.5 px-3 w-24 text-left border-r border-slate-200">
                  Kode Akun
                </th>
                <th rowSpan={2} className="py-2.5 px-3 text-left border-r border-slate-200">
                  Keterangan Perkiraan / Nama Akun
                </th>
                <th colSpan={2} className="py-1.5 px-2 border-r border-slate-200 bg-slate-200/70">
                  Post Closing Trial Balance (Saldo Awal)
                </th>
                <th colSpan={2} className="py-1.5 px-2 border-r border-slate-200 bg-blue-100/60">
                  Transaksi Mutasi
                </th>
                <th colSpan={2} className="py-1.5 px-2 bg-emerald-100/60">
                  Neraca Saldo Akhir
                </th>
              </tr>
              <tr className="border-b border-slate-300 bg-slate-100 text-slate-600 text-center font-medium">
                <th className="py-1.5 px-2 w-28 text-right border-r border-slate-200">Debet (Rp)</th>
                <th className="py-1.5 px-2 w-28 text-right border-r border-slate-200">Kredit (Rp)</th>
                <th className="py-1.5 px-2 w-28 text-right border-r border-slate-200">Debet (Rp)</th>
                <th className="py-1.5 px-2 w-28 text-right border-r border-slate-200">Kredit (Rp)</th>
                <th className="py-1.5 px-2 w-32 text-right border-r border-slate-200 font-bold">Debet (Rp)</th>
                <th className="py-1.5 px-2 w-32 text-right font-bold">Kredit (Rp)</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200 font-mono">
              {filteredRows.map((r) => (
                <tr key={r.akun.id} className="hover:bg-blue-50/30">
                  <td className="py-2 px-3 font-bold text-blue-900 border-r border-slate-200">
                    {r.akun.kodeAkun}
                  </td>
                  <td className="py-2 px-3 font-sans font-medium text-slate-800 border-r border-slate-200">
                    {r.akun.namaAkun}
                  </td>
                  {/* Post closing TB */}
                  <td className="py-2 px-2 text-right text-slate-600 border-r border-slate-200">
                    {r.saldoAwalDebet > 0 ? r.saldoAwalDebet.toLocaleString('id-ID') : '-'}
                  </td>
                  <td className="py-2 px-2 text-right text-slate-600 border-r border-slate-200">
                    {r.saldoAwalKredit > 0 ? r.saldoAwalKredit.toLocaleString('id-ID') : '-'}
                  </td>
                  {/* Mutasi */}
                  <td className="py-2 px-2 text-right text-blue-800 border-r border-slate-200">
                    {r.mutasiDebet > 0 ? r.mutasiDebet.toLocaleString('id-ID') : '-'}
                  </td>
                  <td className="py-2 px-2 text-right text-amber-800 border-r border-slate-200">
                    {r.mutasiKredit > 0 ? r.mutasiKredit.toLocaleString('id-ID') : '-'}
                  </td>
                  {/* Neraca Saldo Akhir */}
                  <td className="py-2 px-2 text-right font-bold text-slate-900 border-r border-slate-200 bg-emerald-50/20">
                    {r.neracaSaldoDebet > 0 ? r.neracaSaldoDebet.toLocaleString('id-ID') : '-'}
                  </td>
                  <td className="py-2 px-2 text-right font-bold text-slate-900 bg-emerald-50/20">
                    {r.neracaSaldoKredit > 0 ? r.neracaSaldoKredit.toLocaleString('id-ID') : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot className="border-t-2 border-slate-400 bg-slate-100 font-mono font-bold text-slate-900">
              <tr>
                <td colSpan={2} className="py-3 px-3 text-right uppercase tracking-wider font-sans">
                  Total Neraca Saldo:
                </td>
                <td className="py-3 px-2 text-right border-r border-slate-200">
                  {result.totalSaldoAwalDebet.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-2 text-right border-r border-slate-200">
                  {result.totalSaldoAwalKredit.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-2 text-right border-r border-slate-200 text-blue-900">
                  {result.totalMutasiDebet.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-2 text-right border-r border-slate-200 text-amber-900">
                  {result.totalMutasiKredit.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-2 text-right border-r border-slate-200 text-emerald-900 bg-emerald-100/50">
                  {result.totalNeracaSaldoDebet.toLocaleString('id-ID')}
                </td>
                <td className="py-3 px-2 text-right text-emerald-900 bg-emerald-100/50">
                  {result.totalNeracaSaldoKredit.toLocaleString('id-ID')}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      {/* Print Signature Section */}
      <div className="hidden print:block">
        <PrintSignature profile={profile} />
      </div>
    </div>
  );
};