import React, { useState } from 'react';
import { 
  Home, Image as ImageIcon, Download, Upload, 
  Search, Menu, X, FileText, ChevronRight, User, Calendar, Shield
} from 'lucide-react';

// --- MOCK DATA AWAL ---
const initialArticles = [
  {
    id: 1,
    title: "Pemerintah Resmikan Proyek Transportasi Publik Baru di Ibu Kota",
    category: "Nasional",
    author: "Budi Santoso",
    date: "7 Mei 2026",
    image: "https://picsum.photos/seed/trans/800/400",
    summary: "Proyek ini diharapkan dapat mengurangi kemacetan hingga 30% di pusat kota pada jam sibuk.",
    content: "Jakarta - Pemerintah pusat hari ini resmi membuka jalur transportasi publik terbaru yang menghubungkan daerah pinggiran kota langsung ke pusat bisnis. Peresmian ini dihadiri oleh berbagai pejabat tinggi negara. Proyek yang memakan waktu tiga tahun ini akhirnya selesai dan siap digunakan oleh masyarakat umum mulai besok pagi. Diharapkan dengan adanya moda transportasi baru ini, polusi udara dan kemacetan dapat ditekan secara signifikan."
  },
  {
    id: 2,
    title: "Timnas Indonesia Raih Kemenangan Gemilang di Kualifikasi",
    category: "Olahraga",
    author: "Andi Saputra",
    date: "6 Mei 2026",
    image: "https://picsum.photos/seed/bola/800/400",
    summary: "Pertandingan dramatis berakhir dengan skor 3-1 untuk kemenangan skuad Garuda.",
    content: "Tim Nasional Sepak Bola Indonesia berhasil menunjukkan performa luar biasa dalam laga lanjutan kualifikasi semalam. Bermain di hadapan puluhan ribu pendukung sendiri, timnas sempat tertinggal lebih dulu sebelum membalikkan keadaan di babak kedua. Kemenangan ini membuka lebar peluang Indonesia untuk lolos ke fase berikutnya."
  },
  {
    id: 3,
    title: "Perkembangan Artificial Intelligence di Sektor Pendidikan",
    category: "Teknologi",
    author: "Diana Putri",
    date: "5 Mei 2026",
    image: "https://picsum.photos/seed/tech/800/400",
    summary: "AI kini mulai diintegrasikan ke dalam kurikulum sekolah menengah.",
    content: "Adopsi teknologi kecerdasan buatan (AI) di Indonesia semakin pesat. Kini, beberapa sekolah percontohan mulai menggunakan AI sebagai asisten pengajar untuk membantu siswa memahami materi yang kompleks. Sistem ini dapat menyesuaikan tingkat kesulitan soal berdasarkan kemampuan masing-masing siswa secara real-time."
  },
  {
    id: 4,
    title: "Festival Kuliner Nusantara Sedot Ribuan Pengunjung",
    category: "Gaya Hidup",
    author: "Siti Aminah",
    date: "4 Mei 2026",
    image: "https://picsum.photos/seed/food/800/400",
    summary: "Ratusan stan makanan tradisional dari Sabang sampai Merauke hadir di sini.",
    content: "Acara tahunan Festival Kuliner Nusantara kembali digelar akhir pekan ini. Pengunjung disuguhi berbagai macam makanan khas daerah yang mungkin sulit ditemukan di hari biasa. Selain makanan, festival ini juga menampilkan pertunjukan seni budaya dari berbagai provinsi."
  }
];

const initialPhotos = [
  { id: 1, title: "Peresmian Gedung Baru", url: "https://picsum.photos/seed/build/600/400", date: "7 Mei 2026" },
  { id: 2, title: "Latihan Timnas", url: "https://picsum.photos/seed/train/600/400", date: "6 Mei 2026" },
  { id: 3, title: "Pameran Teknologi", url: "https://picsum.photos/seed/expo/600/400", date: "5 Mei 2026" },
  { id: 4, title: "Suasana Festival", url: "https://picsum.photos/seed/fest/600/400", date: "4 Mei 2026" },
  { id: 5, title: "Kegiatan Sosial Warga", url: "https://picsum.photos/seed/sosial/600/400", date: "3 Mei 2026" },
  { id: 6, title: "Pemandangan Alam Pegunungan", url: "https://picsum.photos/seed/alam/600/400", date: "2 Mei 2026" },
];

const initialDownloads = [
  { id: 1, title: "Laporan Kinerja Tahunan 2025.pdf", size: "2.4 MB", date: "10 Jan 2026" },
  { id: 2, title: "Formulir Pendaftaran Relawan.docx", size: "150 KB", date: "15 Mar 2026" },
  { id: 3, title: "Buku Panduan Penggunaan Portal.pdf", size: "5.1 MB", date: "20 Apr 2026" },
  { id: 4, title: "Jadwal Kegiatan Bulan Mei.xlsx", size: "45 KB", date: "1 Mei 2026" },
];

// --- MAIN APP COMPONENT ---
export default function App() {
  const [currentView, setCurrentView] = useState('home'); // home, article, gallery, downloads, admin
  const [selectedArticle, setSelectedArticle] = useState(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // State Data
  const [articles, setArticles] = useState(initialArticles);
  const [photos, setPhotos] = useState(initialPhotos);
  const [downloads, setDownloads] = useState(initialDownloads);

  // Navigation Handler
  const navigate = (view, article = null) => {
    setCurrentView(view);
    setSelectedArticle(article);
    setMobileMenuOpen(false);
    window.scrollTo(0, 0);
  };

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-800">
      {/* Header / Navbar */}
      <header className="bg-white shadow-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => navigate('home')}>
              <span className="text-2xl md:text-3xl font-extrabold text-blue-900 tracking-tighter drop-shadow-sm">
                Warta <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-red-600">K3S</span> <span className="text-blue-600 font-bold text-xl md:text-2xl">Karangdadap</span>
              </span>
            </div>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex space-x-8">
              <button onClick={() => navigate('home')} className={`text-sm font-semibold hover:text-blue-600 transition-colors ${currentView === 'home' || currentView === 'article' ? 'text-blue-700' : 'text-gray-600'}`}>Berita</button>
              <button onClick={() => navigate('gallery')} className={`text-sm font-semibold hover:text-blue-600 transition-colors ${currentView === 'gallery' ? 'text-blue-700' : 'text-gray-600'}`}>Galeri Foto</button>
              <button onClick={() => navigate('downloads')} className={`text-sm font-semibold hover:text-blue-600 transition-colors ${currentView === 'downloads' ? 'text-blue-700' : 'text-gray-600'}`}>Unduhan</button>
            </nav>

            {/* Search (Mock) & Mobile Menu Button */}
            <div className="flex items-center space-x-4">
              <div className="hidden md:block relative">
                <input type="text" placeholder="Cari berita..." className="bg-gray-100 rounded-full py-1.5 pl-4 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-48" />
                <Search size={16} className="absolute right-3 top-2 text-gray-500" />
              </div>
              <button className="md:hidden p-2 text-gray-600" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-100 px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <button onClick={() => navigate('home')} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Berita</button>
            <button onClick={() => navigate('gallery')} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Galeri Foto</button>
            <button onClick={() => navigate('downloads')} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Unduhan</button>
          </div>
        )}
      </header>

      {/* Main Content Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {currentView === 'home' && <HomeView articles={articles} navigate={navigate} />}
        {currentView === 'article' && <ArticleView article={selectedArticle} navigate={navigate} articles={articles} />}
        {currentView === 'gallery' && <GalleryView photos={photos} />}
        {currentView === 'downloads' && <DownloadView downloads={downloads} />}
        {currentView === 'admin' && (
          <AdminView 
            setArticles={setArticles} 
            setPhotos={setPhotos} 
            setDownloads={setDownloads} 
          />
        )}
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-10 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div className="mb-4">
              <span className="text-2xl md:text-3xl font-extrabold text-white tracking-tighter">
                Warta <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-500">K3S</span> <span className="text-blue-400 font-bold text-xl md:text-2xl">Karangdadap</span>
              </span>
            </div>
            <p className="text-gray-400 text-sm">Portal berita terpercaya yang menyajikan informasi terkini, akurat, dan mendalam seputar kegiatan, foto, dan informasi publik K3S Karangdadap.</p>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">Kategori</h3>
            <ul className="space-y-2 text-sm text-gray-400">
              <li><button className="hover:text-white transition">Nasional</button></li>
              <li><button className="hover:text-white transition">Teknologi</button></li>
              <li><button className="hover:text-white transition">Olahraga</button></li>
              <li><button className="hover:text-white transition">Gaya Hidup</button></li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">Layanan</h3>
            <ul className="space-y-2 text-sm text-gray-400">
              <li><button onClick={() => navigate('gallery')} className="hover:text-white transition">Galeri Kegiatan</button></li>
              <li><button onClick={() => navigate('downloads')} className="hover:text-white transition">Pusat Unduhan</button></li>
              <li><button className="hover:text-white transition">Hubungi Kami</button></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pt-8 border-t border-gray-800 text-sm text-gray-500 flex flex-col md:flex-row justify-between items-center">
          <p>&copy; 2026 Warta K3S Karangdadap. Hak Cipta Dilindungi. Prototipe Demo.</p>
          <button 
            onClick={() => navigate('admin')} 
            className={`mt-4 md:mt-0 flex items-center justify-center p-2 rounded-full hover:bg-gray-800 hover:text-white transition-all ${currentView === 'admin' ? 'text-white bg-gray-800' : 'text-gray-600'}`}
            title="Masuk ke Panel Admin"
          >
            <Shield size={18} />
          </button>
        </div>
      </footer>
    </div>
  );
}

// --- SUB-COMPONENTS ---

function HomeView({ articles, navigate }) {
  const heroArticle = articles[0];
  const otherArticles = articles.slice(1);

  return (
    <div className="space-y-10">
      {/* Headline / Hero Section */}
      {heroArticle && (
        <div 
          className="relative rounded-2xl overflow-hidden cursor-pointer group shadow-lg"
          onClick={() => navigate('article', heroArticle)}
        >
          <div className="absolute inset-0 bg-black/40 group-hover:bg-black/30 transition-colors z-10"></div>
          <img 
            src={heroArticle.image} 
            alt={heroArticle.title} 
            className="w-full h-[400px] md:h-[500px] object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute bottom-0 left-0 p-6 md:p-10 z-20 w-full md:w-3/4">
            <span className="bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded uppercase tracking-wider mb-4 inline-block">
              {heroArticle.category}
            </span>
            <h1 className="text-3xl md:text-5xl font-bold text-white mb-3 leading-tight">
              {heroArticle.title}
            </h1>
            <p className="text-gray-200 text-sm md:text-base hidden md:block mb-4">
              {heroArticle.summary}
            </p>
            <div className="flex items-center text-gray-300 text-sm space-x-4">
              <span className="flex items-center"><User size={14} className="mr-1"/> {heroArticle.author}</span>
              <span className="flex items-center"><Calendar size={14} className="mr-1"/> {heroArticle.date}</span>
            </div>
          </div>
        </div>
      )}

      {/* Grid Berita Terbaru */}
      <div>
        <div className="flex items-center justify-between mb-6 border-b-2 border-gray-200 pb-2">
          <h2 className="text-2xl font-bold text-gray-800 relative">
            <span className="absolute -bottom-[10px] left-0 w-12 h-1 bg-blue-600 rounded-full"></span>
            Berita Terkini
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {otherArticles.map(article => (
            <div key={article.id} className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col cursor-pointer" onClick={() => navigate('article', article)}>
              <div className="relative h-48 overflow-hidden">
                <img src={article.image} alt={article.title} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                <span className="absolute top-4 left-4 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">
                  {article.category}
                </span>
              </div>
              <div className="p-5 flex-grow flex flex-col">
                <h3 className="text-xl font-bold text-gray-900 mb-2 leading-snug hover:text-blue-600 transition-colors">
                  {article.title}
                </h3>
                <p className="text-gray-600 text-sm mb-4 line-clamp-2 flex-grow">
                  {article.summary}
                </p>
                <div className="text-xs text-gray-500 flex justify-between items-center mt-auto pt-4 border-t border-gray-100">
                  <span>{article.date}</span>
                  <span className="flex items-center text-blue-600 font-medium">Baca <ChevronRight size={14} /></span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ArticleView({ article, navigate, articles }) {
  if (!article) return <div>Artikel tidak ditemukan.</div>;

  const relatedArticles = articles.filter(a => a.id !== article.id).slice(0, 3);

  return (
    <div className="flex flex-col lg:flex-row gap-10">
      {/* Konten Utama Artikel */}
      <div className="lg:w-2/3">
        {/* Breadcrumb */}
        <div className="flex text-sm text-gray-500 mb-4 items-center">
          <button onClick={() => navigate('home')} className="hover:text-blue-600">Berita</button>
          <ChevronRight size={14} className="mx-2" />
          <span className="text-blue-600 font-medium">{article.category}</span>
        </div>

        <h1 className="text-3xl md:text-5xl font-extrabold text-gray-900 mb-6 leading-tight">
          {article.title}
        </h1>
        
        <div className="flex items-center text-gray-500 text-sm mb-8 bg-gray-100 p-3 rounded-lg">
          <div className="flex items-center mr-6">
            <div className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-2 font-bold">
              {article.author.charAt(0)}
            </div>
            Oleh <span className="font-semibold text-gray-800 ml-1">{article.author}</span>
          </div>
          <div className="flex items-center">
            <Calendar size={16} className="mr-2" /> {article.date}
          </div>
        </div>

        <div className="mb-8 rounded-xl overflow-hidden shadow-sm">
          <img src={article.image} alt={article.title} className="w-full max-h-[500px] object-cover" />
          <p className="text-xs text-gray-500 text-center p-2 bg-gray-50 border-b border-gray-200">
            Ilustrasi foto: {article.title} (Sumber: Warta K3S Karangdadap)
          </p>
        </div>

        <div className="prose prose-lg max-w-none text-gray-800 leading-relaxed">
          <p className="font-bold text-xl mb-4">{article.summary}</p>
          <p>{article.content}</p>
          {/* Paragraf tambahan untuk mensimulasikan artikel panjang */}
          <p className="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>

      {/* Sidebar Berita Terkait */}
      <div className="lg:w-1/3 space-y-8">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
          <h3 className="text-xl font-bold mb-4 border-b-2 border-blue-600 pb-2 inline-block">Berita Terkait</h3>
          <div className="space-y-6 mt-2">
            {relatedArticles.map(rel => (
              <div key={rel.id} className="flex gap-4 cursor-pointer group" onClick={() => navigate('article', rel)}>
                <img src={rel.image} alt={rel.title} className="w-24 h-24 object-cover rounded-lg group-hover:opacity-80 transition-opacity" />
                <div>
                  <h4 className="font-bold text-gray-900 leading-snug group-hover:text-blue-600 transition-colors line-clamp-2 text-sm">{rel.title}</h4>
                  <p className="text-xs text-gray-500 mt-2">{rel.date}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function GalleryView({ photos }) {
  return (
    <div>
      <div className="text-center mb-10">
        <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Galeri Kegiatan</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">Kumpulan dokumentasi foto berbagai kegiatan, acara, dan peristiwa penting yang telah diliput oleh tim redaksi kami.</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {photos.map(photo => (
          <div key={photo.id} className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow group">
            <div className="relative h-64 overflow-hidden">
              <img src={photo.url} alt={photo.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
                <ImageIcon className="text-white mb-1 mr-2" size={20} />
                <span className="text-white text-sm font-medium">Lihat Detail</span>
              </div>
            </div>
            <div className="p-4 border-t border-gray-100">
              <h3 className="font-bold text-lg text-gray-900 mb-1 truncate">{photo.title}</h3>
              <p className="text-sm text-gray-500">{photo.date}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DownloadView({ downloads }) {
  const handleDownload = (title) => {
    // Simulasi proses download
    alert(`Mengunduh file: ${title}`);
  };

  return (
    <div className="max-w-4xl mx-auto">
      <div className="text-center mb-10">
        <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Pusat Unduhan File</h1>
        <p className="text-gray-600">Silakan unduh dokumen, laporan, dan formulir resmi yang tersedia untuk publik.</p>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <ul className="divide-y divide-gray-200">
          {downloads.map(file => (
            <li key={file.id} className="p-4 sm:p-6 hover:bg-gray-50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div className="flex items-start gap-4">
                <div className="bg-blue-100 p-3 rounded-lg text-blue-600 mt-1 sm:mt-0">
                  <FileText size={24} />
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">{file.title}</h3>
                  <div className="flex flex-wrap items-center text-sm text-gray-500 mt-1 gap-x-4">
                    <span>Ukuran: {file.size}</span>
                    <span>Diunggah: {file.date}</span>
                  </div>
                </div>
              </div>
              <button 
                onClick={() => handleDownload(file.title)}
                className="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 self-start sm:self-center transition-colors"
              >
                <Download size={16} className="mr-2" />
                Unduh
              </button>
            </li>
          ))}
          {downloads.length === 0 && (
            <li className="p-8 text-center text-gray-500">Belum ada file yang tersedia.</li>
          )}
        </ul>
      </div>
    </div>
  );
}

function AdminView({ setArticles, setPhotos, setDownloads }) {
  const [activeTab, setActiveTab] = useState('artikel'); // artikel, foto, file
  const [message, setMessage] = useState('');

  // Form States
  const [title, setTitle] = useState('');
  const [category, setCategory] = useState('Nasional');
  const [content, setContent] = useState('');
  const [fileSize, setFileSize] = useState('');

  const getTodayDate = () => {
    const today = new Date();
    return `${today.getDate()} Mei 2026`; // Hardcoded month/year for demo consistency
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!title) {
      setMessage("Judul tidak boleh kosong!");
      setTimeout(() => setMessage(''), 3000);
      return;
    }

    if (activeTab === 'artikel') {
      const newArticle = {
        id: Date.now(),
        title,
        category,
        author: "Admin Warta K3S",
        date: getTodayDate(),
        image: `https://picsum.photos/seed/${Date.now()}/800/400`,
        summary: content.substring(0, 100) + '...',
        content: content || "Konten artikel simulasi belum diisi secara detail."
      };
      setArticles(prev => [newArticle, ...prev]);
      
    } else if (activeTab === 'foto') {
      const newPhoto = {
        id: Date.now(),
        title,
        url: `https://picsum.photos/seed/${Date.now()}/600/400`,
        date: getTodayDate()
      };
      setPhotos(prev => [newPhoto, ...prev]);
      
    } else if (activeTab === 'file') {
      const newDownload = {
        id: Date.now(),
        title: title.includes('.') ? title : `${title}.pdf`,
        size: fileSize || "1.2 MB",
        date: getTodayDate()
      };
      setDownloads(prev => [newDownload, ...prev]);
    }

    // Reset & Notify
    setTitle('');
    setContent('');
    setFileSize('');
    setMessage(`Berhasil mengunggah ${activeTab}! Silakan cek halaman terkait.`);
    setTimeout(() => setMessage(''), 4000);
  };

  return (
    <div className="max-w-3xl mx-auto">
      <div className="bg-white rounded-2xl shadow-md border border-gray-200 overflow-hidden">
        {/* Header Admin */}
        <div className="bg-gray-900 p-6 text-white">
          <h2 className="text-2xl font-bold flex items-center">
            <Upload className="mr-3" /> Panel Admin (Simulasi Unggah)
          </h2>
          <p className="text-gray-400 text-sm mt-2">
            Pilih jenis konten yang ingin Anda tambahkan ke website. Data akan disimpan sementara (state).
          </p>
        </div>

        {/* Tab Navigasi */}
        <div className="flex border-b border-gray-200">
          <button 
            className={`flex-1 py-4 text-sm font-semibold text-center ${activeTab === 'artikel' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}
            onClick={() => setActiveTab('artikel')}
          >
            Unggah Berita / Artikel
          </button>
          <button 
            className={`flex-1 py-4 text-sm font-semibold text-center ${activeTab === 'foto' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}
            onClick={() => setActiveTab('foto')}
          >
            Unggah Foto Kegiatan
          </button>
          <button 
            className={`flex-1 py-4 text-sm font-semibold text-center ${activeTab === 'file' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}
            onClick={() => setActiveTab('file')}
          >
            Unggah File Dokumen
          </button>
        </div>

        {/* Form Container */}
        <div className="p-6 sm:p-8">
          {message && (
            <div className="mb-6 p-4 bg-green-50 border-l-4 border-green-500 text-green-700 text-sm font-medium rounded">
              {message}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-6">
            
            {/* Input Judul (Digunakan oleh semua tab) */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Judul {activeTab === 'artikel' ? 'Artikel' : activeTab === 'foto' ? 'Foto' : 'File Dokumen'}
              </label>
              <input 
                type="text" 
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                placeholder={`Masukkan judul ${activeTab}...`}
              />
            </div>

            {/* Field Spesifik Artikel */}
            {activeTab === 'artikel' && (
              <>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
                  <select 
                    value={category}
                    onChange={(e) => setCategory(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                  >
                    <option>Nasional</option>
                    <option>Teknologi</option>
                    <option>Olahraga</option>
                    <option>Gaya Hidup</option>
                    <option>Ekonomi</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Isi Konten Berita</label>
                  <textarea 
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    rows="6"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Tulis isi berita di sini..."
                  ></textarea>
                </div>
                <div className="text-sm text-gray-500 bg-gray-50 p-3 rounded">
                  *Catatan: Gambar artikel akan digenerate secara otomatis (placeholder) untuk keperluan demonstrasi.
                </div>
              </>
            )}

            {/* Field Spesifik Foto */}
            {activeTab === 'foto' && (
              <div className="text-sm text-gray-500 bg-gray-50 p-4 rounded border border-dashed border-gray-300 text-center">
                <ImageIcon className="mx-auto text-gray-400 mb-2" size={32} />
                <p>Fitur unggah file foto fisik dinonaktifkan dalam mode demo ini.</p>
                <p className="mt-1 font-medium">Gambar placeholder akan digenerate otomatis saat Anda menekan tombol Unggah.</p>
              </div>
            )}

            {/* Field Spesifik File */}
            {activeTab === 'file' && (
              <>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Ukuran File (Contoh: 2.5 MB)</label>
                  <input 
                    type="text" 
                    value={fileSize}
                    onChange={(e) => setFileSize(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Opsional, misal: 1.5 MB"
                  />
                </div>
                <div className="text-sm text-gray-500 bg-gray-50 p-4 rounded border border-dashed border-gray-300 text-center">
                  <FileText className="mx-auto text-gray-400 mb-2" size={32} />
                  <p>Fitur unggah file dokumen fisik dinonaktifkan dalam mode demo ini.</p>
                  <p className="mt-1 font-medium">Data file virtual akan ditambahkan ke daftar Unduhan.</p>
                </div>
              </>
            )}

            {/* Submit Button */}
            <div className="pt-4 border-t border-gray-200">
              <button 
                type="submit"
                className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Publikasikan / Unggah Data
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}