import React, { useState, useEffect } from 'react';
import { BookOpen, Search, PenTool, User, Heart, Clock, ChevronLeft, LogIn, LogOut, Compass, MessageSquare, Send } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, addDoc, doc, updateDoc } from 'firebase/firestore';

// Inisialisasi Firebase Database
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- MOCK DATA (Simulasi Database) ---
const INITIAL_RESUMES = [
  {
    id: 1,
    title: "Membangun Kebiasaan Kecil yang Berdampak Besar",
    bookTitle: "Atomic Habits",
    bookAuthor: "James Clear",
    genre: "Self-Improvement",
    content: "Atomic Habits mengajarkan bahwa perubahan besar tidak datang dari lompatan besar, melainkan dari kebiasaan-kebiasaan kecil yang diulang setiap hari (1% lebih baik setiap hari).\n\nAda 4 Kaidah Perubahan Perilaku:\n1. Menjadikannya Terlihat (Cue)\n2. Menjadikannya Menarik (Craving)\n3. Menjadikannya Mudah (Response)\n4. Menjadikannya Memuaskan (Reward)\n\nBuku ini sangat praktis. Alih-alih berfokus pada 'tujuan' (goal), James Clear menyarankan kita untuk berfokus pada 'sistem'. Jika kita memiliki sistem yang baik, tujuan akan tercapai dengan sendirinya.",
    authorName: "Budi Santoso",
    date: "12 Mei 2026",
    likes: 124,
    readingTime: "3 min"
  },
  {
    id: 2,
    title: "Sejarah Singkat Umat Manusia",
    bookTitle: "Sapiens",
    bookAuthor: "Yuval Noah Harari",
    genre: "Sejarah",
    content: "Sapiens membawa kita pada perjalanan panjang spesies kita, Homo Sapiens, dari kera biasa menjadi penguasa dunia.\n\nHarari membagi sejarah manusia ke dalam 3 revolusi besar:\n1. Revolusi Kognitif: Kemampuan berimajinasi dan menciptakan fiksi (agama, uang, negara) yang memungkinkan kerja sama dalam skala masif.\n2. Revolusi Agrikultur: Perpindahan dari berburu menjadi bertani. Harari menyebut ini sebagai 'penipuan terbesar dalam sejarah' karena membuat hidup manusia purba lebih sulit.\n3. Revolusi Saintifik: Kesadaran bahwa kita tidak tahu segalanya, memicu penjelajahan dan penemuan luar biasa hingga hari ini.\n\nBuku yang akan mengubah cara Anda melihat dunia.",
    authorName: "Siti Aminah",
    date: "10 Mei 2026",
    likes: 89,
    readingTime: "5 min"
  },
  {
    id: 3,
    title: "Seni Bersikap Bodo Amat",
    bookTitle: "The Subtle Art of Not Giving a F*ck",
    bookAuthor: "Mark Manson",
    genre: "Psikologi",
    content: "Berbeda dengan buku motivasi pada umumnya, buku ini justru menyuruh kita untuk menerima hal-hal negatif dan menyadari bahwa hidup ini penuh penderitaan.\n\nKuncinya bukan lari dari masalah, tapi memilih masalah apa yang layak kita pedulikan. Kita punya energi ('f*cks') yang terbatas, jadi berikanlah hanya pada hal-hal yang benar-benar penting seperti keluarga, passion, dan nilai hidup kita yang sebenarnya.\n\nJangan memaksakan diri untuk selalu positif, karena itu justru akan meracuni mental kita.",
    authorName: "Raditya Dika",
    date: "08 Mei 2026",
    likes: 256,
    readingTime: "4 min"
  }
];

export default function App() {
  // --- STATES ---
  const [currentView, setCurrentView] = useState('home'); // 'home', 'explore', 'detail', 'create'
  const [resumes, setResumes] = useState([]); // Mulai dengan array kosong, akan diisi dari Firebase
  const [selectedResume, setSelectedResume] = useState(null);
  const [searchQuery, setSearchQuery] = useState(''); // State untuk fitur pencarian
  const [allComments, setAllComments] = useState([]); // State untuk menampung semua komentar
  
  // Simulasi Autentikasi Frontend & Backend
  const [currentUser, setCurrentUser] = useState(null); // null = Guest, object = Logged in
  const [firebaseUser, setFirebaseUser] = useState(null);

  // --- EFFECTS (Koneksi ke Cloud Database) ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth error:", error);
      }
    };
    initAuth();
    
    const unsubscribe = onAuthStateChanged(auth, setFirebaseUser);
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!firebaseUser) return; // Pastikan user sudah terautentikasi sebelum mengambil data
    
    // Mengambil data secara Real-Time dari Firestore
    const resumesRef = collection(db, 'artifacts', appId, 'public', 'data', 'resumes');
    const unsubscribe = onSnapshot(resumesRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      
      // Urutkan berdasarkan waktu pembuatan terbaru (dari yang paling baru)
      data.sort((a, b) => b.createdAt - a.createdAt);
      
      if (data.length === 0) {
        // Tampilkan data simulasi jika database masih kosong sama sekali
        setResumes(INITIAL_RESUMES);
      } else {
        setResumes(data);
        
        // Update data resume yang sedang dibaca jika ada perubahan (seperti jumlah Like)
        if (selectedResume) {
          const updatedSelected = data.find(r => r.id === selectedResume.id);
          if (updatedSelected) setSelectedResume(updatedSelected);
        }
      }
    }, (error) => {
      console.error("Firestore error:", error);
    });

    return () => unsubscribe();
  }, [firebaseUser, selectedResume?.id]); // Hati-hati dependency ditambahkan agar data detail terupdate

  // Effect untuk mengambil data Komentar dari Cloud Database
  useEffect(() => {
    if (!firebaseUser) return;
    
    const commentsRef = collection(db, 'artifacts', appId, 'public', 'data', 'comments');
    const unsubscribe = onSnapshot(commentsRef, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setAllComments(data);
    }, (error) => {
      console.error("Firestore comments error:", error);
    });

    return () => unsubscribe();
  }, [firebaseUser]);

  // --- HANDLERS ---
  const navigateTo = (view, data = null) => {
    if (data) setSelectedResume(data);
    setCurrentView(view);
    window.scrollTo(0, 0);
  };

  const handleLoginToggle = () => {
    if (currentUser) {
      setCurrentUser(null);
    } else {
      // Buat nama otomatis dari UID akun untuk mensimulasikan registrasi yang mulus
      const userName = firebaseUser ? `Pembaca ${firebaseUser.uid.substring(0,4)}` : "Pengguna Baru";
      setCurrentUser({ name: userName, id: firebaseUser?.uid || "u123" });
    }
  };

  const handleCreateSubmit = async (e) => {
    e.preventDefault();
    if (!firebaseUser) return;

    const formData = new FormData(e.target);
    
    // Hitung estimasi waktu baca (kasar: 200 kata per menit)
    const content = formData.get('content');
    const wordCount = content.split(/\s+/).length;
    const readTime = Math.ceil(wordCount / 200) || 1;

    const newResume = {
      title: formData.get('title'),
      bookTitle: formData.get('bookTitle'),
      bookAuthor: formData.get('bookAuthor'),
      genre: formData.get('genre'),
      content: content,
      authorName: currentUser.name,
      date: new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }),
      likes: 0,
      readingTime: `${readTime} min`,
      createdAt: Date.now(), // Digunakan untuk mengurutkan
      authorUid: firebaseUser.uid
    };

    try {
      // Simpan resume ke Database Permanen
      const resumesRef = collection(db, 'artifacts', appId, 'public', 'data', 'resumes');
      await addDoc(resumesRef, newResume);
      navigateTo('home');
    } catch (error) {
      console.error("Error adding document: ", error);
    }
  };

  const handleLike = async (resumeId, currentLikes) => {
    if (!firebaseUser) return;
    try {
      const resumeRef = doc(db, 'artifacts', appId, 'public', 'data', 'resumes', resumeId.toString());
      await updateDoc(resumeRef, {
        likes: currentLikes + 1
      });
    } catch (error) {
      console.log("Gagal menambahkan like (Jika Anda menekan data simulasi, ini normal): ", error);
    }
  };

  const handleAddComment = async (e) => {
    e.preventDefault();
    if (!firebaseUser || !selectedResume) return;

    const formData = new FormData(e.target);
    const commentText = formData.get('commentText');
    if (!commentText.trim()) return;

    const newComment = {
      resumeId: selectedResume.id,
      text: commentText,
      authorName: currentUser?.name || "Pengguna Anonim",
      authorUid: firebaseUser.uid,
      createdAt: Date.now(),
      date: new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })
    };

    try {
      const commentsRef = collection(db, 'artifacts', appId, 'public', 'data', 'comments');
      await addDoc(commentsRef, newComment);
      e.target.reset(); // Kosongkan kolom komentar setelah berhasil terkirim
    } catch (error) {
      console.error("Error adding comment: ", error);
    }
  };

  // --- COMPONENTS ---

  const Navbar = () => (
    <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center cursor-pointer" onClick={() => navigateTo('home')}>
            <div className="bg-indigo-600 text-white p-2 rounded-lg mr-2">
              <BookOpen size={20} />
            </div>
            <span className="font-bold text-xl text-gray-900 tracking-tight">Resume<span className="text-indigo-600">Books</span></span>
          </div>

          <div className="flex items-center space-x-4">
            <button onClick={() => navigateTo('explore')} className="text-gray-500 hover:text-indigo-600 hidden sm:flex items-center space-x-1">
              <Compass size={18} />
              <span>Jelajahi</span>
            </button>
            
            {currentUser ? (
              <>
                <button onClick={() => navigateTo('create')} className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors flex items-center space-x-2">
                  <PenTool size={16} />
                  <span className="hidden sm:inline">Tulis Resume</span>
                </button>
                <div className="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-700 font-bold border border-indigo-200">
                  {currentUser.name.charAt(0)}
                </div>
                <button onClick={handleLoginToggle} className="text-gray-400 hover:text-red-500">
                  <LogOut size={20} />
                </button>
              </>
            ) : (
              <button onClick={handleLoginToggle} className="flex items-center space-x-2 text-indigo-600 border border-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-full text-sm font-medium transition-colors">
                <LogIn size={16} />
                <span>Masuk</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </nav>
  );

  const ResumeCard = ({ resume }) => (
    <div 
      onClick={() => navigateTo('detail', resume)}
      className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md hover:border-indigo-100 transition-all cursor-pointer flex flex-col h-full group"
    >
      <div className="mb-4 flex justify-between items-start">
        <span className="inline-block px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-full">
          {resume.genre}
        </span>
        <div className="flex items-center space-x-3 text-gray-400 text-sm">
          <div className="flex items-center">
            <Heart size={14} className="mr-1 group-hover:text-red-500 transition-colors" /> {resume.likes || 0}
          </div>
          <div className="flex items-center">
            <MessageSquare size={14} className="mr-1 group-hover:text-indigo-500 transition-colors" /> 
            {allComments.filter(c => c.resumeId === resume.id).length}
          </div>
        </div>
      </div>
      
      <h3 className="text-xl font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-indigo-600 transition-colors">
        {resume.title}
      </h3>
      
      <div className="mb-4 text-sm text-gray-500">
        <span className="font-medium text-gray-700">Buku:</span> {resume.bookTitle} <br/>
        <span className="font-medium text-gray-700">Karya:</span> {resume.bookAuthor}
      </div>
      
      <p className="text-gray-600 mb-6 line-clamp-3 text-sm leading-relaxed flex-grow">
        {resume.content}
      </p>
      
      <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-50">
        <div className="flex items-center">
          <div className="h-8 w-8 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-700 font-bold text-xs mr-2">
            {resume.authorName.charAt(0)}
          </div>
          <div>
            <p className="text-xs font-medium text-gray-900">{resume.authorName}</p>
            <p className="text-xs text-gray-500">{resume.date}</p>
          </div>
        </div>
        <div className="flex items-center text-xs text-gray-400">
          <Clock size={12} className="mr-1" /> {resume.readingTime}
        </div>
      </div>
    </div>
  );

  // --- VIEWS ---

  const HomeView = () => (
    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      {/* Hero Section */}
      <div className="bg-gradient-to-br from-indigo-900 via-indigo-800 to-purple-900 rounded-3xl p-8 md:p-16 text-center mb-16 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-20"></div>
        <div className="relative z-10">
          <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-6 tracking-tight">
            Sari Pati Buku, <br className="hidden md:block"/> Tanpa Basa-Basi.
          </h1>
          <p className="text-indigo-100 text-lg md:text-xl max-w-2xl mx-auto mb-8 font-light">
            Platform komunitas pecinta buku. Temukan intisari buku terbaik dari pembaca lain, atau bagikan rangkuman bukumu sendiri untuk menginspirasi dunia.
          </p>
          <div className="flex justify-center space-x-4">
            <button onClick={() => navigateTo('explore')} className="bg-white text-indigo-900 px-6 py-3 rounded-full font-semibold hover:bg-gray-50 transition-colors shadow-lg">
              Mulai Membaca
            </button>
            {!currentUser && (
              <button onClick={handleLoginToggle} className="bg-indigo-700 border border-indigo-500 text-white px-6 py-3 rounded-full font-semibold hover:bg-indigo-600 transition-colors">
                Gabung Sekarang
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Terkini Section */}
      <div className="flex justify-between items-end mb-8">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">Resume Terkini</h2>
          <p className="text-gray-500 mt-1">Ide-ide segar dari komunitas kita hari ini.</p>
        </div>
        <button onClick={() => navigateTo('explore')} className="text-indigo-600 font-medium hover:text-indigo-800 text-sm hidden sm:block">
          Lihat Semua &rarr;
        </button>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {resumes.slice(0, 3).map(resume => (
          <ResumeCard key={resume.id} resume={resume} />
        ))}
      </div>
    </div>
  );

  const ExploreView = () => {
    // Logika Pencarian Dinamis
    const filteredResumes = resumes.filter(r => 
      r.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.bookTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.bookAuthor.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.genre.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">Eksplorasi Ide</h1>
        
        {/* Simple Search Bar */}
        <div className="relative max-w-2xl mx-auto mb-12">
          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input 
            type="text" 
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Cari judul buku, penulis, atau genre..." 
            className="block w-full pl-11 pr-4 py-4 bg-white border border-gray-200 rounded-full text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm transition-shadow"
          />
        </div>

        {filteredResumes.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredResumes.map(resume => (
              <ResumeCard key={resume.id} resume={resume} />
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-indigo-50 mb-4">
              <Search className="h-8 w-8 text-indigo-300" />
            </div>
            <h3 className="text-lg font-medium text-gray-900">Tidak ada hasil ditemukan</h3>
            <p className="text-gray-500 mt-1">Coba gunakan kata kunci lain untuk mencari.</p>
          </div>
        )}
      </div>
    );
  };

  const DetailView = () => {
    if (!selectedResume) return null;
    return (
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <button onClick={() => navigateTo('home')} className="flex items-center text-gray-500 hover:text-indigo-600 mb-8 transition-colors">
          <ChevronLeft size={20} className="mr-1" /> Kembali
        </button>

        <div className="bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-gray-100">
          <div className="text-center mb-10">
            <span className="inline-block px-4 py-1.5 bg-indigo-50 text-indigo-700 text-sm font-semibold rounded-full mb-4">
              {selectedResume.genre}
            </span>
            <h1 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4 leading-tight">
              {selectedResume.title}
            </h1>
            <p className="text-lg text-gray-500 mb-6">
              Resume dari buku <span className="font-semibold text-gray-800">"{selectedResume.bookTitle}"</span> karya {selectedResume.bookAuthor}
            </p>
            
            <div className="flex items-center justify-center space-x-6 text-sm">
              <div className="flex items-center">
                <div className="h-10 w-10 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">
                  {selectedResume.authorName.charAt(0)}
                </div>
                <div className="text-left">
                  <p className="font-semibold text-gray-900">{selectedResume.authorName}</p>
                  <p className="text-gray-500">{selectedResume.date}</p>
                </div>
              </div>
              <div className="h-8 w-px bg-gray-200"></div>
              <div className="flex items-center text-gray-500">
                <Clock size={16} className="mr-1.5" /> {selectedResume.readingTime}
              </div>
            </div>
          </div>

          <div className="prose prose-lg prose-indigo max-w-none text-gray-700 leading-relaxed whitespace-pre-wrap">
            {selectedResume.content}
          </div>

          <div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
            <button 
              onClick={() => handleLike(selectedResume.id, selectedResume.likes)}
              className="flex items-center space-x-2 px-6 py-3 bg-gray-50 hover:bg-red-50 text-gray-600 hover:text-red-500 rounded-full transition-colors border border-gray-200"
            >
              <Heart size={20} />
              <span className="font-medium">Apresiasi Resume Ini ({selectedResume.likes})</span>
            </button>
          </div>
          
          {/* Bagian Komentar */}
          <div className="mt-16 pt-10 border-t border-gray-100">
            <h3 className="text-2xl font-bold text-gray-900 mb-8 flex items-center">
              <MessageSquare size={24} className="mr-3 text-indigo-600" />
              Komentar & Diskusi ({allComments.filter(c => c.resumeId === selectedResume.id).length})
            </h3>

            {/* Form Tambah Komentar */}
            {currentUser ? (
              <form onSubmit={handleAddComment} className="mb-10 flex space-x-4">
                <div className="flex-shrink-0">
                  <div className="h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-700 font-bold border border-indigo-200">
                    {currentUser.name.charAt(0)}
                  </div>
                </div>
                <div className="flex-grow">
                  <textarea 
                    name="commentText"
                    rows="3" 
                    placeholder="Bagikan pendapat Anda tentang buku atau resume ini..." 
                    className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors resize-y mb-3"
                    required
                  ></textarea>
                  <div className="flex justify-end">
                    <button type="submit" className="flex items-center space-x-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-colors shadow-sm">
                      <Send size={16} />
                      <span>Kirim Komentar</span>
                    </button>
                  </div>
                </div>
              </form>
            ) : (
              <div className="bg-indigo-50 rounded-2xl p-8 text-center mb-10 border border-indigo-100">
                <p className="text-indigo-900 mb-4 font-medium">Masuk untuk ikut berdiskusi dan memberikan pendapat Anda.</p>
                <button onClick={handleLoginToggle} className="inline-flex items-center space-x-2 bg-white border border-indigo-200 hover:border-indigo-500 text-indigo-700 px-6 py-2.5 rounded-full font-semibold transition-colors shadow-sm">
                  <LogIn size={16} />
                  <span>Masuk Sekarang</span>
                </button>
              </div>
            )}

            {/* Daftar Komentar */}
            <div className="space-y-6">
              {allComments
                .filter(c => c.resumeId === selectedResume.id)
                .sort((a, b) => b.createdAt - a.createdAt)
                .map((comment) => (
                  <div key={comment.id} className="flex space-x-4 bg-white p-5 rounded-2xl border border-gray-100 shadow-sm">
                    <div className="flex-shrink-0">
                      <div className="h-10 w-10 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center text-gray-600 font-bold">
                        {comment.authorName.charAt(0)}
                      </div>
                    </div>
                    <div className="flex-grow">
                      <div className="flex items-center justify-between mb-2">
                        <h4 className="font-semibold text-gray-900">{comment.authorName}</h4>
                        <span className="text-xs text-gray-400 font-medium bg-gray-50 px-2 py-1 rounded-md">{comment.date}</span>
                      </div>
                      <p className="text-gray-700 leading-relaxed whitespace-pre-wrap text-sm md:text-base">{comment.text}</p>
                    </div>
                  </div>
                ))}
                
              {allComments.filter(c => c.resumeId === selectedResume.id).length === 0 && (
                <div className="text-center py-12 text-gray-400 bg-gray-50 rounded-2xl border border-dashed border-gray-200">
                  <MessageSquare size={32} className="mx-auto mb-3 text-gray-300" />
                  <p>Belum ada komentar. Jadilah yang pertama memulai diskusi!</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  };

  const CreateView = () => (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Tulis Resume Baru</h1>
        <p className="text-gray-500 mt-2">Bagikan pemahamanmu dan bantu orang lain belajar lebih cepat.</p>
      </div>

      <form onSubmit={handleCreateSubmit} className="bg-white rounded-3xl p-8 shadow-sm border border-gray-100">
        <div className="space-y-6">
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">Judul Resume Anda</label>
            <input required name="title" type="text" placeholder="Misal: Rahasia Produktivitas dari Atomic Habits" className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors" />
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Judul Buku Asli</label>
              <input required name="bookTitle" type="text" placeholder="Misal: Atomic Habits" className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors" />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Penulis Buku</label>
              <input required name="bookAuthor" type="text" placeholder="Misal: James Clear" className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">Kategori/Genre</label>
            <select name="genre" className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors text-gray-700">
              <option value="Self-Improvement">Self-Improvement</option>
              <option value="Bisnis & Keuangan">Bisnis & Keuangan</option>
              <option value="Psikologi">Psikologi</option>
              <option value="Fiksi">Fiksi</option>
              <option value="Biografi">Biografi</option>
              <option value="Sejarah">Sejarah</option>
              <option value="Sains">Sains</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">Isi Resume</label>
            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4 text-sm text-yellow-800 rounded-r-lg">
              <strong>Tips:</strong> Gunakan paragraf yang pendek. Fokus pada poin-poin utama dan opini pribadi Anda tentang buku tersebut.
            </div>
            <textarea required name="content" rows="12" placeholder="Tuliskan intisari buku di sini..." className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-colors resize-y"></textarea>
          </div>

          <div className="pt-4 border-t border-gray-100 flex justify-end space-x-4">
            <button type="button" onClick={() => navigateTo('home')} className="px-6 py-3 text-gray-500 hover:text-gray-700 font-medium">Batal</button>
            <button type="submit" className="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-semibold shadow-md transition-colors flex items-center space-x-2">
              <PenTool size={18} />
              <span>Publikasikan Resume</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 font-sans selection:bg-indigo-100 selection:text-indigo-900">
      <Navbar />
      <main>
        {currentView === 'home' && <HomeView />}
        {currentView === 'explore' && <ExploreView />}
        {currentView === 'detail' && <DetailView />}
        {currentView === 'create' && <CreateView />}
      </main>
      
      {/* Footer Minimalis */}
      <footer className="bg-white border-t border-gray-200 py-8 mt-12">
        <div className="max-w-6xl mx-auto px-4 text-center text-gray-500 text-sm">
          &copy; {new Date().getFullYear()} ResumeBooks. Dibuat untuk pecinta buku Indonesia.
        </div>
      </footer>
    </div>
  );
}