import React from 'react';
import { Akun, Jurnal, ProfilPerusahaan, PeriodeAkuntansi, User } from '../../types/accounting';
import { AccountingEngine } from '../../services/accountingEngine';
import {
  TrendingUp,
  TrendingDown,
  DollarSign,
  Scale,
  Wallet,
  CheckCircle2,
  AlertTriangle,
  ArrowRight,
  Plus,
  BookOpen,
  Lock,
  Printer,
  Layers,
  Database,
  ShieldCheck,
  Activity,
  Globe,
  ExternalLink,
} from 'lucide-react';

interface DashboardViewProps {
  akuns: Akun[];
  journals: Jurnal[];
  profile: ProfilPerusahaan;
  activePeriode: PeriodeAkuntansi;
  activeUser: User;
  onNavigate: (tab: string) => void;
  onOpenTutupBuku: () => void;
  onOpenKelolaPeriode?: () => void;
}

export const DashboardView: React.FC<DashboardViewProps> = ({
  akuns,
  journals,
  profile,
  activePeriode,
  activeUser,
  onNavigate,
  onOpenTutupBuku,
  onOpenKelolaPeriode,
}) => {
  const [filterMode, setFilterMode] = React.useState<'periode' | 'semua'>('periode');

  const activeJournals = React.useMemo(() => {
    return filterMode === 'periode'
      ? AccountingEngine.filterJurnal(journals, activePeriode.namaPeriode)
      : journals;
  }, [journals, activePeriode.namaPeriode, filterMode]);

  const lrData = AccountingEngine.calculateLabaRugi(akuns, activeJournals, profile);
  const neracaData = AccountingEngine.calculateNeracaSkontro(akuns, activeJournals, profile);
  const arusKasData = AccountingEngine.calculateArusKas(akuns, activeJournals, profile);
  const neracaSaldo = AccountingEngine.calculateNeracaSaldo(akuns, activeJournals);
  const ratioData = AccountingEngine.calculateAnalisisRasio(akuns, activeJournals, profile);

  const recentJournals = [...activeJournals]
    .sort((a, b) => new Date(b.tanggal).getTime() - new Date(a.tanggal).getTime())
    .slice(0, 5);

  const gopMargin =
    lrData.totalPendapatanUsaha > 0
      ? ((lrData.labaKotorGOP / lrData.totalPendapatanUsaha) * 100).toFixed(1)
      : '0.0';

  const netMargin =
    lrData.totalPendapatan > 0
      ? ((lrData.labaBersihSetelahPajak / lrData.totalPendapatan) * 100).toFixed(1)
      : '0.0';

  return (
    <div className="space-y-6">
      {/* Welcome Banner */}
      <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            {profile.logoUrl && (
              <img
                src={profile.logoUrl}
                alt="Logo PT Tio Mandiri Jaya"
                className="h-14 w-14 rounded-lg object-contain border border-slate-200 bg-white p-1"
              />
            )}
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-bold tracking-tight text-slate-900">
                  {profile.namaPerusahaan}
                </h1>
                <span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
                  {profile.badanHukum}
                </span>
              </div>
              <p className="text-xs text-slate-500">
                Sistem Informasi Akuntansi & Laporan Keuangan Terpadu | Periode Aktif:{' '}
                <strong className="text-blue-900">{activePeriode.namaPeriode}</strong>
              </p>
              {profile.website && (
                <div className="flex items-center gap-2 mt-1">
                  <a
                    href={profile.website}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1 text-[11px] text-blue-600 hover:text-blue-800 hover:underline font-medium"
                    title="Buka Website Resmi PT Tio Mandiri Jaya"
                  >
                    <Globe className="h-3 w-3 text-slate-400" />
                    <span>{profile.website.replace(/^https?:\/\//, '')}</span>
                    <ExternalLink className="h-2.5 w-2.5 text-blue-400" />
                  </a>
                </div>
              )}
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {/* Period Filter Toggle */}
            <div className="flex items-center rounded-lg border border-slate-200 bg-slate-100 p-0.5 text-xs">
              <button
                type="button"
                onClick={() => setFilterMode('periode')}
                className={`rounded-md px-2.5 py-1 text-xs font-semibold transition-all cursor-pointer ${
                  filterMode === 'periode'
                    ? 'bg-blue-600 text-white shadow-xs'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title={`Tampilkan data keuangan khusus periode ${activePeriode.namaPeriode}`}
              >
                Periode: {activePeriode.namaPeriode}
              </button>
              <button
                type="button"
                onClick={() => setFilterMode('semua')}
                className={`rounded-md px-2.5 py-1 text-xs font-semibold transition-all cursor-pointer ${
                  filterMode === 'semua'
                    ? 'bg-blue-600 text-white shadow-xs'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
                title="Tampilkan data keuangan seluruh transaksi (kumulatif)"
              >
                Semua Transaksi
              </button>
            </div>

            {onOpenKelolaPeriode && (
              <button
                onClick={onOpenKelolaPeriode}
                className="inline-flex items-center gap-1.5 rounded border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 transition-colors cursor-pointer shadow-2xs"
                title="Buka panel kelola periode akuntansi dan sinkronisasi data"
              >
                <Layers className="h-3.5 w-3.5 text-blue-600" />
                Kelola Periode
              </button>
            )}

            <button
              onClick={() => onNavigate('jurnal')}
              className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-xs hover:bg-blue-700"
            >
              <Plus className="h-3.5 w-3.5" />
              + Input Jurnal Baru
            </button>
            <button
              onClick={onOpenTutupBuku}
              className="inline-flex items-center gap-1.5 rounded bg-amber-600 px-3 py-2 text-xs font-semibold text-white shadow-xs hover:bg-amber-700"
            >
              <Lock className="h-3.5 w-3.5" />
              Tutup Buku
            </button>
          </div>
        </div>
      </div>

      {/* AdminLTE Classic 4 Small Info Boxes */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Info Box 1: Total Pendapatan (bg-info) */}
        <div className="relative overflow-hidden rounded-lg bg-blue-600 text-white shadow-xs transition-transform hover:-translate-y-0.5">
          <div className="p-4">
            <span className="text-[11px] font-bold uppercase tracking-wider text-blue-100">
              Total Pendapatan
            </span>
            <h3 className="mt-1 text-xl font-bold font-mono">
              Rp {lrData.totalPendapatan.toLocaleString('id-ID')}
            </h3>
            <p className="text-[11px] text-blue-200 mt-1">Omzet Penjualan & Jasa</p>
          </div>
          <TrendingUp className="absolute right-3 bottom-3 h-14 w-14 text-white/15" />
          <button
            onClick={() => onNavigate('laporan-labarugi')}
            className="flex w-full items-center justify-center gap-1 bg-black/15 py-1.5 text-[11px] font-semibold text-white hover:bg-black/25"
          >
            Lihat Laba Rugi <ArrowRight className="h-3 w-3" />
          </button>
        </div>

        {/* Info Box 2: GOP / Gross Operating Profit (bg-success) */}
        <div className="relative overflow-hidden rounded-lg bg-emerald-600 text-white shadow-xs transition-transform hover:-translate-y-0.5">
          <div className="p-4">
            <span className="text-[11px] font-bold uppercase tracking-wider text-emerald-100">
              Gross Operating Profit (GOP)
            </span>
            <h3 className="mt-1 text-xl font-bold font-mono">
              Rp {lrData.labaKotorGOP.toLocaleString('id-ID')}
            </h3>
            <p className="text-[11px] text-emerald-200 mt-1">Margin: {gopMargin}% dari Omzet</p>
          </div>
          <DollarSign className="absolute right-3 bottom-3 h-14 w-14 text-white/15" />
          <button
            onClick={() => onNavigate('laporan-summary')}
            className="flex w-full items-center justify-center gap-1 bg-black/15 py-1.5 text-[11px] font-semibold text-white hover:bg-black/25"
          >
            Lihat Rincian GOP <ArrowRight className="h-3 w-3" />
          </button>
        </div>

        {/* Info Box 3: Total Biaya & HPP (bg-danger) */}
        <div className="relative overflow-hidden rounded-lg bg-rose-600 text-white shadow-xs transition-transform hover:-translate-y-0.5">
          <div className="p-4">
            <span className="text-[11px] font-bold uppercase tracking-wider text-rose-100">
              Total Beban & Pajak
            </span>
            <h3 className="mt-1 text-xl font-bold font-mono">
              Rp {(lrData.totalBiaya + lrData.bebanPajak).toLocaleString('id-ID')}
            </h3>
            <p className="text-[11px] text-rose-200 mt-1">
              Beban Pokok + Opex + Pajak ({lrData.tarifPajakPersen}%)
            </p>
          </div>
          <TrendingDown className="absolute right-3 bottom-3 h-14 w-14 text-white/15" />
          <button
            onClick={() => onNavigate('laporan-labarugi')}
            className="flex w-full items-center justify-center gap-1 bg-black/15 py-1.5 text-[11px] font-semibold text-white hover:bg-black/25"
          >
            Lihat Beban & Pajak <ArrowRight className="h-3 w-3" />
          </button>
        </div>

        {/* Info Box 4: Kas & Setara Kas (bg-warning) */}
        <div className="relative overflow-hidden rounded-lg bg-amber-500 text-white shadow-xs transition-transform hover:-translate-y-0.5">
          <div className="p-4">
            <span className="text-[11px] font-bold uppercase tracking-wider text-amber-100">
              Kas & Setara Kas
            </span>
            <h3 className="mt-1 text-xl font-bold font-mono">
              Rp {arusKasData.kasAkhirPeriode.toLocaleString('id-ID')}
            </h3>
            <p className="text-[11px] text-amber-100 mt-1">Saldo Likuid di Bank & Kas</p>
          </div>
          <Wallet className="absolute right-3 bottom-3 h-14 w-14 text-white/15" />
          <button
            onClick={() => onNavigate('laporan-aruskas')}
            className="flex w-full items-center justify-center gap-1 bg-black/15 py-1.5 text-[11px] font-semibold text-white hover:bg-black/25"
          >
            Lihat Arus Kas <ArrowRight className="h-3 w-3" />
          </button>
        </div>
      </div>

      {/* Financial Health & Ratio Bar */}
      <div className="rounded-xl border border-slate-200 bg-linear-to-r from-slate-900 via-slate-800 to-blue-950 p-4 text-white shadow-sm flex flex-col md:flex-row items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="rounded-xl bg-emerald-500/20 border border-emerald-400/40 p-2.5 text-emerald-400">
            <Activity className="h-6 w-6" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-xs font-bold uppercase tracking-wider text-slate-300">
                Diagnosis Kesehatan Finansial Perusahaan
              </span>
              <span className="rounded-full bg-emerald-500/30 border border-emerald-400 px-2 py-0.5 text-[10px] font-bold text-emerald-300">
                {ratioData.healthRating}
              </span>
            </div>
            <div className="text-xs font-medium text-slate-200 mt-0.5">
              Skor Komposit: <span className="font-bold text-emerald-400">{ratioData.healthScore}/100</span> • Rasio Lancar (CR): <span className="font-mono text-cyan-300 font-bold">{ratioData.likuiditas.currentRatio.nilai}x</span> • Utang/Modal (DER): <span className="font-mono text-cyan-300 font-bold">{ratioData.solvabilitas.debtToEquityRatio.nilai}%</span> • Modal Kerja: <span className="font-mono text-emerald-300 font-bold">Surplus Rp {ratioData.likuiditas.netWorkingCapital.nilai.toLocaleString('id-ID')}</span>
            </div>
          </div>
        </div>

        <button
          onClick={() => onNavigate('analisis-rasio')}
          className="flex items-center gap-1.5 rounded-lg bg-emerald-500 hover:bg-emerald-600 px-4 py-2 text-xs font-bold text-slate-950 transition-colors shadow-xs shrink-0 cursor-pointer"
        >
          <span>Buka Analisis Rasio Lengkap</span>
          <ArrowRight className="h-3.5 w-3.5" />
        </button>
      </div>

      {/* Balance Health Check Banner */}
      <div
        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 rounded-lg border p-4 ${
          neracaSaldo.isBalanced && neracaData.isSeimbang
            ? 'border-emerald-200 bg-emerald-50 text-emerald-900'
            : 'border-red-200 bg-red-50 text-red-900'
        }`}
      >
        <div className="flex items-center gap-3">
          {neracaSaldo.isBalanced && neracaData.isSeimbang ? (
            <div className="p-2 rounded-full bg-emerald-600 text-white">
              <CheckCircle2 className="h-5 w-5" />
            </div>
          ) : (
            <div className="p-2 rounded-full bg-red-600 text-white">
              <AlertTriangle className="h-5 w-5" />
            </div>
          )}
          <div>
            <h3 className="text-sm font-bold">
              {neracaSaldo.isBalanced && neracaData.isSeimbang
                ? 'KONDISI KEUANGAN SEIMBANG (DOUBLE-ENTRY BALANCED)'
                : 'PERINGATAN: ADA KETIDAKSEIMBANGAN DALAM BUKU BESAR'}
            </h3>
            <p className="text-xs opacity-90">
              Total Aktiva: <strong>Rp {neracaData.totalAktiva.toLocaleString('id-ID')}</strong> |
              Total Pasiva (Kewajiban + Ekuitas):{' '}
              <strong>Rp {neracaData.totalPasiva.toLocaleString('id-ID')}</strong>
            </p>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <button
            onClick={() => onNavigate('laporan-balancesheet')}
            className="rounded bg-indigo-700 px-3 py-1.5 text-xs font-semibold text-white shadow-2xs hover:bg-indigo-800 cursor-pointer"
            title="Buka Laporan Posisi Keuangan Format Stafel Vertikal"
          >
            Balance Sheet (Stafel)
          </button>
          <button
            onClick={() => onNavigate('laporan-skontro')}
            className="rounded bg-blue-700 px-3 py-1.5 text-xs font-semibold text-white shadow-2xs hover:bg-blue-800 cursor-pointer"
            title="Buka Neraca 2-Kolom Format Skontro"
          >
            Neraca (Skontro)
          </button>
          <button
            onClick={() => onNavigate('neracasaldo')}
            className="rounded bg-white px-3 py-1.5 text-xs font-semibold text-slate-800 shadow-2xs border border-slate-200 hover:bg-slate-50 cursor-pointer"
          >
            Neraca Saldo
          </button>
        </div>
      </div>

      {/* Main Grid: Recent Transactions & Financial Performance Breakdown */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column (2 Cols): Recent Journals */}
        <div className="lg:col-span-2 rounded-lg border border-slate-200 bg-white shadow-xs">
          <div className="flex items-center justify-between border-b border-slate-200 bg-slate-50 px-5 py-3">
            <div className="flex items-center gap-2">
              <Layers className="h-4 w-4 text-blue-600" />
              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-800">
                Transaksi Jurnal Terbaru ({recentJournals.length})
              </h3>
            </div>
            <button
              onClick={() => onNavigate('jurnal')}
              className="text-xs font-semibold text-blue-600 hover:text-blue-800"
            >
              Lihat Semua Jurnal &rarr;
            </button>
          </div>

          <div className="divide-y divide-slate-100">
            {recentJournals.map((j) => (
              <div key={j.id} className="p-4 hover:bg-slate-50/70 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span
                      className={`rounded px-2 py-0.5 text-[10px] font-bold ${
                        j.tipe === 'JU'
                          ? 'bg-blue-100 text-blue-800'
                          : 'bg-amber-100 text-amber-800'
                      }`}
                    >
                      {j.tipe}
                    </span>
                    <span className="font-mono text-xs font-bold text-slate-900">{j.noBukti}</span>
                  </div>
                  <span className="font-mono text-xs font-bold text-blue-900">
                    Rp {j.totalDebet.toLocaleString('id-ID')}
                  </span>
                </div>
                <p className="mt-1 text-xs text-slate-700 font-medium">{j.keterangan}</p>
                <div className="mt-1 flex items-center justify-between text-[11px] text-slate-400">
                  <span>
                    Tanggal: {j.tanggal} ({j.bulan})
                  </span>
                  <span>Oleh: {j.createdBy}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right Column (1 Col): Financial Performance Summary */}
        <div className="rounded-lg border border-slate-200 bg-white shadow-xs p-5 space-y-4">
          <div className="border-b border-slate-200 pb-2">
            <h3 className="text-xs font-bold uppercase tracking-wider text-slate-800">
              Ringkasan Kinerja & Pajak
            </h3>
            <p className="text-[11px] text-slate-400">PT Tio Mandiri Jaya</p>
          </div>

          <div className="space-y-3 text-xs">
            <div className="flex justify-between items-center">
              <span className="text-slate-600">Laba Sebelum Pajak (EBT):</span>
              <span className="font-mono font-bold text-slate-900">
                Rp {lrData.labaSebelumPajak.toLocaleString('id-ID')}
              </span>
            </div>

            <div className="flex justify-between items-center">
              <span className="text-slate-600">
                Beban Pajak ({profile.metodePajak === 'BADAN_22' ? 'PPh 22%' : 'PPh 0.5%'}):
              </span>
              <span className="font-mono font-bold text-red-600">
                (Rp {lrData.bebanPajak.toLocaleString('id-ID')})
              </span>
            </div>

            <div className="flex justify-between items-center rounded bg-emerald-50 p-2 font-bold text-emerald-900 border border-emerald-200">
              <span>Laba Bersih Setelah Pajak:</span>
              <span className="font-mono text-sm">
                Rp {lrData.labaBersihSetelahPajak.toLocaleString('id-ID')}
              </span>
            </div>

            <div className="border-t border-slate-100 pt-3 space-y-2">
              <span className="block text-[11px] font-bold uppercase tracking-wider text-slate-500">
                Quick Shortcuts:
              </span>
              <button
                onClick={() => onNavigate('coa')}
                className="w-full text-left rounded p-2 hover:bg-slate-100 text-slate-700 flex items-center justify-between"
              >
                <span>Kelola Daftar Akun (COA)</span>
                <span className="text-slate-400 font-mono text-[11px]">{akuns.length} Akun</span>
              </button>
              <button
                onClick={() => onNavigate('database')}
                className="w-full text-left rounded p-2 hover:bg-slate-100 text-slate-700 flex items-center justify-between"
              >
                <span>Ekspor Database MySQL & CI4</span>
                <Database className="h-3.5 w-3.5 text-blue-600" />
              </button>
              <button
                onClick={() => onNavigate('panduan')}
                className="w-full text-left rounded p-2 hover:bg-slate-100 text-slate-700 flex items-center justify-between"
              >
                <span>Buku Panduan Akuntansi</span>
                <BookOpen className="h-3.5 w-3.5 text-emerald-600" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};