import React, { useState } from 'react';
import { Proposal, UserRole } from '../types';
import { formatRupiah, getProposalStatusBadge } from '../data/storage';
import { REVIEWER_LIST } from '../data/initialData';
import {
  X,
  BookOpen,
  Users,
  Building,
  DollarSign,
  Award,
  CheckCircle2,
  Clock,
  FileText,
  AlertTriangle,
  Download,
  Calendar,
  ExternalLink,
  ShieldCheck,
  UserCheck,
  Printer,
  ChevronRight,
  Sparkles
} from 'lucide-react';

interface ProposalDetailModalProps {
  proposal: Proposal;
  userRole: UserRole;
  onClose: () => void;
  onOpenReviewModal: (proposal: Proposal) => void;
  onOpenReportModal: (proposal: Proposal) => void;
  onUpdateStatus: (proposalId: string, newStatus: Proposal['status'], approvedBudget?: number) => void;
  onAssignReviewer: (proposalId: string, reviewer: { id: string; name: string; nidn: string }) => void;
  onPrintOfficialDoc: (proposal: Proposal, type: 'lembar_pengesahan' | 'berita_acara' | 'kontrak_spk') => void;
}

export const ProposalDetailModal: React.FC<ProposalDetailModalProps> = ({
  proposal,
  userRole,
  onClose,
  onOpenReviewModal,
  onOpenReportModal,
  onUpdateStatus,
  onAssignReviewer,
  onPrintOfficialDoc,
}) => {
  const [activeTab, setActiveTab] = useState<'info' | 'tim' | 'mitra' | 'rab' | 'review' | 'monev' | 'luaran'>('info');
  const [selectedReviewerId, setSelectedReviewerId] = useState('');
  const [approvedBudgetInput, setApprovedBudgetInput] = useState<number>(
    proposal.approvedBudget || proposal.requestedBudget
  );

  const badge = getProposalStatusBadge(proposal.status);
  const isResearch = proposal.type === 'penelitian';

  const handleAssign = () => {
    const rev = REVIEWER_LIST.find((r) => r.id === selectedReviewerId);
    if (rev) {
      onAssignReviewer(proposal.id, { id: rev.id, name: rev.name, nidn: rev.nidn });
      setSelectedReviewerId('');
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-5xl max-h-[92vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        {/* Modal Header */}
        <div className="px-6 py-4 bg-slate-900 text-white flex items-start justify-between gap-4">
          <div className="space-y-1">
            <div className="flex items-center gap-2 flex-wrap">
              <span
                className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded ${
                  isResearch ? 'bg-blue-600 text-white' : 'bg-emerald-600 text-white'
                }`}
              >
                {isResearch ? 'Penelitian LPPM' : 'Pengabdian kepada Masyarakat (PKM)'}
              </span>
              <span className="text-xs font-mono text-slate-400">{proposal.code}</span>
              <span className="text-xs text-slate-400">• {proposal.academicYear} ({proposal.batch})</span>
            </div>
            <h2 className="text-base sm:text-lg font-bold text-white leading-snug">
              {proposal.title}
            </h2>
            <p className="text-xs text-slate-300">
              Ketua: <span className="font-semibold text-white">{proposal.leader.name}</span> (NIDN: {proposal.leader.nidn}) — {proposal.leader.department}, {proposal.leader.faculty}
            </p>
          </div>

          <button
            onClick={onClose}
            className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition-colors cursor-pointer shrink-0"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Tab Navigation Bar */}
        <div className="bg-slate-50 border-b border-slate-200 px-6 flex items-center justify-between gap-2 overflow-x-auto no-scrollbar">
          <div className="flex items-center gap-1 text-xs">
            <button
              onClick={() => setActiveTab('info')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                activeTab === 'info'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <FileText className="w-4 h-4" />
              Substansi & Abstrak
            </button>

            <button
              onClick={() => setActiveTab('tim')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                activeTab === 'tim'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <Users className="w-4 h-4" />
              Susunan Tim ({proposal.members.length + 1})
            </button>

            {proposal.partner && (
              <button
                onClick={() => setActiveTab('mitra')}
                className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                  activeTab === 'mitra'
                    ? 'border-blue-600 text-blue-700'
                    : 'border-transparent text-slate-600 hover:text-slate-900'
                }`}
              >
                <Building className="w-4 h-4" />
                Mitra Sasaran
              </button>
            )}

            <button
              onClick={() => setActiveTab('rab')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                activeTab === 'rab'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <DollarSign className="w-4 h-4" />
              Anggaran (RAB)
            </button>

            <button
              onClick={() => setActiveTab('review')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 relative ${
                activeTab === 'review'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <CheckCircle2 className="w-4 h-4" />
              Hasil Review
              {proposal.reviews.length > 0 && (
                <span className="w-2 h-2 rounded-full bg-emerald-500"></span>
              )}
            </button>

            <button
              onClick={() => setActiveTab('monev')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                activeTab === 'monev'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <Clock className="w-4 h-4" />
              Monev & Laporan
            </button>

            <button
              onClick={() => setActiveTab('luaran')}
              className={`px-3.5 py-3 font-semibold border-b-2 cursor-pointer transition-colors flex items-center gap-1.5 ${
                activeTab === 'luaran'
                  ? 'border-blue-600 text-blue-700'
                  : 'border-transparent text-slate-600 hover:text-slate-900'
              }`}
            >
              <Award className="w-4 h-4" />
              Luaran Riset ({proposal.actualOutputs.length})
            </button>
          </div>

          <div className="hidden sm:flex items-center gap-2">
            <span className={`text-[10px] font-bold px-2.5 py-1 rounded-full border ${badge.bg} ${badge.color} ${badge.border}`}>
              {badge.label}
            </span>
          </div>
        </div>

        {/* Modal Body Content */}
        <div className="p-6 overflow-y-auto flex-1 text-xs space-y-6">
          {/* TAB 1: INFO & SUBSTANSI */}
          {activeTab === 'info' && (
            <div className="space-y-6">
              {/* Highlight Badges & Metadata */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-slate-50 p-4 rounded-xl border border-slate-200">
                <div>
                  <span className="text-slate-500 block text-[10px] uppercase font-bold">Skema Hibah</span>
                  <span className="font-semibold text-slate-900">{proposal.scheme}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-[10px] uppercase font-bold">Bidang Fokus RIRN</span>
                  <span className="font-semibold text-slate-900">{proposal.focusArea}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-[10px] uppercase font-bold">Target Kesiapterapan (TKT)</span>
                  <span className="font-bold text-blue-700">TKT {proposal.tktCurrent} → TKT {proposal.tktTarget}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-[10px] uppercase font-bold">Usulan Dana (RAB)</span>
                  <span className="font-bold text-emerald-700">{formatRupiah(proposal.approvedBudget || proposal.requestedBudget)}</span>
                </div>
              </div>

              {/* TKT Progress indicator visual */}
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <div className="flex justify-between items-center mb-2">
                  <span className="font-bold text-slate-900 flex items-center gap-1.5">
                    <Sparkles className="w-4 h-4 text-amber-500" />
                    Skala Tingkat Kesiapterapan Teknologi (TKT 1-9)
                  </span>
                  <span className="text-[11px] text-slate-500">
                    Posisi Saat Ini: <span className="font-bold text-slate-800">TKT {proposal.tktCurrent}</span> | Target: <span className="font-bold text-blue-600">TKT {proposal.tktTarget}</span>
                  </span>
                </div>
                <div className="grid grid-cols-9 gap-1 text-center font-mono text-[10px]">
                  {Array.from({ length: 9 }, (_, i) => i + 1).map((lvl) => {
                    const isPassed = lvl <= proposal.tktCurrent;
                    const isTarget = lvl > proposal.tktCurrent && lvl <= proposal.tktTarget;
                    return (
                      <div
                        key={lvl}
                        className={`py-1.5 rounded font-bold ${
                          isPassed
                            ? 'bg-blue-600 text-white'
                            : isTarget
                            ? 'bg-blue-100 text-blue-800 border border-blue-300'
                            : 'bg-slate-100 text-slate-400'
                        }`}
                      >
                        TKT {lvl}
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Abstrak */}
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h4 className="font-bold text-slate-900 text-sm mb-2">Ringkasan Eksekutif & Abstrak</h4>
                <p className="text-slate-700 leading-relaxed whitespace-pre-line text-justify">
                  {proposal.abstract}
                </p>

                <div className="mt-4 pt-3 border-t border-slate-100 flex flex-wrap items-center gap-2">
                  <span className="font-semibold text-slate-500">Kata Kunci:</span>
                  {proposal.keywords.map((kw, i) => (
                    <span key={i} className="bg-slate-100 text-slate-800 px-2.5 py-1 rounded-md text-[11px] font-medium">
                      #{kw}
                    </span>
                  ))}
                </div>
              </div>

              {/* Target Luaran Rencana */}
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h4 className="font-bold text-slate-900 text-sm mb-2">Target Komitmen Luaran Wajib & Tambahan</h4>
                <ul className="space-y-2">
                  {proposal.targetOutputs.map((out, idx) => (
                    <li key={idx} className="flex items-start gap-2 text-slate-700 bg-slate-50 p-2.5 rounded-lg border border-slate-200">
                      <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
                      <span>{out}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Uploaded Documents link */}
              <div className="bg-blue-50/50 border border-blue-200 p-4 rounded-xl flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center">
                    <FileText className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="font-bold text-slate-900 text-xs">
                      {proposal.fileName || `Proposal_Lengkap_${proposal.code}.pdf`}
                    </div>
                    <div className="text-slate-500 text-[11px]">Naskah Usulan Resmi Format Template LPPM (PDF)</div>
                  </div>
                </div>

                <button
                  onClick={() => alert(`Mengunduh berkas: ${proposal.fileName || 'Proposal_Lengkap.pdf'}`)}
                  className="bg-white text-blue-700 hover:bg-blue-600 hover:text-white border border-blue-300 font-semibold px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                >
                  <Download className="w-3.5 h-3.5" /> Unduh PDF
                </button>
              </div>
            </div>
          )}

          {/* TAB 2: SUSUNAN TIM */}
          {activeTab === 'tim' && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h4 className="font-bold text-slate-900 text-sm">Susunan Tim Pelaksana Riset & Pengabdian</h4>
                <span className="text-slate-500">Sesuai aturan LPPM: 1 Ketua + Maks 2 Anggota Dosen + Mahasiswa</span>
              </div>

              {/* Ketua Tim */}
              <div className="bg-blue-50/60 border border-blue-200 p-4 rounded-xl space-y-2">
                <div className="flex items-center justify-between">
                  <span className="bg-blue-600 text-white font-bold text-[10px] uppercase px-2 py-0.5 rounded">
                    Ketua Pengusul
                  </span>
                  {proposal.leader.sintaId && (
                    <span className="font-mono text-blue-800 text-[11px] font-semibold">
                      SINTA ID: {proposal.leader.sintaId}
                    </span>
                  )}
                </div>
                <h3 className="font-bold text-slate-900 text-sm">{proposal.leader.name}</h3>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-slate-600 text-[11px]">
                  <div><span className="text-slate-400">NIDN:</span> {proposal.leader.nidn}</div>
                  <div><span className="text-slate-400">Program Studi:</span> {proposal.leader.department}</div>
                  <div><span className="text-slate-400">Fakultas:</span> {proposal.leader.faculty}</div>
                  <div><span className="text-slate-400">Email:</span> {proposal.leader.email}</div>
                  {proposal.leader.googleScholarId && (
                    <div><span className="text-slate-400">Google Scholar:</span> {proposal.leader.googleScholarId}</div>
                  )}
                </div>
              </div>

              {/* Anggota Tim */}
              <div className="space-y-3">
                <h5 className="font-semibold text-slate-700">Anggota Peneliti / Pelaksana:</h5>
                {proposal.members.map((member, idx) => (
                  <div key={idx} className="bg-white border border-slate-200 p-3.5 rounded-xl space-y-1">
                    <div className="flex items-center justify-between">
                      <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded ${
                        member.roleInTeam === 'anggota_mahasiswa'
                          ? 'bg-amber-100 text-amber-800'
                          : 'bg-slate-100 text-slate-800'
                      }`}>
                        {member.roleInTeam === 'anggota_mahasiswa' ? 'Mahasiswa MBKM' : 'Dosen Anggota'}
                      </span>
                      {member.sintaId && (
                        <span className="text-[11px] text-slate-500 font-mono">SINTA: {member.sintaId}</span>
                      )}
                    </div>
                    <div className="font-bold text-slate-900">{member.name}</div>
                    <div className="text-slate-500 text-[11px]">
                      {member.department} • {member.faculty} ({member.email})
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* TAB 3: MITRA SASARAN (KHUSUS PENGMAS) */}
          {activeTab === 'mitra' && proposal.partner && (
            <div className="space-y-5">
              <div className="bg-emerald-50/60 border border-emerald-200 p-4 rounded-xl space-y-3">
                <div className="flex items-center justify-between">
                  <span className="bg-emerald-600 text-white font-bold text-[10px] uppercase px-2 py-0.5 rounded">
                    Sektor: {proposal.partner.sector}
                  </span>
                  <span className="font-semibold text-emerald-800 text-[11px] flex items-center gap-1">
                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
                    Surat Pernyataan Kesediaan Mitra: Valid & Bermaterai
                  </span>
                </div>

                <h3 className="font-bold text-slate-900 text-base">{proposal.partner.name}</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-slate-700">
                  <div>
                    <span className="text-slate-400 block text-[10px] uppercase font-bold">Alamat Mitra</span>
                    <span>{proposal.partner.address}</span>
                  </div>
                  <div>
                    <span className="text-slate-400 block text-[10px] uppercase font-bold">Narahubung & Kontak</span>
                    <span>{proposal.partner.contactPerson} ({proposal.partner.phone})</span>
                  </div>
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200 space-y-2">
                <h4 className="font-bold text-slate-900 text-xs uppercase tracking-wider">Persoalan Prioritas Mitra Sasaran</h4>
                <p className="text-slate-700 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-200">
                  {proposal.partner.problemStatement}
                </p>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200 space-y-2">
                <h4 className="font-bold text-slate-900 text-xs uppercase tracking-wider">Kontribusi & Komitmen In-Kind Mitra</h4>
                <p className="text-slate-700 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-200">
                  {proposal.partner.contribution}
                </p>
              </div>
            </div>
          )}

          {/* TAB 4: ANGGARAN BIAYA (RAB) */}
          {activeTab === 'rab' && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">Rincian Anggaran Biaya (RAB) Berdasarkan SBM</h4>
                  <p className="text-slate-500">Standar Biaya Masukan LPPM Perguruan Tinggi</p>
                </div>
                <div className="text-right">
                  <span className="text-slate-500 block text-[10px]">Total Anggaran:</span>
                  <span className="font-bold text-base text-blue-700">
                    {formatRupiah(proposal.approvedBudget || proposal.requestedBudget)}
                  </span>
                </div>
              </div>

              <div className="border border-slate-200 rounded-xl overflow-hidden">
                <table className="w-full text-left text-xs">
                  <thead className="bg-slate-50 text-slate-600 font-semibold border-b border-slate-200">
                    <tr>
                      <th className="py-2.5 px-3">Kategori Belanja</th>
                      <th className="py-2.5 px-3">Uraian Kebutuhan</th>
                      <th className="py-2.5 px-3 text-center">Volume</th>
                      <th className="py-2.5 px-3 text-right">Harga Satuan</th>
                      <th className="py-2.5 px-3 text-right">Total Biaya</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {proposal.budgetItems.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50">
                        <td className="py-2.5 px-3 font-medium text-slate-800">{item.category}</td>
                        <td className="py-2.5 px-3 text-slate-600">{item.description}</td>
                        <td className="py-2.5 px-3 text-center text-slate-600">
                          {item.volume} {item.unit}
                        </td>
                        <td className="py-2.5 px-3 text-right text-slate-600 font-mono">
                          {formatRupiah(item.unitPrice)}
                        </td>
                        <td className="py-2.5 px-3 text-right font-bold text-slate-900 font-mono">
                          {formatRupiah(item.totalPrice)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot className="bg-slate-50 font-bold border-t border-slate-200">
                    <tr>
                      <td colSpan={4} className="py-3 px-3 text-right text-slate-700">
                        Total Anggaran yang Diajukan:
                      </td>
                      <td className="py-3 px-3 text-right text-blue-800 text-sm font-mono">
                        {formatRupiah(proposal.requestedBudget)}
                      </td>
                    </tr>
                    {proposal.approvedBudget && (
                      <tr className="text-emerald-700 bg-emerald-50">
                        <td colSpan={4} className="py-2.5 px-3 text-right">
                          Pagu yang Disetujui LPPM (SK Pemenang):
                        </td>
                        <td className="py-2.5 px-3 text-right text-sm font-mono font-extrabold">
                          {formatRupiah(proposal.approvedBudget)}
                        </td>
                      </tr>
                    )}
                  </tfoot>
                </table>
              </div>
            </div>
          )}

          {/* TAB 5: HASIL REVIEW & RUBRIK */}
          {activeTab === 'review' && (
            <div className="space-y-5">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">Hasil Desk Evaluation & Rubrik Penilaian Reviewer</h4>
                  <p className="text-slate-500">Evaluasi substansi proposal oleh reviewer independen</p>
                </div>

                <button
                  onClick={() => onOpenReviewModal(proposal)}
                  className="bg-amber-600 hover:bg-amber-700 text-white font-semibold px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                >
                  <CheckCircle2 className="w-3.5 h-3.5" /> Beri Penilaian Baru
                </button>
              </div>

              {/* Reviewer Assignment status */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-3">
                <span className="font-bold text-slate-800 text-xs">Penugasan Reviewer Terdaftar:</span>
                {proposal.assignedReviewers.length === 0 ? (
                  <div className="text-amber-800 bg-amber-50 p-3 rounded-lg border border-amber-200 flex items-center gap-2">
                    <AlertTriangle className="w-4 h-4 shrink-0" />
                    <span>Belum ada reviewer yang ditugaskan oleh LPPM.</span>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {proposal.assignedReviewers.map((rev, i) => (
                      <div key={rev.id} className="bg-white p-3 rounded-lg border border-slate-200 flex items-center gap-3">
                        <div className="w-7 h-7 rounded-full bg-slate-100 text-slate-700 flex items-center justify-center font-bold text-xs">
                          {i + 1}
                        </div>
                        <div>
                          <div className="font-bold text-slate-900 text-xs">{rev.name}</div>
                          <div className="text-slate-500 text-[10px]">NIDN: {rev.nidn}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {/* Admin Assignment form */}
                {userRole === 'admin_lppm' && (
                  <div className="pt-2 flex items-center gap-2 flex-wrap">
                    <select
                      value={selectedReviewerId}
                      onChange={(e) => setSelectedReviewerId(e.target.value)}
                      className="bg-white border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs text-slate-800"
                    >
                      <option value="">Pilih Reviewer untuk Ditugaskan...</option>
                      {REVIEWER_LIST.map((r) => (
                        <option key={r.id} value={r.id}>
                          {r.name} ({r.faculty})
                        </option>
                      ))}
                    </select>
                    <button
                      onClick={handleAssign}
                      disabled={!selectedReviewerId}
                      className="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-semibold px-3 py-1.5 rounded-lg transition-colors cursor-pointer"
                    >
                      Tugaskan Reviewer
                    </button>
                  </div>
                )}
              </div>

              {/* Existing Reviews List */}
              {proposal.reviews.length === 0 ? (
                <div className="bg-white border border-dashed border-slate-300 p-8 rounded-xl text-center">
                  <Clock className="w-8 h-8 text-slate-400 mx-auto mb-2" />
                  <div className="font-semibold text-slate-700">Belum ada skor review tersimpan</div>
                  <div className="text-slate-500 text-[11px] mt-1">
                    Silakan gunakan tombol "Beri Penilaian Baru" untuk memasukkan rubrik evaluasi.
                  </div>
                </div>
              ) : (
                proposal.reviews.map((rev) => (
                  <div key={rev.id} className="bg-white border border-slate-200 rounded-xl p-5 space-y-4 shadow-xs">
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-100 pb-3">
                      <div>
                        <div className="font-bold text-slate-900 text-sm">{rev.reviewerName}</div>
                        <div className="text-slate-500 text-[11px]">
                          NIDN: {rev.reviewerNidn} • Tanggal Review: {rev.reviewDate}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-semibold px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-800 border border-emerald-200">
                          {rev.recommendation}
                        </span>
                        <div className="bg-slate-900 text-white font-black px-3 py-1 rounded-lg text-sm">
                          Skor: {rev.totalScore} / 100
                        </div>
                      </div>
                    </div>

                    {/* Criteria breakdown */}
                    <div className="space-y-2">
                      <span className="font-semibold text-slate-700 text-[11px]">Rincian Penilaian Rubrik:</span>
                      <div className="divide-y divide-slate-100 border border-slate-100 rounded-lg overflow-hidden">
                        {rev.criteria.map((c) => (
                          <div key={c.id} className="p-2.5 bg-slate-50/50 flex items-center justify-between gap-4">
                            <div>
                              <div className="font-semibold text-slate-800">{c.label} (Bobot {c.weight}%)</div>
                              <div className="text-[10px] text-slate-500">{c.description}</div>
                              {c.notes && <div className="text-[11px] text-slate-600 mt-1 italic">Catatan: "{c.notes}"</div>}
                            </div>
                            <div className="font-bold text-blue-700 bg-blue-50 px-2 py-1 rounded text-xs">
                              Nilai: {c.score} / 5
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                      <span className="font-bold text-slate-800 text-[11px] block mb-1">Catatan Kesimpulan Evaluator:</span>
                      <p className="text-slate-700 leading-relaxed">{rev.notes}</p>
                    </div>
                  </div>
                ))
              )}
            </div>
          )}

          {/* TAB 6: MONEV & LAPORAN */}
          {activeTab === 'monev' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">Monitoring & Evaluasi Pelaksanaan (Monev)</h4>
                  <p className="text-slate-500">Pelaporan kemajuan berkala 70% dan laporan akhir 100% penerima hibah</p>
                </div>

                <button
                  onClick={() => onOpenReportModal(proposal)}
                  className="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                >
                  <FileText className="w-3.5 h-3.5" /> Input / Unggah Laporan
                </button>
              </div>

              {/* Progress Report (70%) */}
              <div className="bg-white border border-slate-200 rounded-xl p-5 space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-xs">
                      1
                    </span>
                    <h5 className="font-bold text-slate-900 text-xs uppercase tracking-wider">
                      Laporan Kemajuan (Tahap 70%)
                    </h5>
                  </div>
                  {proposal.progressReport ? (
                    <span className="bg-emerald-100 text-emerald-800 px-2.5 py-0.5 rounded-full font-bold text-[10px]">
                      {proposal.progressReport.status}
                    </span>
                  ) : (
                    <span className="bg-slate-100 text-slate-500 px-2 py-0.5 rounded text-[10px]">
                      Belum Diunggah
                    </span>
                  )}
                </div>

                {proposal.progressReport ? (
                  <div className="space-y-2.5 text-xs text-slate-700">
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 bg-slate-50 p-3 rounded-lg">
                      <div><span className="text-slate-400 block text-[10px]">Capaian Fisik</span> <span className="font-bold text-blue-700">{proposal.progressReport.progressPercent}%</span></div>
                      <div><span className="text-slate-400 block text-[10px]">Realisasi Dana</span> <span className="font-bold text-slate-900">{formatRupiah(proposal.progressReport.fundExpended)}</span></div>
                      <div><span className="text-slate-400 block text-[10px]">Tanggal Unggah</span> <span>{proposal.progressReport.submittedAt}</span></div>
                    </div>
                    <div className="bg-slate-50 p-3 rounded-lg border border-slate-100">
                      <span className="font-semibold text-slate-700 block mb-1">Ringkasan Kemajuan:</span>
                      <p className="text-slate-600">{proposal.progressReport.summary}</p>
                    </div>
                    {proposal.progressReport.feedback && (
                      <div className="text-blue-900 bg-blue-50/70 p-2.5 rounded-lg border border-blue-200">
                        <span className="font-semibold">Catatan Reviewer LPPM:</span> {proposal.progressReport.feedback}
                      </div>
                    )}
                  </div>
                ) : (
                  <p className="text-xs text-slate-500 italic">
                    Ketua peneliti belum mengunggah berkas laporan kemajuan 70% dan serapan anggaran.
                  </p>
                )}
              </div>

              {/* Final Report (100%) */}
              <div className="bg-white border border-slate-200 rounded-xl p-5 space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-bold text-xs">
                      2
                    </span>
                    <h5 className="font-bold text-slate-900 text-xs uppercase tracking-wider">
                      Laporan Akhir (Tahap 100%)
                    </h5>
                  </div>
                  {proposal.finalReport ? (
                    <span className="bg-emerald-100 text-emerald-800 px-2.5 py-0.5 rounded-full font-bold text-[10px]">
                      {proposal.finalReport.status}
                    </span>
                  ) : (
                    <span className="bg-slate-100 text-slate-500 px-2 py-0.5 rounded text-[10px]">
                      Belum Diunggah
                    </span>
                  )}
                </div>

                {proposal.finalReport ? (
                  <div className="space-y-2.5 text-xs text-slate-700">
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 bg-slate-50 p-3 rounded-lg">
                      <div><span className="text-slate-400 block text-[10px]">Status Pelaksanaan</span> <span className="font-bold text-emerald-700">100% Tuntas</span></div>
                      <div><span className="text-slate-400 block text-[10px]">Total Dana Terserap</span> <span className="font-bold text-slate-900">{formatRupiah(proposal.finalReport.fundExpended)}</span></div>
                      <div><span className="text-slate-400 block text-[10px]">Tanggal Unggah</span> <span>{proposal.finalReport.submittedAt}</span></div>
                    </div>
                    <div className="bg-slate-50 p-3 rounded-lg border border-slate-100">
                      <span className="font-semibold text-slate-700 block mb-1">Executive Summary:</span>
                      <p className="text-slate-600">{proposal.finalReport.executiveSummary}</p>
                    </div>
                  </div>
                ) : (
                  <p className="text-xs text-slate-500 italic">
                    Laporan akhir 100% diunggah setelah seluruh kegiatan lapangan dan evaluasi luaran rampung.
                  </p>
                )}
              </div>
            </div>
          )}

          {/* TAB 7: CAPAIAN LUARAN */}
          {activeTab === 'luaran' && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-bold text-slate-900 text-sm">Pendokumentasian Capaian Luaran Wajib & Tambahan</h4>
                  <p className="text-slate-500">Bukti publikasi jurnal terindeks, sertifikat HKI, TTG, dan buku monograf</p>
                </div>

                <button
                  onClick={() => onOpenReportModal(proposal)}
                  className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                >
                  <Award className="w-3.5 h-3.5" /> Tambah Bukti Luaran
                </button>
              </div>

              {proposal.actualOutputs.length === 0 ? (
                <div className="bg-white border border-dashed border-slate-300 p-8 rounded-xl text-center">
                  <Award className="w-8 h-8 text-slate-400 mx-auto mb-2" />
                  <div className="font-semibold text-slate-700">Belum ada luaran yang tercatat</div>
                  <div className="text-slate-500 text-[11px] mt-1">
                    Silakan klik tombol "Tambah Bukti Luaran" untuk mendokumentasikan artikel jurnal atau sertifikat HKI.
                  </div>
                </div>
              ) : (
                <div className="space-y-3">
                  {proposal.actualOutputs.map((out) => (
                    <div
                      key={out.id}
                      className="bg-white border border-slate-200 rounded-xl p-4 shadow-xs flex flex-col sm:flex-row sm:items-start justify-between gap-3"
                    >
                      <div className="space-y-1.5 flex-1">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="bg-indigo-100 text-indigo-800 font-bold text-[10px] px-2 py-0.5 rounded">
                            {out.type}
                          </span>
                          <span className="bg-slate-100 text-slate-700 font-medium text-[10px] px-2 py-0.5 rounded">
                            {out.status}
                          </span>
                          {out.verifiedByLppm && (
                            <span className="bg-emerald-100 text-emerald-800 font-semibold text-[10px] px-2 py-0.5 rounded flex items-center gap-1">
                              <CheckCircle2 className="w-3 h-3" /> Tervalidasi LPPM
                            </span>
                          )}
                        </div>
                        <h5 className="font-bold text-slate-900 text-sm">{out.title}</h5>
                        <p className="text-slate-600 text-xs">
                          Penerbit / Jurnal: <span className="font-medium text-slate-800">{out.venueOrPublisher}</span> ({out.year})
                        </p>
                        {out.certificateNo && (
                          <div className="text-slate-500 text-[11px] font-mono">
                            No. Sertifikat / HKI: {out.certificateNo}
                          </div>
                        )}
                        {out.urlOrDoi && (
                          <a
                            href={out.urlOrDoi}
                            target="_blank"
                            rel="noreferrer"
                            className="text-blue-600 text-[11px] flex items-center gap-1 hover:underline break-all"
                          >
                            <ExternalLink className="w-3 h-3 shrink-0" /> {out.urlOrDoi}
                          </a>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        {/* Modal Footer Controls (Role-based actions) */}
        <div className="bg-slate-50 border-t border-slate-200 px-6 py-3.5 flex flex-wrap items-center justify-between gap-3 text-xs">
          <div className="flex items-center gap-2">
            <button
              onClick={() => onPrintOfficialDoc(proposal, 'lembar_pengesahan')}
              className="px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-100 font-medium flex items-center gap-1.5 cursor-pointer shadow-2xs"
            >
              <Printer className="w-3.5 h-3.5 text-slate-500" />
              Cetak Lembar Pengesahan
            </button>

            {proposal.status === 'APPROVED' && (
              <button
                onClick={() => onPrintOfficialDoc(proposal, 'kontrak_spk')}
                className="px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-100 font-medium flex items-center gap-1.5 cursor-pointer shadow-2xs"
              >
                <FileText className="w-3.5 h-3.5 text-blue-600" />
                Cetak Kontrak SPK
              </button>
            )}
          </div>

          {/* Admin status transitions */}
          {userRole === 'admin_lppm' ? (
            <div className="flex items-center gap-2 flex-wrap">
              <span className="text-slate-500 font-semibold">Tindakan LPPM:</span>

              {proposal.status === 'SUBMITTED' && (
                <button
                  onClick={() => onUpdateStatus(proposal.id, 'IN_REVIEW')}
                  className="bg-amber-600 hover:bg-amber-700 text-white font-semibold px-3 py-1.5 rounded-lg cursor-pointer"
                >
                  Kirim ke Reviewer
                </button>
              )}

              {(proposal.status === 'IN_REVIEW' || proposal.status === 'SUBMITTED') && (
                <button
                  onClick={() => {
                    const budget = prompt('Masukkan pagu anggaran yang disetujui LPPM (Rp):', String(proposal.requestedBudget));
                    if (budget) {
                      onUpdateStatus(proposal.id, 'APPROVED', Number(budget));
                    }
                  }}
                  className="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-3 py-1.5 rounded-lg cursor-pointer"
                >
                  Setujui & Terbitkan SK Hibah
                </button>
              )}

              {proposal.status === 'PROGRESS_REPORTED' && (
                <button
                  onClick={() => onUpdateStatus(proposal.id, 'FINAL_REPORTED')}
                  className="bg-teal-600 hover:bg-teal-700 text-white font-semibold px-3 py-1.5 rounded-lg cursor-pointer"
                >
                  Verifikasi Monev Lapangan
                </button>
              )}

              {proposal.status !== 'COMPLETED' && (
                <button
                  onClick={() => onUpdateStatus(proposal.id, 'COMPLETED')}
                  className="bg-slate-900 hover:bg-slate-800 text-white font-semibold px-3 py-1.5 rounded-lg cursor-pointer"
                >
                  Tandai Selesai & Tutup Berkas
                </button>
              )}
            </div>
          ) : (
            <button
              onClick={onClose}
              className="bg-slate-900 text-white font-medium px-4 py-1.5 rounded-lg hover:bg-slate-800 cursor-pointer"
            >
              Tutup Berkas
            </button>
          )}
        </div>
      </div>
    </div>
  );
};