import React, { useState } from 'react';
import { Proposal, ProgramType, BudgetPlanItem, Researcher, PartnerDetail } from '../types';
import { RESEARCH_SCHEMES, COMMUNITY_SCHEMES, FOCUS_AREAS, FACULTIES } from '../data/initialData';
import { formatRupiah } from '../data/storage';
import {
  X,
  Plus,
  Trash2,
  FileText,
  Users,
  Building,
  DollarSign,
  Award,
  Upload,
  CheckCircle2,
  ArrowRight,
  ArrowLeft,
  Sparkles
} from 'lucide-react';

interface ProposalFormModalProps {
  initialType?: ProgramType;
  onClose: () => void;
  onSubmit: (newProposal: Proposal) => void;
}

export const ProposalFormModal: React.FC<ProposalFormModalProps> = ({
  initialType = 'penelitian',
  onClose,
  onSubmit,
}) => {
  const [step, setStep] = useState<number>(1);
  const [type, setType] = useState<ProgramType>(initialType);
  const [title, setTitle] = useState('');
  const [scheme, setScheme] = useState(initialType === 'penelitian' ? RESEARCH_SCHEMES[0] : COMMUNITY_SCHEMES[0]);
  const [focusArea, setFocusArea] = useState(FOCUS_AREAS[0]);
  const [tktCurrent, setTktCurrent] = useState<number>(2);
  const [tktTarget, setTktTarget] = useState<number>(4);
  const [academicYear, setAcademicYear] = useState('2025/2026 Ganjil');
  const [batch, setBatch] = useState('Gelombang I - Hibah Internal LPPM');
  const [abstract, setAbstract] = useState('');
  const [keywordsText, setKeywordsText] = useState('');
  const [fileName, setFileName] = useState('Proposal_Usulan_LPPM.pdf');

  // Leader info
  const [leader, setLeader] = useState<Researcher>({
    id: `res-${Date.now()}-1`,
    name: 'Dr. Dosen Pengusul, M.T.',
    nidn: '0412345678',
    email: 'dosen.pengusul@univ.ac.id',
    faculty: FACULTIES[0],
    department: 'Teknik Informatika',
    sintaId: '6192834',
    roleInTeam: 'ketua',
  });

  // Members list
  const [members, setMembers] = useState<Researcher[]>([
    {
      id: `res-${Date.now()}-2`,
      name: 'Ir. Rekan Dosen, M.Sc.',
      nidn: '0487654321',
      email: 'rekan.dosen@univ.ac.id',
      faculty: FACULTIES[1],
      department: 'Teknik Elektro',
      roleInTeam: 'anggota_dosen',
    },
    {
      id: `res-${Date.now()}-3`,
      name: 'Fauzan Mahasiswa (NIM: 2210511012)',
      nidn: '-',
      email: 'fauzan@mhs.univ.ac.id',
      faculty: FACULTIES[0],
      department: 'Teknik Informatika',
      roleInTeam: 'anggota_mahasiswa',
    },
  ]);

  // Partner info (for Pengmas)
  const [partner, setPartner] = useState<PartnerDetail>({
    name: 'Kelompok Tani Harapan Jaya',
    address: 'Desa Mandiri No. 45, Kab. Bandung Barat',
    contactPerson: 'Bapak Suryana',
    phone: '0812-9876-5432',
    sector: 'Kelompok Tani / Nelayan',
    problemStatement: 'Hasil pasca panen sering mengalami pembusukan hingga 30% karena keterbatasan alat pengering dan penyimpanan.',
    contribution: 'Menyediakan tempat pertemuan, sampel bahan, dan tenaga kerja 10 petani anggota.',
    hasMOU: true,
  });

  // Target outputs
  const [targetOutputsText, setTargetOutputsText] = useState(
    '1 Publikasi Jurnal Terakreditasi SINTA\n1 Hak Cipta Perangkat Lunak / Desain TTG\n1 Laporan Akhir & Dokumentasi Video Kegiatan'
  );

  // Budget Items
  const [budgetItems, setBudgetItems] = useState<BudgetPlanItem[]>([
    {
      id: 'b-new-1',
      category: 'Bahan Habis Pakai',
      description: 'Bahan kimia, reagen/komponen sensor & ATK',
      unit: 'Paket',
      volume: 1,
      unitPrice: 12000000,
      totalPrice: 12000000,
    },
    {
      id: 'b-new-2',
      category: 'Pengumpulan Data / Survei Lapangan',
      description: 'Transportasi tim riset & observasi lapangan 4 sesi',
      unit: 'Sesi',
      volume: 4,
      unitPrice: 1500000,
      totalPrice: 6000000,
    },
    {
      id: 'b-new-3',
      category: 'Publikasi & Pelaporan Luaran',
      description: 'Biaya registrasi artikel jurnal ilmiah & pencatatan HKI',
      unit: 'Paket',
      volume: 1,
      unitPrice: 5000000,
      totalPrice: 5000000,
    },
  ]);

  const totalRequestedBudget = budgetItems.reduce((sum, item) => sum + item.totalPrice, 0);

  const handleAddBudgetItem = () => {
    const newItem: BudgetPlanItem = {
      id: `b-${Date.now()}`,
      category: 'Bahan Habis Pakai',
      description: '',
      unit: 'Unit',
      volume: 1,
      unitPrice: 1000000,
      totalPrice: 1000000,
    };
    setBudgetItems([...budgetItems, newItem]);
  };

  const handleUpdateBudgetItem = (index: number, field: keyof BudgetPlanItem, value: any) => {
    const updated = [...budgetItems];
    const item = { ...updated[index], [field]: value };
    if (field === 'volume' || field === 'unitPrice') {
      const vol = field === 'volume' ? Number(value) : item.volume;
      const price = field === 'unitPrice' ? Number(value) : item.unitPrice;
      item.totalPrice = vol * price;
    }
    updated[index] = item;
    setBudgetItems(updated);
  };

  const handleRemoveBudgetItem = (index: number) => {
    setBudgetItems(budgetItems.filter((_, i) => i !== index));
  };

  const handleAddMember = () => {
    setMembers([
      ...members,
      {
        id: `res-${Date.now()}`,
        name: '',
        nidn: '',
        email: '',
        faculty: FACULTIES[0],
        department: '',
        roleInTeam: 'anggota_dosen',
      },
    ]);
  };

  const handleRemoveMember = (idx: number) => {
    setMembers(members.filter((_, i) => i !== idx));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!title.trim()) {
      alert('Judul usulan wajib diisi!');
      return;
    }

    const codeNum = Math.floor(100 + Math.random() * 900);
    const code = type === 'penelitian' ? `LPPM-LIT-2025-${codeNum}` : `LPPM-ABM-2025-${codeNum}`;

    const newProposal: Proposal = {
      id: `prop-${Date.now()}`,
      code,
      type,
      title,
      scheme,
      focusArea,
      tktCurrent: Number(tktCurrent),
      tktTarget: Number(tktTarget),
      academicYear,
      batch,
      createdAt: new Date().toISOString().split('T')[0],
      submittedAt: new Date().toISOString().split('T')[0],
      leader,
      members,
      partner: type === 'pengabdian' ? partner : undefined,
      abstract: abstract || 'Abstrak usulan penelitian / pengabdian kepada masyarakat yang diusulkan ke LPPM.',
      keywords: keywordsText
        ? keywordsText.split(',').map((s) => s.trim()).filter(Boolean)
        : ['LPPM', 'Riset Terapan', 'Inovasi Kampus'],
      requestedBudget: totalRequestedBudget,
      budgetItems,
      targetOutputs: targetOutputsText.split('\n').map((s) => s.trim()).filter(Boolean),
      actualOutputs: [],
      status: 'SUBMITTED',
      assignedReviewers: [],
      reviews: [],
      fileName,
    };

    onSubmit(newProposal);
  };

  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-4xl max-h-[92vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="px-6 py-4 bg-slate-900 text-white flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-blue-600 flex items-center justify-center text-white">
              <FileText className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold text-white">Formulir Pengajuan Usulan Baru LPPM</h2>
              <p className="text-xs text-slate-300">Tahun Anggaran 2025/2026 • Gelombang I</p>
            </div>
          </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"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Step Indicator */}
        <div className="bg-slate-50 border-b border-slate-200 px-6 py-3 flex items-center justify-between text-xs">
          {[
            { num: 1, label: 'Identitas Usulan' },
            { num: 2, label: 'Susunan Tim' },
            ...(type === 'pengabdian' ? [{ num: 3, label: 'Mitra Sasaran' }] : []),
            { num: type === 'pengabdian' ? 4 : 3, label: 'Abstrak & Target' },
            { num: type === 'pengabdian' ? 5 : 4, label: 'RAB & Berkas' },
          ].map((s, idx) => (
            <div key={idx} className="flex items-center gap-2">
              <span
                className={`w-6 h-6 rounded-full flex items-center justify-center font-bold text-xs ${
                  step === s.num
                    ? 'bg-blue-600 text-white'
                    : step > s.num
                    ? 'bg-emerald-600 text-white'
                    : 'bg-slate-200 text-slate-600'
                }`}
              >
                {step > s.num ? '✓' : s.num}
              </span>
              <span className={`font-medium hidden sm:inline ${step === s.num ? 'text-blue-700 font-bold' : 'text-slate-600'}`}>
                {s.label}
              </span>
            </div>
          ))}
        </div>

        {/* Form Body */}
        <div className="p-6 overflow-y-auto flex-1 text-xs">
          {/* STEP 1: IDENTITAS */}
          {step === 1 && (
            <div className="space-y-4">
              {/* Type selector */}
              <div>
                <label className="block font-bold text-slate-800 mb-1.5">Jenis Program LPPM:</label>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    type="button"
                    onClick={() => {
                      setType('penelitian');
                      setScheme(RESEARCH_SCHEMES[0]);
                    }}
                    className={`p-3.5 rounded-xl border text-left cursor-pointer transition-all ${
                      type === 'penelitian'
                        ? 'border-blue-600 bg-blue-50/70 text-blue-900 ring-2 ring-blue-500/20'
                        : 'border-slate-200 bg-white hover:bg-slate-50'
                    }`}
                  >
                    <div className="font-bold text-sm mb-1">Penelitian (Riset Kampus)</div>
                    <div className="text-slate-500 text-[11px]">Riset dasar, terapan, dan pengembangan teknologi baru</div>
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      setType('pengabdian');
                      setScheme(COMMUNITY_SCHEMES[0]);
                    }}
                    className={`p-3.5 rounded-xl border text-left cursor-pointer transition-all ${
                      type === 'pengabdian'
                        ? 'border-emerald-600 bg-emerald-50/70 text-emerald-900 ring-2 ring-emerald-500/20'
                        : 'border-slate-200 bg-white hover:bg-slate-50'
                    }`}
                  >
                    <div className="font-bold text-sm mb-1">Pengabdian kepada Masyarakat (PKM)</div>
                    <div className="text-slate-500 text-[11px]">Pemberdayaan mitra UMKM, desa binaan, dan hilirisasi TTG</div>
                  </button>
                </div>
              </div>

              {/* Title */}
              <div>
                <label className="block font-bold text-slate-800 mb-1">
                  Judul Usulan {type === 'penelitian' ? 'Penelitian' : 'Pengabdian'}: *
                </label>
                <textarea
                  rows={3}
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Contoh: Rancang Bangun Sistem Monitoring Kualitas Air Tambak Udang Berbasis IoT..."
                  className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg text-slate-900 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
                  required
                />
              </div>

              {/* Scheme & Focus Area */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block font-bold text-slate-800 mb-1">Skema Usulan:</label>
                  <select
                    value={scheme}
                    onChange={(e) => setScheme(e.target.value)}
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg text-slate-900"
                  >
                    {(type === 'penelitian' ? RESEARCH_SCHEMES : COMMUNITY_SCHEMES).map((s) => (
                      <option key={s} value={s}>
                        {s}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block font-bold text-slate-800 mb-1">Bidang Fokus RIRN:</label>
                  <select
                    value={focusArea}
                    onChange={(e) => setFocusArea(e.target.value)}
                    className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg text-slate-900"
                  >
                    {FOCUS_AREAS.map((f) => (
                      <option key={f} value={f}>
                        {f}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* TKT current & target */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block font-bold text-slate-800 mb-1">Tingkat TKT Saat Ini (1-9):</label>
                  <select
                    value={tktCurrent}
                    onChange={(e) => setTktCurrent(Number(e.target.value))}
                    className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                  >
                    {Array.from({ length: 9 }, (_, i) => i + 1).map((lvl) => (
                      <option key={lvl} value={lvl}>
                        TKT {lvl}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block font-bold text-slate-800 mb-1">Target Capaian TKT:</label>
                  <select
                    value={tktTarget}
                    onChange={(e) => setTktTarget(Number(e.target.value))}
                    className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                  >
                    {Array.from({ length: 9 }, (_, i) => i + 1).map((lvl) => (
                      <option key={lvl} value={lvl}>
                        TKT {lvl}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
          )}

          {/* STEP 2: TIM PENGUSUL */}
          {step === 2 && (
            <div className="space-y-4">
              <div className="bg-blue-50/70 border border-blue-200 p-4 rounded-xl space-y-3">
                <span className="font-bold text-blue-900 text-xs uppercase tracking-wider block">
                  Identitas Ketua Pengusul (Dosen Tetap):
                </span>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Nama Lengkap & Gelar:</label>
                    <input
                      type="text"
                      value={leader.name}
                      onChange={(e) => setLeader({ ...leader, name: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">NIDN:</label>
                    <input
                      type="text"
                      value={leader.nidn}
                      onChange={(e) => setLeader({ ...leader, nidn: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg font-mono"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Fakultas:</label>
                    <select
                      value={leader.faculty}
                      onChange={(e) => setLeader({ ...leader, faculty: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    >
                      {FACULTIES.map((f) => (
                        <option key={f} value={f}>{f}</option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Program Studi:</label>
                    <input
                      type="text"
                      value={leader.department}
                      onChange={(e) => setLeader({ ...leader, department: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Email Kampus:</label>
                    <input
                      type="email"
                      value={leader.email}
                      onChange={(e) => setLeader({ ...leader, email: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">ID SINTA:</label>
                    <input
                      type="text"
                      value={leader.sintaId || ''}
                      onChange={(e) => setLeader({ ...leader, sintaId: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg font-mono"
                    />
                  </div>
                </div>
              </div>

              {/* Members */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <label className="font-bold text-slate-800">Anggota Peneliti / Mahasiswa ({members.length}):</label>
                  <button
                    type="button"
                    onClick={handleAddMember}
                    className="text-blue-600 font-semibold flex items-center gap-1 hover:underline cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" /> Tambah Anggota
                  </button>
                </div>

                {members.map((m, idx) => (
                  <div key={m.id} className="p-3 bg-slate-50 border border-slate-200 rounded-xl space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="font-semibold text-slate-700">Anggota #{idx + 1}</span>
                      <button
                        type="button"
                        onClick={() => handleRemoveMember(idx)}
                        className="text-rose-600 hover:text-rose-800 p-1 cursor-pointer"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
                      <input
                        type="text"
                        placeholder="Nama Anggota"
                        value={m.name}
                        onChange={(e) => {
                          const upd = [...members];
                          upd[idx].name = e.target.value;
                          setMembers(upd);
                        }}
                        className="p-2 bg-white border border-slate-300 rounded-lg"
                      />
                      <input
                        type="text"
                        placeholder="NIDN / NIM Mahasiswa"
                        value={m.nidn}
                        onChange={(e) => {
                          const upd = [...members];
                          upd[idx].nidn = e.target.value;
                          setMembers(upd);
                        }}
                        className="p-2 bg-white border border-slate-300 rounded-lg font-mono"
                      />
                      <select
                        value={m.roleInTeam}
                        onChange={(e) => {
                          const upd = [...members];
                          upd[idx].roleInTeam = e.target.value as any;
                          setMembers(upd);
                        }}
                        className="p-2 bg-white border border-slate-300 rounded-lg"
                      >
                        <option value="anggota_dosen">Dosen Anggota</option>
                        <option value="anggota_mahasiswa">Mahasiswa (MBKM)</option>
                      </select>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* STEP 3 (MITRA - KHUSUS PENGMAS) */}
          {step === 3 && type === 'pengabdian' && (
            <div className="space-y-4">
              <div className="bg-emerald-50/70 border border-emerald-200 p-4 rounded-xl space-y-3">
                <span className="font-bold text-emerald-900 text-xs uppercase tracking-wider block">
                  Identitas Mitra Sasaran Pengabdian Masyarakat:
                </span>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Nama Mitra:</label>
                    <input
                      type="text"
                      value={partner.name}
                      onChange={(e) => setPartner({ ...partner, name: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Sektor Mitra:</label>
                    <select
                      value={partner.sector}
                      onChange={(e) => setPartner({ ...partner, sector: e.target.value as any })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    >
                      <option value="UMKM">UMKM / Industri Rumah Tangga</option>
                      <option value="Kelompok Tani / Nelayan">Kelompok Tani / Nelayan</option>
                      <option value="Pemerintah Desa / Kelurahan">Pemerintah Desa / Kelurahan</option>
                      <option value="Sekolah / Pesantren">Sekolah / Pesantren</option>
                      <option value="Komunitas Warga">Komunitas Warga</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Narahubung / Ketua Mitra:</label>
                    <input
                      type="text"
                      value={partner.contactPerson}
                      onChange={(e) => setPartner({ ...partner, contactPerson: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">No. Telepon / WhatsApp:</label>
                    <input
                      type="text"
                      value={partner.phone}
                      onChange={(e) => setPartner({ ...partner, phone: e.target.value })}
                      className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-[11px] font-semibold text-slate-700 mb-0.5">Alamat Lengkap Lokasi Mitra:</label>
                  <input
                    type="text"
                    value={partner.address}
                    onChange={(e) => setPartner({ ...partner, address: e.target.value })}
                    className="w-full p-2 bg-white border border-slate-300 rounded-lg"
                  />
                </div>
              </div>

              <div>
                <label className="block font-bold text-slate-800 mb-1">Permasalahan Prioritas Mitra:</label>
                <textarea
                  rows={3}
                  value={partner.problemStatement}
                  onChange={(e) => setPartner({ ...partner, problemStatement: e.target.value })}
                  className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg"
                />
              </div>

              <div>
                <label className="block font-bold text-slate-800 mb-1">Bentuk Kontribusi In-Kind Mitra:</label>
                <input
                  type="text"
                  value={partner.contribution}
                  onChange={(e) => setPartner({ ...partner, contribution: e.target.value })}
                  className="w-full p-2 bg-slate-50 border border-slate-300 rounded-lg"
                />
              </div>
            </div>
          )}

          {/* STEP 3/4: ABSTRAK & TARGET LUARAN */}
          {((type === 'penelitian' && step === 3) || (type === 'pengabdian' && step === 4)) && (
            <div className="space-y-4">
              <div>
                <label className="block font-bold text-slate-800 mb-1">Abstrak Usulan (Maksimal 500 Kata):</label>
                <textarea
                  rows={6}
                  value={abstract}
                  onChange={(e) => setAbstract(e.target.value)}
                  placeholder="Kemukakan urgensi, rumusan masalah, metodologi yang digunakan, serta target luaran yang diharapkan..."
                  className="w-full p-3 bg-slate-50 border border-slate-300 rounded-lg leading-relaxed"
                />
              </div>

              <div>
                <label className="block font-bold text-slate-800 mb-1">Kata Kunci (Pisahkan dengan tanda koma):</label>
                <input
                  type="text"
                  value={keywordsText}
                  onChange={(e) => setKeywordsText(e.target.value)}
                  placeholder="Contoh: Kecerdasan Buatan, Pertanian Presisi, SINTA 2, TKT 5"
                  className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg"
                />
              </div>

              <div>
                <label className="block font-bold text-slate-800 mb-1">Target Capaian Luaran (1 baris per luaran):</label>
                <textarea
                  rows={4}
                  value={targetOutputsText}
                  onChange={(e) => setTargetOutputsText(e.target.value)}
                  className="w-full p-2.5 bg-slate-50 border border-slate-300 rounded-lg font-mono text-[11px]"
                />
              </div>
            </div>
          )}

          {/* STEP 4/5: RAB & BERKAS */}
          {((type === 'penelitian' && step === 4) || (type === 'pengabdian' && step === 5)) && (
            <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)</h4>
                  <p className="text-slate-500">Standar Biaya Masukan (SBM) LPPM</p>
                </div>
                <div className="text-right">
                  <span className="text-slate-500 block text-[10px]">Total RAB:</span>
                  <span className="font-bold text-blue-700 text-sm">{formatRupiah(totalRequestedBudget)}</span>
                </div>
              </div>

              {/* RAB Line Items */}
              <div className="space-y-2 border border-slate-200 rounded-xl p-3 bg-slate-50/50">
                {budgetItems.map((item, idx) => (
                  <div key={item.id} className="grid grid-cols-1 sm:grid-cols-12 gap-2 bg-white p-2.5 rounded-lg border border-slate-200 items-center">
                    <div className="sm:col-span-3">
                      <select
                        value={item.category}
                        onChange={(e) => handleUpdateBudgetItem(idx, 'category', e.target.value)}
                        className="w-full p-1.5 border border-slate-300 rounded text-[11px]"
                      >
                        <option value="Bahan Habis Pakai">Bahan Habis Pakai</option>
                        <option value="Pengumpulan Data / Survei Lapangan">Survei Lapangan</option>
                        <option value="Uji Lab & Analisis Sampel">Uji Lab & Analisis</option>
                        <option value="Sewa Alat & Perizinan">Sewa Alat & Izin</option>
                        <option value="Publikasi & Pelaporan Luaran">Publikasi Luaran</option>
                      </select>
                    </div>

                    <div className="sm:col-span-4">
                      <input
                        type="text"
                        placeholder="Deskripsi kebutuhan..."
                        value={item.description}
                        onChange={(e) => handleUpdateBudgetItem(idx, 'description', e.target.value)}
                        className="w-full p-1.5 border border-slate-300 rounded text-[11px]"
                      />
                    </div>

                    <div className="sm:col-span-1">
                      <input
                        type="number"
                        min="1"
                        placeholder="Vol"
                        value={item.volume}
                        onChange={(e) => handleUpdateBudgetItem(idx, 'volume', e.target.value)}
                        className="w-full p-1.5 border border-slate-300 rounded text-[11px] text-center"
                      />
                    </div>

                    <div className="sm:col-span-3">
                      <input
                        type="number"
                        placeholder="Harga Satuan"
                        value={item.unitPrice}
                        onChange={(e) => handleUpdateBudgetItem(idx, 'unitPrice', e.target.value)}
                        className="w-full p-1.5 border border-slate-300 rounded text-[11px] text-right font-mono"
                      />
                    </div>

                    <div className="sm:col-span-1 flex justify-end">
                      <button
                        type="button"
                        onClick={() => handleRemoveBudgetItem(idx)}
                        className="text-rose-600 hover:text-rose-800 p-1 cursor-pointer"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>
                ))}

                <button
                  type="button"
                  onClick={handleAddBudgetItem}
                  className="w-full py-2 bg-white hover:bg-slate-100 border border-dashed border-slate-300 rounded-lg text-slate-700 font-semibold flex items-center justify-center gap-1 cursor-pointer"
                >
                  <Plus className="w-3.5 h-3.5 text-blue-600" /> Tambah Pos Belanja RAB
                </button>
              </div>

              {/* Upload berkas */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
                <label className="block font-bold text-slate-800 mb-1">
                  Lampiran Berkas Usulan Lengkap (PDF):
                </label>
                <div className="border-2 border-dashed border-slate-300 rounded-xl p-5 text-center bg-white">
                  <Upload className="w-7 h-7 text-blue-600 mx-auto mb-2" />
                  <div className="font-semibold text-slate-800 text-xs">
                    {fileName || 'Klik untuk memilih file proposal format PDF'}
                  </div>
                  <div className="text-slate-500 text-[11px] mt-1">
                    Format penamaan: Proposal_[NamaKetua]_[Skema].pdf (Maksimal 15 MB)
                  </div>
                  <input
                    type="file"
                    accept=".pdf"
                    onChange={(e) => {
                      if (e.target.files?.[0]) {
                        setFileName(e.target.files[0].name);
                      }
                    }}
                    className="mt-3 text-xs text-slate-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer"
                  />
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Modal Footer Controls */}
        <div className="px-6 py-3.5 bg-slate-50 border-t border-slate-200 flex items-center justify-between text-xs">
          {step > 1 ? (
            <button
              type="button"
              onClick={() => setStep(step - 1)}
              className="px-4 py-2 border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-100 font-medium flex items-center gap-1.5 cursor-pointer"
            >
              <ArrowLeft className="w-3.5 h-3.5" /> Sebelumnya
            </button>
          ) : (
            <div></div>
          )}

          {step < (type === 'pengabdian' ? 5 : 4) ? (
            <button
              type="button"
              onClick={() => {
                if (step === 1 && !title.trim()) {
                  alert('Mohon isi judul usulan sebelum lanjut.');
                  return;
                }
                setStep(step + 1);
              }}
              className="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg flex items-center gap-1.5 cursor-pointer shadow-xs"
            >
              Lanjutkan <ArrowRight className="w-3.5 h-3.5" />
            </button>
          ) : (
            <button
              type="button"
              onClick={handleSubmit}
              className="px-6 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg flex items-center gap-1.5 cursor-pointer shadow-xs"
            >
              <CheckCircle2 className="w-4 h-4" /> Ajukan Proposal ke LPPM
            </button>
          )}
        </div>
      </div>
    </div>
  );
};