import React, { useState } from 'react';
import { Book, FileText, Globe, Zap, Briefcase, TrendingUp, DollarSign, ExternalLink, GraduationCap, Home, ChevronRight, AlertCircle } from 'lucide-react';

// --- DEFINISI TIPE DATA (INTERFACE) ---
// Menambahkan interface untuk menjamin keamanan tipe data
interface Subject {
  id: number;
  title: string;
  shortTitle: string;
  color: string;
  lightColor: string;
  icon: React.ReactNode;
  dictionaryUrl: string;
  description: string;
  summary: React.ReactNode;
}

// --- DATA KONFIGURASI ---
const SUBJECTS: Subject[] = [
  {
    id: 1,
    title: "Maaliyah Amah (Keuangan Publik)",
    shortTitle: "Maaliyah Amah",
    color: "bg-emerald-600",
    lightColor: "bg-emerald-50",
    icon: <DollarSign size={32} />,
    dictionaryUrl: "https://kamus-amah.iqtisod.my.id",
    description: "Bab 1: Mempelajari aktivitas keuangan negara, pendapatan, dan pengeluaran publik.",
    summary: (
      <>
        <p className="mb-4 text-lg leading-relaxed">
          Mata kuliah ini membahas peran negara dalam ekonomi melalui kebijakan fiskal. Fokus utamanya adalah bagaimana negara mengelola sumber daya keuangan untuk kesejahteraan publik.
        </p>
        <div className="grid md:grid-cols-2 gap-4 mb-6">
          <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
            <h4 className="font-bold text-slate-800 mb-2">Konsep Dasar</h4>
            <p className="text-slate-600 text-sm">Membedakan antara Keuangan Publik (Negara) dan Keuangan Privat (Swasta). Negara berorientasi pada layanan, swasta pada profit.</p>
          </div>
          <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
            <h4 className="font-bold text-slate-800 mb-2">Instrumen Utama</h4>
            <p className="text-slate-600 text-sm">Pajak (Dharaib), Zakat, Wakaf, dan Sukuk sebagai instrumen pendapatan dan pembiayaan negara.</p>
          </div>
        </div>
        <h4 className="font-bold text-slate-800 mb-2 border-b border-slate-100 pb-2">Poin Penting:</h4>
        <ul className="list-disc list-inside space-y-2 text-slate-700">
          <li><strong>Iradat Amah:</strong> Sumber pendapatan negara dari pajak, retribusi, dan keuntungan BUMN.</li>
          <li><strong>Nafaqat Amah:</strong> Belanja pegawai, subsidi, dan pembangunan infrastruktur.</li>
          <li><strong>Muwazanah:</strong> Keseimbangan antara pendapatan dan pengeluaran (Defisit vs Surplus).</li>
        </ul>
      </>
    )
  },
  {
    id: 2,
    title: "Analisis Makro Ekonomi",
    shortTitle: "Makro Ekonomi",
    color: "bg-blue-600",
    lightColor: "bg-blue-50",
    icon: <TrendingUp size={32} />,
    dictionaryUrl: "https://kamus-makro6.iqtisod.my.id",
    description: "Bab 2: Analisis ekonomi agregat, inflasi, dan pertumbuhan ekonomi.",
    summary: (
      <>
        <p className="mb-4 text-lg leading-relaxed">
          Analisis Makro Ekonomi melihat 'big picture' dari sebuah perekonomian. Kita tidak melihat satu pasar saja, tapi seluruh pasar di negara tersebut secara agregat.
        </p>
        <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
          <p className="text-blue-800 font-medium">Fokus Utama: Pertumbuhan Ekonomi, Inflasi, dan Pengangguran.</p>
        </div>
        <h4 className="font-bold text-slate-800 mb-2 border-b border-slate-100 pb-2">Indikator Kunci:</h4>
        <ul className="list-disc list-inside space-y-2 text-slate-700">
          <li><strong>GDP (PDB):</strong> Nilai total barang dan jasa yang diproduksi dalam negeri.</li>
          <li><strong>Inflasi (Tadhakhum):</strong> Kenaikan harga umum secara terus menerus.</li>
          <li><strong>Kebijakan Moneter:</strong> Peran Bank Sentral dalam mengatur jumlah uang beredar.</li>
        </ul>
      </>
    )
  },
  {
    id: 3,
    title: "Ekonomi Tenaga Kerja",
    shortTitle: "Eko. Tenaga Kerja",
    color: "bg-indigo-600",
    lightColor: "bg-indigo-50",
    icon: <Briefcase size={32} />,
    dictionaryUrl: "https://kamus-amal.iqtisod.my.id",
    description: "Bab 3: Dinamika pasar kerja, upah, dan pengangguran.",
    summary: (
      <>
        <p className="mb-4 text-lg leading-relaxed">
          Membahas interaksi antara pekerja (penawaran) dan perusahaan (permintaan). Tenaga kerja adalah input produksi yang unik karena menyangkut manusia.
        </p>
        <h4 className="font-bold text-slate-800 mb-2 border-b border-slate-100 pb-2">Topik Bahasan:</h4>
        <ul className="list-disc list-inside space-y-2 text-slate-700">
          <li><strong>Supply & Demand Labor:</strong> Bagaimana upah terbentuk di pasar tenaga kerja.</li>
          <li><strong>Human Capital:</strong> Investasi dalam pendidikan dan kesehatan untuk meningkatkan produktivitas.</li>
          <li><strong>Pengangguran (Bithalah):</strong> Jenis-jenis pengangguran (Friksional, Struktural, Siklis) dan solusinya.</li>
        </ul>
      </>
    )
  },
  {
    id: 4,
    title: "Ekonomi Energi & Lingkungan",
    shortTitle: "Eko. Energi",
    color: "bg-amber-600",
    lightColor: "bg-amber-50",
    icon: <Zap size={32} />,
    dictionaryUrl: "https://kamus-energi.iqtisod.my.id",
    description: "Bab 4: Penggunaan energi, dampak lingkungan, dan keberlanjutan.",
    summary: (
      <>
        <p className="mb-4 text-lg leading-relaxed">
          Studi tentang bagaimana masyarakat mengelola sumber daya energi yang langka dan dampak aktivitas ekonomi terhadap lingkungan alam.
        </p>
        <div className="grid md:grid-cols-2 gap-4 mb-6">
          <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
            <h4 className="font-bold text-amber-800 mb-1">Energi Terbarukan</h4>
            <p className="text-sm text-amber-700">Transisi dari energi fosil ke energi hijau (Matahari, Angin, Air).</p>
          </div>
          <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
            <h4 className="font-bold text-amber-800 mb-1">Eksternalitas</h4>
            <p className="text-sm text-amber-700">Biaya dampak lingkungan (polusi) yang tidak masuk dalam harga pasar.</p>
          </div>
        </div>
      </>
    )
  },
  {
    id: 5,
    title: "Ekonomi Umum",
    shortTitle: "Ekonomi Umum",
    color: "bg-slate-600",
    lightColor: "bg-slate-100",
    icon: <Globe size={32} />,
    dictionaryUrl: "https://iqtisod.my.id",
    description: "Bab 5: Pengantar prinsip dasar ekonomi dan istilah umum.",
    summary: (
      <>
        <p className="mb-4 text-lg leading-relaxed">
          Landasan bagi semua mata kuliah ekonomi. Memahami cara berpikir ekonom (The Economic Way of Thinking) dan mekanisme pasar dasar.
        </p>
        <h4 className="font-bold text-slate-800 mb-2 border-b border-slate-100 pb-2">Konsep Inti:</h4>
        <ul className="list-disc list-inside space-y-2 text-slate-700">
          <li><strong>Kelangkaan (Scarcity):</strong> Inti masalah ekonomi.</li>
          <li><strong>Opportunity Cost:</strong> Nilai dari apa yang harus dikorbankan untuk mendapatkan sesuatu.</li>
          <li><strong>Mekanisme Pasar:</strong> Interaksi penawaran dan permintaan dalam menentukan harga.</li>
        </ul>
      </>
    )
  }
];

export default function IqtisodHub() {
  const [activeView, setActiveView] = useState<'home' | 'subject'>('home');
  // FIX: Menggunakan Generic <Subject | null> dengan benar
  const [selectedSubject, setSelectedSubject] = useState<Subject | null>(null);
  const [activeTab, setActiveTab] = useState<'dictionary' | 'summary'>('dictionary');
  const [iframeError, setIframeError] = useState(false);

  const handleSubjectClick = (subject: Subject) => {
    setSelectedSubject(subject);
    setActiveView('subject');
    setActiveTab('dictionary'); // Default buka kamus
    setIframeError(false);
  };

  const handleBackHome = () => {
    setActiveView('home');
    setSelectedSubject(null);
  };

  // --- COMPONENT: HOME ---
  const renderHome = () => (
    <div className="space-y-8 animate-in fade-in duration-500">
      {/* Hero Section */}
      <div className="text-center py-12 bg-white rounded-3xl shadow-sm border border-slate-100 px-6 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-emerald-400 to-blue-500" />
        <div className="flex justify-center mb-6">
          <div className="p-4 bg-emerald-100 text-emerald-600 rounded-3xl shadow-inner">
            <GraduationCap size={56} />
          </div>
        </div>
        <h1 className="text-4xl md:text-5xl font-extrabold text-slate-800 mb-4 tracking-tight">
          Rangkuman <span className="text-emerald-600">Semester 6</span>
        </h1>
        <p className="text-slate-500 text-lg max-w-2xl mx-auto leading-relaxed">
          Portal terintegrasi untuk akses cepat ke <strong>Kamus Istilah</strong> dan <strong>Rangkuman Materi</strong> ekonomi.
        </p>
      </div>

      {/* Grid Menu */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-2">
        {SUBJECTS.map((sub) => (
          <button 
            key={sub.id}
            onClick={() => handleSubjectClick(sub)}
            className="group text-left bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-xl hover:border-emerald-200 hover:-translate-y-1 transition-all duration-300 relative overflow-hidden flex flex-col h-full"
          >
            <div className={`absolute top-0 left-0 w-1.5 h-full ${sub.color}`} />
            <div className="mb-5 p-3 rounded-2xl bg-slate-50 w-fit text-slate-700 group-hover:text-emerald-600 group-hover:bg-emerald-50 transition-colors">
              {sub.icon}
            </div>
            <h3 className="text-xl font-bold text-slate-800 mb-2 pr-4">{sub.title}</h3>
            <p className="text-slate-500 text-sm mb-6 line-clamp-2 flex-grow">{sub.description}</p>
            <div className="flex items-center justify-between mt-auto pt-4 border-t border-slate-50">
              <span className="text-xs font-bold px-2 py-1 bg-slate-100 text-slate-500 rounded-md">
                KAMUS & MATERI
              </span>
              <div className="flex items-center text-sm font-bold text-emerald-600 group-hover:translate-x-1 transition-transform">
                <span>Buka</span>
                <ChevronRight size={16} className="ml-1" />
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );

  // --- COMPONENT: SUBJECT DETAIL ---
  const renderSubject = () => {
    if (!selectedSubject) return null;

    return (
      <div className="animate-in slide-in-from-right duration-300 pb-20">
        {/* Header Subject */}
        <div className={`bg-white border-b border-slate-200 sticky top-16 z-30 shadow-sm transition-all`}>
          <div className="max-w-6xl mx-auto px-4 py-4 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <button 
                onClick={handleBackHome}
                className="p-2 hover:bg-slate-100 rounded-full transition-colors text-slate-500"
                title="Kembali ke Menu Utama"
              >
                <Home size={24} />
              </button>
              <div>
                <h2 className="text-xl md:text-2xl font-bold text-slate-800 flex items-center gap-2">
                  <span className={`${selectedSubject.color} text-white p-1 rounded-md`}>
                    {selectedSubject.icon}
                  </span>
                  {selectedSubject.shortTitle}
                </h2>
              </div>
            </div>

            {/* Navigation Tabs */}
            <div className="flex bg-slate-100 p-1 rounded-xl w-full md:w-auto">
              <button
                onClick={() => setActiveTab('dictionary')}
                className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${
                  activeTab === 'dictionary' 
                    ? 'bg-white text-emerald-700 shadow-sm' 
                    : 'text-slate-500 hover:text-slate-700'
                }`}
              >
                <Globe size={18} />
                Kamus Online
              </button>
              <button
                onClick={() => setActiveTab('summary')}
                className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg text-sm font-bold transition-all ${
                  activeTab === 'summary' 
                    ? 'bg-white text-emerald-700 shadow-sm' 
                    : 'text-slate-500 hover:text-slate-700'
                }`}
              >
                <FileText size={18} />
                Rangkuman
              </button>
            </div>
          </div>
        </div>

        {/* Content Area */}
        <div className="max-w-6xl mx-auto px-4 mt-6">
          
          {/* TAB: KAMUS ONLINE (IFRAME) */}
          {activeTab === 'dictionary' && (
            <div className="flex flex-col h-[75vh] bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden relative">
              <div className="bg-slate-50 px-4 py-3 border-b border-slate-200 flex justify-between items-center">
                <div className="flex items-center gap-2 text-sm text-slate-500 overflow-hidden">
                  <Globe size={14} className="flex-shrink-0"/>
                  <span className="truncate">{selectedSubject.dictionaryUrl}</span>
                </div>
                <a 
                  href={selectedSubject.dictionaryUrl} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="flex items-center gap-1.5 text-xs font-bold text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-lg hover:bg-emerald-100 transition-colors"
                >
                  Buka Tab Baru <ExternalLink size={12} />
                </a>
              </div>
              
              <div className="flex-grow relative bg-slate-100 w-full h-full">
                {!iframeError ? (
                  <iframe 
                    src={selectedSubject.dictionaryUrl} 
                    title={`Kamus ${selectedSubject.title}`}
                    className="w-full h-full border-0"
                    allowFullScreen
                    onError={() => setIframeError(true)}
                  />
                ) : (
                  <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center">
                    <AlertCircle size={48} className="text-slate-300 mb-4" />
                    <p className="text-slate-600 font-medium mb-2">Website menolak untuk ditampilkan di sini.</p>
                    <a 
                      href={selectedSubject.dictionaryUrl} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-emerald-600 font-bold hover:underline"
                    >
                      Klik di sini untuk membuka Kamus
                    </a>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* TAB: RANGKUMAN */}
          {activeTab === 'summary' && (
            <div className="bg-white p-8 md:p-12 rounded-2xl shadow-sm border border-slate-100 animate-in fade-in slide-in-from-bottom-4 duration-500">
              <div className="flex items-center gap-4 mb-8 border-b border-slate-100 pb-6">
                <div className={`p-4 rounded-2xl ${selectedSubject.lightColor} ${selectedSubject.color.replace('bg-', 'text-')}`}>
                  {selectedSubject.icon}
                </div>
                <div>
                  <span className="text-sm font-bold text-slate-400 uppercase tracking-wider">Rangkuman Materi</span>
                  <h3 className="text-3xl font-bold text-slate-800">{selectedSubject.title}</h3>
                </div>
              </div>
              
              <div className="prose prose-lg prose-slate max-w-none text-slate-600">
                {selectedSubject.summary}
              </div>

              <div className="mt-10 p-6 bg-slate-50 rounded-xl border border-slate-100 flex items-start gap-4">
                <div className="bg-white p-2 rounded-lg shadow-sm text-emerald-600">
                  <GraduationCap size={24} />
                </div>
                <div>
                  <h5 className="font-bold text-slate-800 text-sm mb-1">Tips Belajar</h5>
                  <p className="text-sm text-slate-500">
                    Gunakan tab <strong>Kamus Online</strong> untuk mencari istilah asing yang muncul saat membaca rangkuman ini.
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-emerald-100">
      {/* GLOBAL NAVBAR */}
      <nav className="bg-white border-b border-slate-200 sticky top-0 z-40 px-4 py-3 shadow-sm bg-white/90 backdrop-blur-md">
        <div className="max-w-6xl mx-auto flex justify-between items-center">
          <div 
            className="flex items-center gap-2 cursor-pointer" 
            onClick={handleBackHome}
          >
            <div className="bg-emerald-600 text-white p-1.5 rounded-lg">
              <GraduationCap size={20} />
            </div>
            <span className="font-bold text-xl tracking-tight text-slate-800 hidden md:inline">
              Iqtisod<span className="text-emerald-600">Hub</span>
            </span>
            <span className="font-bold text-xl tracking-tight text-slate-800 md:hidden">
              IH
            </span>
          </div>
          
          <div className="flex items-center gap-3">
             <span className="text-xs font-bold text-slate-400 uppercase tracking-widest hidden sm:inline">Semester 6</span>
             <div className="h-8 w-[1px] bg-slate-200 hidden sm:block"></div>
             <a href="#" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Portal Mahasiswa</a>
          </div>
        </div>
      </nav>

      <main className="max-w-6xl mx-auto pt-6 pb-20 px-4">
        {activeView === 'home' ? renderHome() : renderSubject()}
      </main>

      <footer className="bg-white border-t border-slate-200 mt-auto">
        <div className="max-w-6xl mx-auto py-8 px-4 text-center">
          <p className="text-slate-400 text-sm">
            &copy; 2024 Iqtisod Hub. Integrated Dictionary & Learning System.
          </p>
        </div>
      </footer>
    </div>
  );
}