import React, { useState, useMemo } from 'react';
import { Akun, Jurnal, ProfilPerusahaan, PeriodeAkuntansi, RasioItem } from '../../types/accounting';
import { AccountingEngine } from '../../services/accountingEngine';
import { ExcelService } from '../../services/excelService';
import { PrintHeader, PrintSignature } from '../common/PrintHeader';
import {
  TrendingUp,
  Scale,
  ShieldCheck,
  Zap,
  Activity,
  Printer,
  Download,
  CheckCircle2,
  AlertTriangle,
  HelpCircle,
  Sliders,
  DollarSign,
  ArrowRight,
  Info,
  Layers,
  Sparkles,
  PieChart,
} from 'lucide-react';

interface AnalisisRasioViewProps {
  akuns: Akun[];
  journals: Jurnal[];
  profile: ProfilPerusahaan;
  activePeriode: PeriodeAkuntansi;
  onNavigateToNeraca?: () => void;
  onNavigateToLabaRugi?: () => void;
}

export const AnalisisRasioView: React.FC<AnalisisRasioViewProps> = ({
  akuns,
  journals,
  profile,
  activePeriode,
  onNavigateToNeraca,
  onNavigateToLabaRugi,
}) => {
  const [activeCategory, setActiveCategory] = useState<
    'all' | 'likuiditas' | 'solvabilitas' | 'profitabilitas' | 'aktivitas' | 'rekomendasi'
  >('all');

  // Simulator State ("What-If" Stress Test)
  const [showSimulator, setShowSimulator] = useState(false);
  const [simPelunasanUtang, setSimPelunasanUtang] = useState<number>(0);
  const [simPiutangCair, setSimPiutangCair] = useState<number>(0);
  const [simTambahanUtangBank, setSimTambahanUtangBank] = useState<number>(0);

  // Core Ratio Data computed dynamically from active trial balance & income statement for the active period
  const data = useMemo(() => {
    const activeJournals = AccountingEngine.filterJurnal(journals, activePeriode?.namaPeriode);
    return AccountingEngine.calculateAnalisisRasio(akuns, activeJournals, profile);
  }, [akuns, journals, profile, activePeriode?.namaPeriode]);

  // Simulated Metrics
  const simulated = useMemo(() => {
    const orig = data.ringkasanNeraca;
    const simKas = orig.kasDanBank + simPiutangCair - simPelunasanUtang + simTambahanUtangBank;
    const simPiutang = Math.max(0, orig.piutangLancar - simPiutangCair);
    const simAsetLancar = orig.totalAktivaLancar - simPelunasanUtang + simTambahanUtangBank;
    const simUtangLancar = Math.max(1, orig.totalKewajibanLancar - simPelunasanUtang);
    const simUtangPanjang = orig.totalKewajibanJangkaPanjang + simTambahanUtangBank;
    const simTotalUtang = simUtangLancar + simUtangPanjang;
    const simTotalAset = orig.totalAktiva - simPelunasanUtang + simTambahanUtangBank;
    const simEkuitas = orig.totalEkuitas;

    const simCR = simUtangLancar > 0 ? simAsetLancar / simUtangLancar : 0;
    const simQR = simUtangLancar > 0 ? (simKas + simPiutang) / simUtangLancar : 0;
    const simDER = simEkuitas > 0 ? (simTotalUtang / simEkuitas) * 100 : 0;
    const simDAR = simTotalAset > 0 ? (simTotalUtang / simTotalAset) * 100 : 0;

    return {
      simAsetLancar,
      simUtangLancar,
      simTotalUtang,
      simCR,
      simQR,
      simDER,
      simDAR,
      diffCR: simCR - data.likuiditas.currentRatio.nilai,
      diffQR: simQR - data.likuiditas.quickRatio.nilai,
      diffDER: simDER - data.solvabilitas.debtToEquityRatio.nilai,
    };
  }, [data, simPelunasanUtang, simPiutangCair, simTambahanUtangBank]);

  // Export to Excel handler
  const handleExportExcel = () => {
    const headers = [
      'Kategori Rasio',
      'Nama Rasio Finansial',
      'Singkatan',
      'Formula Perhitungan',
      'Nilai Aktual',
      'Standar Acuan',
      'Status Kesehatan',
      'Interpretasi Manajerial',
    ];

    const allRatios: RasioItem[] = [
      data.likuiditas.currentRatio,
      data.likuiditas.quickRatio,
      data.likuiditas.cashRatio,
      data.likuiditas.netWorkingCapital,
      data.solvabilitas.debtToAssetRatio,
      data.solvabilitas.debtToEquityRatio,
      data.solvabilitas.longTermDebtToEquityRatio,
      data.solvabilitas.equityRatio,
      data.solvabilitas.equityMultiplier,
      data.profitabilitas.grossProfitMargin,
      data.profitabilitas.netProfitMargin,
      data.profitabilitas.returnOnAssets,
      data.profitabilitas.returnOnEquity,
      data.profitabilitas.operatingProfitMargin,
      data.aktivitas.totalAssetTurnover,
      data.aktivitas.workingCapitalTurnover,
      data.aktivitas.cashTurnover,
    ];

    const rows: (string | number)[][] = allRatios.map((r) => [
      r.kategori,
      r.namaRasio,
      r.singkatan,
      r.formula,
      r.nilaiFormat,
      r.standarIdeal,
      r.status,
      r.implikasi,
    ]);

    // Add Executive Summary block at bottom
    rows.push(['', '', '', '', '', '', '', '']);
    rows.push(['RINGKASAN EKSEKUTIF', '', '', '', '', '', '', '']);
    rows.push(['Skor Kesehatan Finansial Global', `${data.healthScore} / 100`, '', '', '', '', '', '']);
    rows.push(['Peringkat / Rating', data.healthRating, '', '', '', '', '', '']);
    rows.push(['Deskripsi Evaluasi', data.healthDescription, '', '', '', '', '', '']);

    ExcelService.exportToStyledExcel(
      `Analisis_Rasio_Keuangan_${profile.namaPerusahaan.replace(/\s+/g, '_')}`,
      'Analisis Rasio Keuangan',
      headers,
      rows
    );
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="space-y-6 print:space-y-4">
      {/* 1. Header Card (Screen View) */}
      <div className="no-print rounded-xl border border-slate-200 bg-white p-5 shadow-xs">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="rounded-xl bg-blue-600 p-2.5 text-white shadow-xs">
              <Scale className="h-6 w-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-bold tracking-tight text-slate-900">
                  Analisis Rasio Keuangan & Kesehatan Finansial
                </h1>
                <span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-bold text-blue-800">
                  Otomatis Berbasis Neraca & SAK
                </span>
              </div>
              <p className="text-xs text-slate-500">
                {profile.namaPerusahaan} • Periode Pembukuan: {activePeriode.namaPeriode} • Standar Rasio: Likuiditas, Solvabilitas & DuPont
              </p>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <button
              onClick={() => setShowSimulator(!showSimulator)}
              className={`flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-xs font-semibold transition-all cursor-pointer ${
                showSimulator
                  ? 'bg-amber-600 text-white shadow-xs'
                  : 'bg-amber-50 text-amber-800 border border-amber-300 hover:bg-amber-100'
              }`}
            >
              <Sliders className="h-3.5 w-3.5" />
              <span>{showSimulator ? 'Tutup Simulator' : 'Simulasi Stress-Test'}</span>
            </button>
            <button
              onClick={handleExportExcel}
              className="flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 shadow-xs cursor-pointer"
            >
              <Download className="h-3.5 w-3.5 text-emerald-600" />
              <span>Ekspor Excel (.xlsx)</span>
            </button>
            <button
              onClick={handlePrint}
              className="flex items-center gap-1.5 rounded-lg bg-blue-700 px-3.5 py-2 text-xs font-semibold text-white hover:bg-blue-800 shadow-xs cursor-pointer"
            >
              <Printer className="h-3.5 w-3.5" />
              <span>Cetak Analisis Resmi</span>
            </button>
          </div>
        </div>
      </div>

      {/* Official Print Header */}
      <div className="hidden print:block">
        <PrintHeader
          profile={profile}
          title="LAPORAN ANALISIS RASIO KEUANGAN & EVALUASI KESEHATAN FINANSIAL"
          periode={activePeriode.namaPeriode}
        />
      </div>

      {/* 2. Executive Financial Health Score Board */}
      <div className="rounded-xl border border-slate-200 bg-linear-to-br from-slate-900 via-slate-800 to-blue-950 p-6 text-white shadow-md">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-12 items-center">
          {/* Health Score Gauge */}
          <div className="lg:col-span-4 flex flex-col items-center justify-center border-b border-slate-700 pb-6 lg:border-b-0 lg:border-r lg:pr-6 lg:pb-0">
            <span className="text-[11px] font-bold tracking-widest text-slate-300 uppercase">
              Composite Financial Health Index
            </span>

            <div className="relative my-3 flex items-center justify-center">
              <svg className="h-36 w-36 transform -rotate-90">
                <circle
                  cx="72"
                  cy="72"
                  r="58"
                  stroke="currentColor"
                  strokeWidth="12"
                  className="text-slate-700/60"
                  fill="transparent"
                />
                <circle
                  cx="72"
                  cy="72"
                  r="58"
                  stroke="currentColor"
                  strokeWidth="12"
                  className="text-emerald-400 transition-all duration-1000 ease-out"
                  fill="transparent"
                  strokeDasharray={2 * Math.PI * 58}
                  strokeDashoffset={2 * Math.PI * 58 * (1 - data.healthScore / 100)}
                  strokeLinecap="round"
                />
              </svg>
              <div className="absolute flex flex-col items-center justify-center text-center">
                <span className="text-4xl font-black tracking-tight text-white">
                  {data.healthScore}
                </span>
                <span className="text-[11px] font-semibold text-slate-300">/ 100 Poin</span>
              </div>
            </div>

            <div className="text-center">
              <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/20 border border-emerald-400/40 px-3.5 py-1 text-xs font-bold text-emerald-300">
                <ShieldCheck className="h-4 w-4" />
                {data.healthRating}
              </span>
            </div>
          </div>

          {/* Health Summary & Key Pillar Scores */}
          <div className="lg:col-span-8 space-y-4">
            <div>
              <div className="flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-cyan-400" />
                <h3 className="text-sm font-bold uppercase tracking-wider text-cyan-300">
                  Diagnosis Kesehatan Finansial Eksekutif
                </h3>
              </div>
              <p className="mt-1 text-xs text-slate-200 leading-relaxed">
                {data.healthDescription}
              </p>
            </div>

            {/* 4 Pillars Progress Bars */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
              {/* Likuiditas Pillar */}
              <div className="rounded-lg bg-slate-800/80 border border-slate-700/70 p-3">
                <div className="flex justify-between text-xs font-semibold mb-1.5">
                  <span className="flex items-center gap-1.5 text-slate-200">
                    <TrendingUp className="h-3.5 w-3.5 text-emerald-400" />
                    Likuiditas Jangka Pendek
                  </span>
                  <span className="text-emerald-400 font-bold">CR {data.likuiditas.currentRatio.nilai}x (Prima)</span>
                </div>
                <div className="h-2 w-full rounded-full bg-slate-700 overflow-hidden">
                  <div className="h-full bg-emerald-500 rounded-full" style={{ width: '95%' }} />
                </div>
                <span className="mt-1.5 block text-[10px] text-slate-400">
                  Kas & Piutang: Rp {(data.ringkasanNeraca.kasDanBank + data.ringkasanNeraca.piutangLancar).toLocaleString('id-ID')}
                </span>
              </div>

              {/* Solvabilitas Pillar */}
              <div className="rounded-lg bg-slate-800/80 border border-slate-700/70 p-3">
                <div className="flex justify-between text-xs font-semibold mb-1.5">
                  <span className="flex items-center gap-1.5 text-slate-200">
                    <ShieldCheck className="h-3.5 w-3.5 text-blue-400" />
                    Solvabilitas & Leverage
                  </span>
                  <span className="text-blue-400 font-bold">DER {data.solvabilitas.debtToEquityRatio.nilai}%</span>
                </div>
                <div className="h-2 w-full rounded-full bg-slate-700 overflow-hidden">
                  <div className="h-full bg-blue-500 rounded-full" style={{ width: '92%' }} />
                </div>
                <span className="mt-1.5 block text-[10px] text-slate-400">
                  Total Ekuitas: Rp {data.ringkasanNeraca.totalEkuitas.toLocaleString('id-ID')}
                </span>
              </div>

              {/* Profitabilitas Pillar */}
              <div className="rounded-lg bg-slate-800/80 border border-slate-700/70 p-3">
                <div className="flex justify-between text-xs font-semibold mb-1.5">
                  <span className="flex items-center gap-1.5 text-slate-200">
                    <DollarSign className="h-3.5 w-3.5 text-amber-400" />
                    Profitabilitas & Margin
                  </span>
                  <span className="text-amber-400 font-bold">NPM {data.profitabilitas.netProfitMargin.nilai}%</span>
                </div>
                <div className="h-2 w-full rounded-full bg-slate-700 overflow-hidden">
                  <div className="h-full bg-amber-500 rounded-full" style={{ width: '88%' }} />
                </div>
                <span className="mt-1.5 block text-[10px] text-slate-400">
                  Laba Bersih Setelah Pajak: Rp {data.ringkasanNeraca.labaBersihSetelahPajak.toLocaleString('id-ID')}
                </span>
              </div>

              {/* Aktivitas Pillar */}
              <div className="rounded-lg bg-slate-800/80 border border-slate-700/70 p-3">
                <div className="flex justify-between text-xs font-semibold mb-1.5">
                  <span className="flex items-center gap-1.5 text-slate-200">
                    <Activity className="h-3.5 w-3.5 text-purple-400" />
                    Efisiensi Modal Kerja
                  </span>
                  <span className="text-purple-400 font-bold">NWC Surplus</span>
                </div>
                <div className="h-2 w-full rounded-full bg-slate-700 overflow-hidden">
                  <div className="h-full bg-purple-500 rounded-full" style={{ width: '90%' }} />
                </div>
                <span className="mt-1.5 block text-[10px] text-slate-400">
                  Modal Kerja Bersih: Rp {data.likuiditas.netWorkingCapital.nilai.toLocaleString('id-ID')}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 3. Interactive Scenario Simulator ("What-If Stress Test") */}
      {showSimulator && (
        <div className="no-print rounded-xl border border-amber-300 bg-amber-50/70 p-5 shadow-xs transition-all">
          <div className="flex items-center justify-between border-b border-amber-200 pb-3 mb-4">
            <div className="flex items-center gap-2">
              <Sliders className="h-5 w-5 text-amber-700" />
              <div>
                <h3 className="text-sm font-bold text-amber-900">
                  Simulator Finansial & Stress-Test Neraca (What-If Analysis)
                </h3>
                <p className="text-xs text-amber-700">
                  Geser parameter di bawah untuk melihat simulasi dampak arus kas langsung terhadap rasio likuiditas dan utang:
                </p>
              </div>
            </div>
            <button
              onClick={() => {
                setSimPelunasanUtang(0);
                setSimPiutangCair(0);
                setSimTambahanUtangBank(0);
              }}
              className="text-xs text-amber-800 underline hover:text-amber-950 font-semibold"
            >
              Reset Simulasi
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            {/* Input 1: Pelunasan Utang Lancar */}
            <div className="bg-white p-3 rounded-lg border border-amber-200">
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Pelunasan Utang Lancar Segera (Kas Berkurang):
              </label>
              <div className="text-sm font-mono font-bold text-amber-800 mb-2">
                Rp {simPelunasanUtang.toLocaleString('id-ID')}
              </div>
              <input
                type="range"
                min="0"
                max={data.ringkasanNeraca.totalKewajibanLancar}
                step="5000000"
                value={simPelunasanUtang}
                onChange={(e) => setSimPelunasanUtang(Number(e.target.value))}
                className="w-full accent-amber-600"
              />
            </div>

            {/* Input 2: Percepatan Penagihan Piutang */}
            <div className="bg-white p-3 rounded-lg border border-amber-200">
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Pencairan Piutang Menjadi Kas Tunai:
              </label>
              <div className="text-sm font-mono font-bold text-emerald-800 mb-2">
                Rp {simPiutangCair.toLocaleString('id-ID')}
              </div>
              <input
                type="range"
                min="0"
                max={data.ringkasanNeraca.piutangLancar}
                step="10000000"
                value={simPiutangCair}
                onChange={(e) => setSimPiutangCair(Number(e.target.value))}
                className="w-full accent-emerald-600"
              />
            </div>

            {/* Input 3: Tambahan Pinjaman / Modal Asing */}
            <div className="bg-white p-3 rounded-lg border border-amber-200">
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Fasilitas Pinjaman Bank Baru (Kas & Utang +):
              </label>
              <div className="text-sm font-mono font-bold text-blue-800 mb-2">
                Rp {simTambahanUtangBank.toLocaleString('id-ID')}
              </div>
              <input
                type="range"
                min="0"
                max="200000000"
                step="10000000"
                value={simTambahanUtangBank}
                onChange={(e) => setSimTambahanUtangBank(Number(e.target.value))}
                className="w-full accent-blue-600"
              />
            </div>
          </div>

          {/* Real-time comparison table */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div className="bg-white p-2.5 rounded-lg border border-amber-200 text-center">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Simulasi Current Ratio</span>
              <div className="text-base font-bold font-mono text-slate-900 mt-0.5">
                {simulated.simCR.toFixed(2)}x
              </div>
              <span className={`text-[10px] font-bold ${simulated.diffCR >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
                {simulated.diffCR >= 0 ? `+${simulated.diffCR.toFixed(2)}x` : `${simulated.diffCR.toFixed(2)}x`} vs aktual
              </span>
            </div>

            <div className="bg-white p-2.5 rounded-lg border border-amber-200 text-center">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Simulasi Quick Ratio</span>
              <div className="text-base font-bold font-mono text-slate-900 mt-0.5">
                {simulated.simQR.toFixed(2)}x
              </div>
              <span className={`text-[10px] font-bold ${simulated.diffQR >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
                {simulated.diffQR >= 0 ? `+${simulated.diffQR.toFixed(2)}x` : `${simulated.diffQR.toFixed(2)}x`} vs aktual
              </span>
            </div>

            <div className="bg-white p-2.5 rounded-lg border border-amber-200 text-center">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Simulasi DER (Utang/Modal)</span>
              <div className="text-base font-bold font-mono text-slate-900 mt-0.5">
                {simulated.simDER.toFixed(1)}%
              </div>
              <span className={`text-[10px] font-bold ${simulated.diffDER <= 0 ? 'text-emerald-600' : 'text-amber-600'}`}>
                {simulated.diffDER <= 0 ? `${simulated.diffDER.toFixed(1)}% (Lebih Sehat)` : `+${simulated.diffDER.toFixed(1)}%`}
              </span>
            </div>

            <div className="bg-white p-2.5 rounded-lg border border-amber-200 text-center">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Simulasi DAR (Utang/Aset)</span>
              <div className="text-base font-bold font-mono text-slate-900 mt-0.5">
                {simulated.simDAR.toFixed(1)}%
              </div>
              <span className="text-[10px] text-slate-500 font-medium">Batas aman &lt; 50%</span>
            </div>
          </div>
        </div>
      )}

      {/* 4. Category Navigation Tabs */}
      <div className="no-print flex flex-wrap gap-1.5 border-b border-slate-200 pb-1">
        <button
          onClick={() => setActiveCategory('all')}
          className={`px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'all'
              ? 'bg-blue-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          Semua Rasio (17 Indikator)
        </button>
        <button
          onClick={() => setActiveCategory('likuiditas')}
          className={`flex items-center gap-1.5 px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'likuiditas'
              ? 'bg-emerald-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <TrendingUp className="h-3.5 w-3.5" />
          <span>1. Rasio Likuiditas (4)</span>
        </button>
        <button
          onClick={() => setActiveCategory('solvabilitas')}
          className={`flex items-center gap-1.5 px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'solvabilitas'
              ? 'bg-blue-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <ShieldCheck className="h-3.5 w-3.5" />
          <span>2. Rasio Solvabilitas (5)</span>
        </button>
        <button
          onClick={() => setActiveCategory('profitabilitas')}
          className={`flex items-center gap-1.5 px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'profitabilitas'
              ? 'bg-amber-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <DollarSign className="h-3.5 w-3.5" />
          <span>3. Rasio Profitabilitas (5)</span>
        </button>
        <button
          onClick={() => setActiveCategory('aktivitas')}
          className={`flex items-center gap-1.5 px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'aktivitas'
              ? 'bg-purple-600 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <Activity className="h-3.5 w-3.5" />
          <span>4. Rasio Aktivitas (3)</span>
        </button>
        <button
          onClick={() => setActiveCategory('rekomendasi')}
          className={`flex items-center gap-1.5 px-4 py-2 text-xs font-bold rounded-lg transition-all cursor-pointer ${
            activeCategory === 'rekomendasi'
              ? 'bg-slate-900 text-white shadow-xs'
              : 'text-slate-600 hover:bg-slate-100'
          }`}
        >
          <Zap className="h-3.5 w-3.5 text-yellow-400" />
          <span>Rekomendasi Manajerial & Solusi</span>
        </button>
      </div>

      {/* 5. Ratio Cards Grid */}
      <div className="space-y-8">
        {/* SECTION 1: LIKUIDITAS */}
        {(activeCategory === 'all' || activeCategory === 'likuiditas') && (
          <div className="space-y-3">
            <div className="flex items-center justify-between border-b border-emerald-200 pb-2">
              <div className="flex items-center gap-2">
                <div className="rounded-md bg-emerald-100 p-1.5 text-emerald-800">
                  <TrendingUp className="h-4 w-4" />
                </div>
                <div>
                  <h2 className="text-sm font-bold uppercase tracking-wider text-emerald-950">
                    1. Rasio Likuiditas (Liquidity Ratios)
                  </h2>
                  <p className="text-[11px] text-slate-500">
                    Menilai kemampuan jangka pendek perseroan dalam memenuhi kewajiban yang segera jatuh tempo.
                  </p>
                </div>
              </div>
              <span className="text-xs font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200">
                Status: PRIMA &amp; SANGAT LIKUID
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <RatioCard item={data.likuiditas.currentRatio} />
              <RatioCard item={data.likuiditas.quickRatio} />
              <RatioCard item={data.likuiditas.cashRatio} />
              <RatioCard item={data.likuiditas.netWorkingCapital} />
            </div>
          </div>
        )}

        {/* SECTION 2: SOLVABILITAS */}
        {(activeCategory === 'all' || activeCategory === 'solvabilitas') && (
          <div className="space-y-3">
            <div className="flex items-center justify-between border-b border-blue-200 pb-2">
              <div className="flex items-center gap-2">
                <div className="rounded-md bg-blue-100 p-1.5 text-blue-800">
                  <ShieldCheck className="h-4 w-4" />
                </div>
                <div>
                  <h2 className="text-sm font-bold uppercase tracking-wider text-blue-950">
                    2. Rasio Solvabilitas / Struktur Modal (Solvency Ratios)
                  </h2>
                  <p className="text-[11px] text-slate-500">
                    Mengukur seberapa jauh aktiva perseroan dibiayai oleh utang dibandingkan dengan modal sendiri (ekuitas).
                  </p>
                </div>
              </div>
              <span className="text-xs font-bold text-blue-700 bg-blue-50 px-2.5 py-1 rounded-full border border-blue-200">
                Leverage Rendah (Aman)
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <RatioCard item={data.solvabilitas.debtToAssetRatio} />
              <RatioCard item={data.solvabilitas.debtToEquityRatio} />
              <RatioCard item={data.solvabilitas.longTermDebtToEquityRatio} />
              <RatioCard item={data.solvabilitas.equityRatio} />
              <RatioCard item={data.solvabilitas.equityMultiplier} />
            </div>
          </div>
        )}

        {/* SECTION 3: PROFITABILITAS */}
        {(activeCategory === 'all' || activeCategory === 'profitabilitas') && (
          <div className="space-y-3">
            <div className="flex items-center justify-between border-b border-amber-200 pb-2">
              <div className="flex items-center gap-2">
                <div className="rounded-md bg-amber-100 p-1.5 text-amber-800">
                  <DollarSign className="h-4 w-4" />
                </div>
                <div>
                  <h2 className="text-sm font-bold uppercase tracking-wider text-amber-950">
                    3. Rasio Profitabilitas &amp; Rentabilitas (Profitability Ratios)
                  </h2>
                  <p className="text-[11px] text-slate-500">
                    Efektivitas perseroan dalam menghasilkan laba dari pendapatan, pengelolaan aset, dan modal saham.
                  </p>
                </div>
              </div>
              <span className="text-xs font-bold text-amber-700 bg-amber-50 px-2.5 py-1 rounded-full border border-amber-200">
                Return Sehat
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <RatioCard item={data.profitabilitas.grossProfitMargin} />
              <RatioCard item={data.profitabilitas.netProfitMargin} />
              <RatioCard item={data.profitabilitas.returnOnAssets} />
              <RatioCard item={data.profitabilitas.returnOnEquity} />
              <RatioCard item={data.profitabilitas.operatingProfitMargin} />
            </div>
          </div>
        )}

        {/* SECTION 4: AKTIVITAS */}
        {(activeCategory === 'all' || activeCategory === 'aktivitas') && (
          <div className="space-y-3">
            <div className="flex items-center justify-between border-b border-purple-200 pb-2">
              <div className="flex items-center gap-2">
                <div className="rounded-md bg-purple-100 p-1.5 text-purple-800">
                  <Activity className="h-4 w-4" />
                </div>
                <div>
                  <h2 className="text-sm font-bold uppercase tracking-wider text-purple-950">
                    4. Rasio Aktivitas &amp; Perputaran Aset (Activity Ratios)
                  </h2>
                  <p className="text-[11px] text-slate-500">
                    Kecepatan dan efisiensi operasional perseroan dalam mengkonversi aset menjadi pendapatan kas.
                  </p>
                </div>
              </div>
              <span className="text-xs font-bold text-purple-700 bg-purple-50 px-2.5 py-1 rounded-full border border-purple-200">
                Perputaran Lancar
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <RatioCard item={data.aktivitas.totalAssetTurnover} />
              <RatioCard item={data.aktivitas.workingCapitalTurnover} />
              <RatioCard item={data.aktivitas.cashTurnover} />
            </div>
          </div>
        )}

        {/* SECTION 5: REKOMENDASI & DIAGNOSIS MANAJEMEN */}
        {(activeCategory === 'all' || activeCategory === 'rekomendasi') && (
          <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs space-y-4">
            <div className="flex items-center gap-2 border-b border-slate-200 pb-3">
              <Zap className="h-5 w-5 text-amber-500" />
              <div>
                <h3 className="text-sm font-bold uppercase tracking-wider text-slate-900">
                  Ikhtisar &amp; Rekomendasi Finansial Direksi (Management Executive Action Points)
                </h3>
                <p className="text-xs text-slate-500">
                  Berdasarkan telaah Neraca dan Laba Rugi {profile.namaPerusahaan} per {activePeriode.namaPeriode}
                </p>
              </div>
            </div>

            <div className="space-y-2.5">
              {data.rekomendasiManajemen.map((rec, idx) => (
                <div
                  key={idx}
                  className="flex items-start gap-3 rounded-lg bg-slate-50 border border-slate-200 p-3 text-xs text-slate-700"
                >
                  <div className="mt-0.5 rounded-full bg-emerald-600 text-white p-1 shrink-0">
                    <CheckCircle2 className="h-3.5 w-3.5" />
                  </div>
                  <div className="leading-relaxed">
                    <strong className="text-slate-900 block font-semibold mb-0.5">
                      Poin Evaluasi #{idx + 1}:
                    </strong>
                    {rec}
                  </div>
                </div>
              ))}
            </div>

            {/* Quick Navigation to Related Financial Statements */}
            <div className="no-print pt-3 border-t border-slate-100 flex flex-wrap items-center justify-between gap-3 text-xs">
              <span className="text-slate-500">
                Butuh memeriksa rincian akun buku besar pendukung rasio ini?
              </span>
              <div className="flex gap-2">
                {onNavigateToNeraca && (
                  <button
                    onClick={onNavigateToNeraca}
                    className="flex items-center gap-1 font-semibold text-blue-700 hover:underline cursor-pointer"
                  >
                    Buka Neraca (Balance Sheet) <ArrowRight className="h-3 w-3" />
                  </button>
                )}
                {onNavigateToLabaRugi && (
                  <button
                    onClick={onNavigateToLabaRugi}
                    className="flex items-center gap-1 font-semibold text-emerald-700 hover:underline cursor-pointer ml-3"
                  >
                    Buka Laba Rugi <ArrowRight className="h-3 w-3" />
                  </button>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Official Signatures (For Print & Evaluation) */}
      <div className="pt-6">
        <PrintSignature profile={profile} />
      </div>
    </div>
  );
};

// Reusable Ratio Card Component
const RatioCard: React.FC<{ item: RasioItem }> = ({ item }) => {
  return (
    <div className="rounded-xl border border-slate-200 bg-white p-4.5 shadow-xs hover:border-blue-300 transition-all flex flex-col justify-between">
      <div>
        {/* Header: Title, Acronym, and Status Badge */}
        <div className="flex items-start justify-between gap-2 mb-2">
          <div>
            <div className="flex items-center gap-1.5">
              <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-mono font-bold text-slate-700 border border-slate-300">
                {item.singkatan}
              </span>
              <h4 className="text-xs font-bold text-slate-800 leading-snug">
                {item.namaRasio}
              </h4>
            </div>
            <span className="text-[10px] text-slate-400 font-medium">{item.kategori}</span>
          </div>

          <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-bold border shrink-0 ${item.badgeColor}`}>
            {item.status}
          </span>
        </div>

        {/* Big Value Display */}
        <div className="my-2.5 flex items-baseline justify-between border-y border-slate-100 py-2">
          <div>
            <span className="text-[10px] text-slate-500 uppercase font-semibold block">
              Nilai Rasio Aktual:
            </span>
            <div className="text-xl font-mono font-black text-slate-900 tracking-tight">
              {item.nilaiFormat}
            </div>
          </div>

          <div className="text-right">
            <span className="text-[10px] text-slate-500 uppercase font-semibold block">
              Standar Ideal:
            </span>
            <span className="text-xs font-mono font-bold text-blue-700 bg-blue-50 px-2 py-0.5 rounded border border-blue-200">
              {item.standarIdeal}
            </span>
          </div>
        </div>

        {/* Arithmetic Formula Box */}
        <div className="rounded-lg bg-slate-50 border border-slate-200 p-2.5 text-[11px] font-mono text-slate-700 mb-2.5 space-y-1">
          <div className="text-[10px] text-slate-400 font-sans uppercase font-semibold">
            Formula Perhitungan:
          </div>
          <div className="font-semibold text-slate-800">{item.formula}</div>
          <div className="text-[10px] text-slate-500 border-t border-slate-200 pt-1 flex justify-between">
            <span>{item.komponenPembilang.label}: Rp {item.komponenPembilang.nilai.toLocaleString('id-ID')}</span>
            <span>÷</span>
            <span>{item.komponenPenyebut.label}: Rp {item.komponenPenyebut.nilai.toLocaleString('id-ID')}</span>
          </div>
        </div>

        {/* Description & Implication */}
        <p className="text-[11px] text-slate-600 leading-relaxed mb-2">
          {item.penjelasan}
        </p>
      </div>

      <div className="rounded bg-blue-50/70 border-l-2 border-blue-600 p-2 text-[11px] text-blue-950 font-medium">
        <strong>Implikasi:</strong> {item.implikasi}
      </div>
    </div>
  );
};