import React, { useState } from 'react';
import { 
  Printer, 
  FileText, 
  BookOpen, 
  Clock, 
  Target, 
  ListChecks, 
  PenTool, 
  User, 
  Calendar,
  GraduationCap
} from 'lucide-react';

export default function App() {
  const [formData, setFormData] = useState({
    mataPelajaran: '',
    kelas: '',
    semester: 'Ganjil',
    materiPokok: '',
    alokasiWaktu: '',
    modelPembelajaran: 'Problem Based Learning (PBL)',
    tujuanPembelajaran: '',
    kegiatanPendahuluan: '',
    kegiatanInti: '',
    kegiatanPenutup: '',
    penilaian: '',
    namaGuru: '',
    tanggal: new Date().toISOString().split('T')[0],
  });

  const modelPembelajaranOptions = [
    'Problem Based Learning (PBL)',
    'Project Based Learning (PjBL)',
    'Discovery Learning',
    'Inquiry Learning',
    'Contextual Teaching and Learning (CTL)',
    'Cooperative Learning',
    'Direct Instruction (Pembelajaran Langsung)',
    'Flipped Classroom'
  ];

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans selection:bg-blue-200">
      {/* Header - Hidden on Print */}
      <header className="print:hidden bg-white/70 backdrop-blur-md sticky top-0 z-10 border-b border-slate-200 px-6 py-4 flex justify-between items-center shadow-sm">
        <div className="flex items-center gap-3">
          <div className="bg-blue-100 p-2 rounded-xl text-blue-600">
            <GraduationCap size={24} />
          </div>
          <div>
            <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              RPP Generator
            </h1>
            <p className="text-xs text-slate-500 font-medium">PKBM Pelita Hati</p>
          </div>
        </div>
        <button 
          onClick={handlePrint}
          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl font-medium transition-all shadow-sm shadow-blue-200 active:scale-95"
        >
          <Printer size={18} />
          <span>Cetak Dokumen</span>
        </button>
      </header>

      <main className="p-4 md:p-8 max-w-[1600px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        {/* Form Section - Hidden on Print */}
        <section className="print:hidden lg:col-span-5 space-y-6 h-[calc(100vh-120px)] overflow-y-auto pr-2 pb-10 custom-scrollbar">
          
          <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 space-y-6">
            <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
              <BookOpen className="text-blue-500" size={20} />
              <h2 className="text-lg font-semibold text-slate-700">Informasi Umum</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-1.5 md:col-span-2">
                <label className="text-sm font-medium text-slate-600 ml-1">Mata Pelajaran</label>
                <input 
                  type="text" name="mataPelajaran" value={formData.mataPelajaran} onChange={handleInputChange}
                  placeholder="Misal: Pendidikan Pancasila dan Kewarganegaraan"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm"
                />
              </div>
              
              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1">Kelas/Program</label>
                <input 
                  type="text" name="kelas" value={formData.kelas} onChange={handleInputChange}
                  placeholder="Misal: Paket C / XI"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1">Semester</label>
                <select 
                  name="semester" value={formData.semester} onChange={handleInputChange}
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm appearance-none"
                >
                  <option value="Ganjil">Ganjil</option>
                  <option value="Genap">Genap</option>
                </select>
              </div>

              <div className="space-y-1.5 md:col-span-2">
                <label className="text-sm font-medium text-slate-600 ml-1">Materi Pokok</label>
                <input 
                  type="text" name="materiPokok" value={formData.materiPokok} onChange={handleInputChange}
                  placeholder="Deskripsi singkat materi..."
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1 flex items-center gap-1"><Clock size={14}/> Alokasi Waktu</label>
                <input 
                  type="text" name="alokasiWaktu" value={formData.alokasiWaktu} onChange={handleInputChange}
                  placeholder="Misal: 2 x 45 Menit"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1">Model Pembelajaran</label>
                <div className="relative">
                  <select 
                    name="modelPembelajaran" value={formData.modelPembelajaran} onChange={handleInputChange}
                    className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-all text-sm appearance-none"
                  >
                    {modelPembelajaranOptions.map((model, idx) => (
                      <option key={idx} value={model}>{model}</option>
                    ))}
                  </select>
                  <div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
                    <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 space-y-6">
            <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
              <Target className="text-indigo-500" size={20} />
              <h2 className="text-lg font-semibold text-slate-700">Komponen Inti</h2>
            </div>

            <div className="space-y-1.5">
              <label className="text-sm font-medium text-slate-600 ml-1">Tujuan Pembelajaran</label>
              <textarea 
                name="tujuanPembelajaran" value={formData.tujuanPembelajaran} onChange={handleInputChange}
                rows="3" placeholder="Peserta didik mampu..."
                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-400 transition-all text-sm resize-none"
              ></textarea>
            </div>

            <div className="space-y-3">
              <label className="text-sm font-medium text-slate-600 ml-1 flex items-center gap-2">
                <ListChecks size={16} /> Kegiatan Pembelajaran
              </label>
              
              <div className="pl-3 border-l-2 border-indigo-100 space-y-3">
                <textarea 
                  name="kegiatanPendahuluan" value={formData.kegiatanPendahuluan} onChange={handleInputChange}
                  rows="2" placeholder="Kegiatan Pendahuluan (Apersepsi, Motivasi, dll)"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-400 transition-all text-sm resize-none"
                ></textarea>
                
                <textarea 
                  name="kegiatanInti" value={formData.kegiatanInti} onChange={handleInputChange}
                  rows="4" placeholder="Kegiatan Inti (Sesuai sintaks model pembelajaran)"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-400 transition-all text-sm resize-none"
                ></textarea>

                <textarea 
                  name="kegiatanPenutup" value={formData.kegiatanPenutup} onChange={handleInputChange}
                  rows="2" placeholder="Kegiatan Penutup (Refleksi, Kesimpulan, dll)"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-400 transition-all text-sm resize-none"
                ></textarea>
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-sm font-medium text-slate-600 ml-1 flex items-center gap-2">
                <PenTool size={16}/> Penilaian Pembelajaran (Asesmen)
              </label>
              <textarea 
                name="penilaian" value={formData.penilaian} onChange={handleInputChange}
                rows="3" placeholder="Sikap, Pengetahuan, dan Keterampilan..."
                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-400 transition-all text-sm resize-none"
              ></textarea>
            </div>
          </div>

          <div className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 space-y-6">
            <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
              <User className="text-emerald-500" size={20} />
              <h2 className="text-lg font-semibold text-slate-700">Pengesahan</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1">Nama Guru Mata Pelajaran</label>
                <input 
                  type="text" name="namaGuru" value={formData.namaGuru} onChange={handleInputChange}
                  placeholder="Nama Lengkap & Gelar"
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-100 focus:border-emerald-400 transition-all text-sm"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-sm font-medium text-slate-600 ml-1 flex items-center gap-1"><Calendar size={14}/> Tanggal RPP</label>
                <input 
                  type="date" name="tanggal" value={formData.tanggal} onChange={handleInputChange}
                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-100 focus:border-emerald-400 transition-all text-sm"
                />
              </div>
            </div>
          </div>

        </section>

        {/* Preview / Print Section */}
        <section className="print:col-span-12 lg:col-span-7 flex justify-center pb-10 print:pb-0">
          <div className="bg-white w-full max-w-[21cm] min-h-[29.7cm] shadow-xl print:shadow-none print:m-0 rounded-sm p-10 md:p-14 text-black text-[11pt] font-serif leading-snug">
            
            {/* Kop RPP */}
            <div className="text-center mb-8 border-b-2 border-black pb-4">
              <h1 className="font-bold text-lg">RENCANA PELAKSANAAN PEMBELAJARAN (RPP)</h1>
              <h2 className="font-bold text-md uppercase">PKBM PELITA HATI</h2>
            </div>

            {/* Identitas */}
            <table className="w-full mb-6">
              <tbody>
                <tr>
                  <td className="w-40 align-top py-1">Satuan Pendidikan</td>
                  <td className="w-4 align-top py-1">:</td>
                  <td className="font-semibold py-1">PKBM Pelita Hati</td>
                </tr>
                <tr>
                  <td className="align-top py-1">Mata Pelajaran</td>
                  <td className="align-top py-1">:</td>
                  <td className="py-1">{formData.mataPelajaran || '-'}</td>
                </tr>
                <tr>
                  <td className="align-top py-1">Kelas/Program/Smt</td>
                  <td className="align-top py-1">:</td>
                  <td className="py-1">{formData.kelas || '-'} / {formData.semester}</td>
                </tr>
                <tr>
                  <td className="align-top py-1">Materi Pokok</td>
                  <td className="align-top py-1">:</td>
                  <td className="py-1">{formData.materiPokok || '-'}</td>
                </tr>
                <tr>
                  <td className="align-top py-1">Alokasi Waktu</td>
                  <td className="align-top py-1">:</td>
                  <td className="py-1">{formData.alokasiWaktu || '-'}</td>
                </tr>
                <tr>
                  <td className="align-top py-1">Model Pembelajaran</td>
                  <td className="align-top py-1">:</td>
                  <td className="py-1">{formData.modelPembelajaran}</td>
                </tr>
              </tbody>
            </table>

            {/* Isi RPP */}
            <div className="space-y-4 text-justify">
              
              <div>
                <h3 className="font-bold mb-2">A. TUJUAN PEMBELAJARAN</h3>
                <div className="pl-4 whitespace-pre-line">
                  {formData.tujuanPembelajaran || 'Tujuan pembelajaran belum diisi.'}
                </div>
              </div>

              <div>
                <h3 className="font-bold mb-2">B. KEGIATAN PEMBELAJARAN</h3>
                <div className="pl-4 space-y-3">
                  <div>
                    <h4 className="font-semibold italic">1. Pendahuluan</h4>
                    <div className="whitespace-pre-line mt-1">
                       {formData.kegiatanPendahuluan || '-'}
                    </div>
                  </div>
                  <div>
                    <h4 className="font-semibold italic">2. Kegiatan Inti</h4>
                    <div className="whitespace-pre-line mt-1">
                       {formData.kegiatanInti || '-'}
                    </div>
                  </div>
                  <div>
                    <h4 className="font-semibold italic">3. Penutup</h4>
                    <div className="whitespace-pre-line mt-1">
                       {formData.kegiatanPenutup || '-'}
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <h3 className="font-bold mb-2">C. PENILAIAN (ASESMEN)</h3>
                <div className="pl-4 whitespace-pre-line">
                  {formData.penilaian || 'Asesmen belum diisi.'}
                </div>
              </div>
            </div>

            {/* Tanda Tangan */}
            <div className="mt-16 flex justify-between items-start pt-8 page-break-inside-avoid">
              <div className="text-center w-1/2 flex flex-col items-center">
                <p className="mb-20">Mengetahui,<br/>Kepala PKBM Pelita Hati</p>
                <p className="font-bold underline">Dadang Adimawan, SE</p>
              </div>
              <div className="text-center w-1/2 flex flex-col items-center">
                <p className="mb-20">
                  .........., {new Date(formData.tanggal).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}<br/>
                  Guru Mata Pelajaran
                </p>
                <p className="font-bold underline">{formData.namaGuru || '( ________________________ )'}</p>
              </div>
            </div>

          </div>
        </section>

      </main>

      <style dangerouslySetInnerHTML={{__html: `
        @media print {
          body {
            background-color: white;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
          @page {
            size: A4 portrait;
            margin: 1cm 0;
          }
        }
        
        /* Custom scrollbar for form section */
        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background-color: #cbd5e1;
          border-radius: 20px;
        }
      `}} />
    </div>
  );
}