'use client';

import { useState, useMemo } from 'react';
import { Target, Calculator, BookOpen, GraduationCap, Plus, Search, Trash2, X } from 'lucide-react';

export type ProdiType = 'PendFisika' | 'Fisika' | 'Umum';

// Interface dari Supabase (Tanpa Array Konstan lokal)
export interface MataKuliah {
    id: string;
    kode: string;
    nama: string;
    sks: number;
    semester_rekomendasi: number;
    prodi: string; // Bisa 'Umum', 'Fisika', 'PendFisika' (varchar Supabase)
    kategori: string | null;
}

// Opsi Penilaian Skala UPI
const GRADES = [
    { label: 'A', value: 4.0 },
    { label: 'A-', value: 3.7 },
    { label: 'B+', value: 3.4 },
    { label: 'B', value: 3.0 },
    { label: 'B-', value: 2.7 },
    { label: 'C+', value: 2.4 },
    { label: 'C', value: 2.0 },
    { label: 'D', value: 1.0 },
    { label: 'E', value: 0.0 },
];

type SelectedCourse = {
    id: string; // Bisa ID dari Supabase atau custom untuk yang manual
    kode: string;
    nama: string;
    sks: number;
    grade: number | null;
    isManual?: boolean;
};

type SemesterData = {
    id: number;
    courses: SelectedCourse[];
};

export default function KinetikClient({ initialData }: { initialData: MataKuliah[] }) {
    // ==== STATE UTAMA ====
    const [selectedProdi, setSelectedProdi] = useState<ProdiType>('PendFisika');
    const [semesters, setSemesters] = useState<SemesterData[]>(
        Array.from({ length: 8 }, (_, i) => ({ id: i + 1, courses: [] }))
    );

    // ==== MODAL STATE ====
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [activeTargetSemester, setActiveTargetSemester] = useState<number>(1);
    const [modalTab, setModalTab] = useState<'DB' | 'MANUAL'>('DB');

    const [searchQuery, setSearchQuery] = useState('');
    const [manualNama, setManualNama] = useState('');
    const [manualKode, setManualKode] = useState('');
    const [manualSks, setManualSks] = useState<number>(2);

    // ==========================================
    // LOGIKA PERHITUNGAN IPS / IPK
    // ==========================================
    const getIpsSemester = (semesterId: number) => {
        const sem = semesters.find(s => s.id === semesterId);
        if (!sem || sem.courses.length === 0) return { ips: "0.00", sksTotal: 0 };

        let sumBobot = 0;
        let sumSksDiampu = 0;

        sem.courses.forEach(mk => {
            if (mk.grade !== null) {
                sumSksDiampu += mk.sks;
                sumBobot += (mk.grade * mk.sks);
            }
        });

        // Tampilkan SKS di box tersebut adalah total SEMUA SKS
        const totalSksMasuk = sem.courses.reduce((acc, curr) => acc + curr.sks, 0);

        if (sumSksDiampu === 0) return { ips: "0.00", sksTotal: totalSksMasuk };
        return { ips: (sumBobot / sumSksDiampu).toFixed(2), sksTotal: totalSksMasuk };
    };

    const ipkGlobal = useMemo(() => {
        let totalSksKumulatif = 0;
        let totalBobotKumulatif = 0;

        semesters.forEach(sem => {
            sem.courses.forEach(mk => {
                if (mk.grade !== null) {
                    totalSksKumulatif += mk.sks;
                    totalBobotKumulatif += (mk.grade * mk.sks);
                }
            });
        });

        if (totalSksKumulatif === 0) return { ipk: "0.00", sks: 0 };
        return {
            ipk: (totalBobotKumulatif / totalSksKumulatif).toFixed(2),
            sks: totalSksKumulatif
        };
    }, [semesters]);

    // ==========================================
    // HANDLER AKSI USER
    // ==========================================
    const handleGradeChange = (semesterId: number, mkId: string, val: string) => {
        const numVal = val === "" ? null : parseFloat(val);
        setSemesters(prev => prev.map(sem => {
            if (sem.id !== semesterId) return sem;
            return {
                ...sem,
                courses: sem.courses.map(c => c.id === mkId ? { ...c, grade: numVal } : c)
            };
        }));
    };

    const handleDeleteMatkul = (semesterId: number, mkId: string) => {
        setSemesters(prev => prev.map(sem => {
            if (sem.id !== semesterId) return sem;
            return {
                ...sem,
                courses: sem.courses.filter(c => c.id !== mkId)
            };
        }));
    };

    const openAddModal = (semesterId: number) => {
        setActiveTargetSemester(semesterId);
        setIsModalOpen(true);
        setSearchQuery("");
        setModalTab('DB');
    };

    const addMatkulFromDB = (m: MataKuliah) => {
        const currentSem = semesters.find(s => s.id === activeTargetSemester);
        if (currentSem?.courses.some(c => c.id === m.id)) {
            alert("Mata kuliah ini sudah ada di semester ini!");
            return;
        }

        const newCourse: SelectedCourse = {
            id: m.id,
            kode: m.kode,
            nama: m.nama,
            sks: m.sks,
            grade: null
        };

        setSemesters(prev => prev.map(sem => {
            if (sem.id !== activeTargetSemester) return sem;
            return { ...sem, courses: [...sem.courses, newCourse] };
        }));

        setIsModalOpen(false);
    };

    const addManualMatkul = (e: React.FormEvent) => {
        e.preventDefault();
        if (!manualNama || !manualSks) return;

        const newCourse: SelectedCourse = {
            id: `manual_${Date.now()}`,
            kode: manualKode || '-',
            nama: manualNama,
            sks: Number(manualSks),
            grade: null,
            isManual: true,
        };

        setSemesters(prev => prev.map(sem => {
            if (sem.id !== activeTargetSemester) return sem;
            return { ...sem, courses: [...sem.courses, newCourse] };
        }));

        setManualNama('');
        setManualKode('');
        setManualSks(2);
        setIsModalOpen(false);
    };

    // Filter DB Berdasarkan Data Array Supabase -> Prodi Aktif -> Search string
    const filteredDBMatkuls = initialData.filter(m => {
        const matchProdi = m.prodi === 'Umum' || m.prodi === selectedProdi;
        const matchSearch = m.nama.toLowerCase().includes(searchQuery.toLowerCase()) ||
            m.kode.toLowerCase().includes(searchQuery.toLowerCase());
        return matchProdi && matchSearch;
    });

    return (
        <div data-theme="dark" className="min-h-screen bg-[#07090f] flex flex-col font-sans selection:bg-[#E63946] selection:text-white pb-24">
            
            {/* Hero Section */}
            <main className="w-full min-h-[60vh] pt-32 pb-32 bg-[#07090f] overflow-hidden relative flex flex-col items-center justify-center">
                {/* Background: bg-hero.png + dark overlay */}
                <div className="absolute inset-0 z-0">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src="/bg-hero.png" alt="" className="w-full h-full object-cover object-center opacity-80 mix-blend-luminosity" />
                    <div className="absolute inset-0 bg-[#07090f]/85"></div>
                </div>

                {/* Bottom Fade Gradient for blending */}
                <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-[#07090f] to-transparent z-10 pointer-events-none"></div>

                {/* Subtle grid */}
                <div className="absolute inset-0 z-[1] pointer-events-none">
                    <div className="absolute inset-0 opacity-[0.04]" style={{backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '60px 60px'}}></div>
                </div>

                <div className="container px-4 md:px-8 relative z-20 w-full flex flex-col items-center text-center">
                    <h1 className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100 font-sans leading-[1.05] tracking-tight mb-6">
                        <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white">
                            KINETIK
                        </span>
                        <span className="block text-xl sm:text-2xl md:text-3xl font-bold text-white/30 mt-4">
                            Kalkulator Indeks Nilai dan Evaluasi Target IPK
                        </span>
                    </h1>

                    <p className="animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200 text-gray-400 text-lg md:text-xl font-light max-w-3xl leading-relaxed mb-4">
                        Alat bantu *Study Planner* interaktif mahasiswa Fisika UPI. Rangkai matkul bersumber dari <strong>HMF</strong> secara bebas lintas semester, atur nilai imajiner, dan lihat lonjakan IPK gabungan Anda!
                    </p>
                </div>
            </main>

            {/* CONTAINER DUA KOLOM BESAR */}
            <div className="container px-4 md:px-8 py-8 relative z-10 -mt-12 mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">

                    {/* LEFT COLUMN: GLOBAL DASHBOARD (STICKY) */}
                    <div className="lg:col-span-4 lg:sticky lg:top-24 space-y-6">

                        {/* Selector Prodi */}
                        <div className="bg-white/[0.03] backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white/10 relative z-10">
                            <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4 border-b border-white/10 pb-2"><BookOpen className="w-4 h-4 inline mr-2 align-text-bottom" />Program Studi Basis Data</h3>
                            <div className="flex bg-black/20 p-1.5 rounded-xl border border-white/5">
                                <button
                                    onClick={() => setSelectedProdi('PendFisika')}
                                    className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition-all ${selectedProdi === 'PendFisika' ? 'bg-white/10 text-white shadow border border-white/10' : 'text-gray-500 hover:text-gray-300'}`}
                                >
                                    Pend. Fisika
                                </button>
                                <button
                                    onClick={() => setSelectedProdi('Fisika')}
                                    className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition-all ${selectedProdi === 'Fisika' ? 'bg-white/10 text-white shadow border border-white/10' : 'text-gray-500 hover:text-gray-300'}`}
                                >
                                    Fisika Murni
                                </button>
                            </div>
                            <p className="text-[11px] text-gray-500 mt-3 text-center">
                                Basis Data (Supabase) memfilter otomatis mata kuliah Anda dari Database Pilihan di *Pop-up*.
                            </p>
                        </div>

                        {/* Hasil Kumulatif IPK */}
                        <div className="bg-white/[0.03] backdrop-blur-md rounded-3xl shadow-xl border border-white/10 overflow-hidden relative group z-10">
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-400/20 transition-all duration-700"></div>

                            <div className="p-8 text-center relative z-10">
                                <div className="inline-flex justify-center items-center bg-white/5 p-3 rounded-xl backdrop-blur-sm border border-white/10 mb-5">
                                    <GraduationCap className="h-6 w-6 text-blue-400" />
                                </div>
                                <h3 className="text-blue-200 text-sm font-semibold uppercase tracking-widest mb-2">Simulasi IPK Kumulatif</h3>

                                <div className="flex items-end justify-center gap-2">
                                    <span className="text-6xl font-black text-white tracking-tighter filter drop-shadow-md">
                                        {ipkGlobal.ipk}
                                    </span>
                                    <span className="text-blue-300 font-medium pb-2 text-xl">/ 4.00</span>
                                </div>

                                <div className="mt-8 pt-6 border-t border-white/10 flex justify-between items-center px-4 bg-black/20 rounded-xl py-4 backdrop-blur-md">
                                    <div className="text-left">
                                        <div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider mb-1">SKS Diperhitungkan</div>
                                        <div className="text-lg font-bold text-white leading-none">{ipkGlobal.sks} <span className="text-xs font-normal text-gray-500">SKS</span></div>
                                    </div>
                                    <div className="h-8 w-px bg-white/10"></div>
                                    <div className="text-right">
                                        <div className="text-[10px] text-gray-400 uppercase font-bold tracking-wider mb-1">Matkul Dinilai</div>
                                        <div className="text-lg font-bold text-white leading-none">
                                            {semesters.reduce((acc, sem) => acc + sem.courses.filter(c => c.grade !== null).length, 0)} <span className="text-xs font-normal text-gray-500">MK</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    {/* RIGHT COLUMN: STUDY PLANNER BLOCKS */}
                    <div className="lg:col-span-8 space-y-8">
                        {semesters.map((sem) => {
                            const { ips, sksTotal } = getIpsSemester(sem.id);

                            return (
                                <div key={sem.id} className="bg-white/[0.03] backdrop-blur-md rounded-2xl shadow-lg border border-white/10 overflow-hidden hover:border-blue-500/30 transition-colors relative z-10">

                                    {/* Header Semester Box */}
                                    <div className="bg-white/5 px-6 py-4 border-b border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                                        <div>
                                            <h2 className="text-xl font-black text-white tracking-tight">Semester {sem.id}</h2>
                                            <p className="text-sm text-gray-400 font-medium">IPS: <span className="font-bold text-blue-400 ml-1">{ips}</span> <span className="mx-2 text-gray-600">|</span> Pengambilan Terekam: {sksTotal} SKS</p>
                                        </div>
                                                          <button
                      onClick={() => openAddModal(sem.id)}
                      className="px-4 py-2 bg-black/20 border border-white/10 hover:border-blue-500/50 hover:text-blue-400 hover:bg-blue-500/10 text-white text-sm font-semibold rounded-lg shadow-sm transition-all flex items-center gap-2 group w-full md:w-auto justify-center"
                                        >
                                            <Plus className="w-4 h-4 text-gray-400 group-hover:text-blue-400" />
                                            Tambah Matkul
                                        </button>
                                    </div>

                                    {/* List Mata Kuliah */}
                                    <div className="p-0">
                                        {sem.courses.length === 0 ? (
                                            <div className="p-10 text-center flex flex-col items-center justify-center">
                                                <div className="w-16 h-16 bg-black/20 rounded-full flex items-center justify-center mb-3">
                                                    <BookOpen className="w-6 h-6 text-gray-600" />
                                                </div>
                                                <p className="text-gray-400 font-medium">Kotak semester ini masih kosong.</p>
                                                <p className="text-xs text-gray-500 mt-1">Klik tombol Tambah di atas untuk mendesain kurikulum Anda.</p>
                                            </div>
                                        ) : (
                                            <div className="overflow-x-auto">
                                                <table className="w-full text-left">
                                                    <thead>
                                                        <tr className="bg-black/20 text-xs uppercase tracking-wider font-bold text-gray-500">
                                                            <th className="py-3 px-6 w-16">Kode</th>
                                                            <th className="py-3 px-6">Mata Kuliah</th>
                                                            <th className="py-3 px-6 text-center w-20">SKS</th>
                                                            <th className="py-3 px-6 text-center w-36">Nilai (Grade)</th>
                                                            <th className="py-3 px-4 w-12 text-center"></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody className="divide-y divide-white/5">
                                                        {sem.courses.map((mk) => (
                                                            <tr key={mk.id} className="hover:bg-white/5 transition-colors">
                                                                <td className="py-4 px-6 text-sm font-mono text-gray-400">{mk.kode}</td>
                                                                <td className="py-4 px-6">
                                                                    <div className="font-semibold text-gray-200">{mk.nama}</div>
                                                                    {mk.isManual && <div className="text-[10px] text-blue-400 font-bold tracking-widest uppercase mt-0.5">Input Manual</div>}
                                                                </td>
                                                                <td className="py-4 px-6 text-center">
                                                                    <span className="inline-block bg-black/40 text-gray-300 text-xs font-bold px-3 py-1 rounded-md border border-white/10">
                                                                        {mk.sks} SKS
                                                                    </span>
                                                                </td>
                                                                <td className="py-4 px-6 text-center">
                                                                    <div className="relative">
                                                                        <select
                                                                            value={mk.grade !== null ? mk.grade.toString() : ""}
                                                                            onChange={(e) => handleGradeChange(sem.id, mk.id, e.target.value)}
                                                                            className={`w-full appearance-none px-3 py-2 rounded-lg text-sm font-bold border ${mk.grade !== null ? 'bg-blue-500/20 border-blue-500/50 text-blue-300' : 'bg-black/20 border-white/10 text-gray-400 hover:border-white/30'} focus:outline-none focus:ring-2 focus:ring-blue-500/30 cursor-pointer text-center`}
                                                                        >
                                                                            <option value="">-- set --</option>
                                                                            {GRADES.map(g => (
                                                                                <option key={g.label} value={g.value}>{g.label} ({g.value})</option>
                                                                            ))}
                                                                        </select>
                                                                    </div>
                                                                </td>
                                                                <td className="py-4 px-4 text-center">
                                                                    <button
                                                                        onClick={() => handleDeleteMatkul(sem.id, mk.id)}
                                                                        className="p-1.5 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-md transition-colors"
                                                                        title="Hapus Matkul"
                                                                    >
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        ))}
                                                    </tbody>
                                                </table>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>

            {/* MODAL POP-UP TAMBAH MATKUL */}
            {isModalOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
                    <div className="absolute inset-0 bg-black/60 backdrop-blur-md" onClick={() => setIsModalOpen(false)}></div>

                    <div className="bg-[#0b1f3a] rounded-2xl shadow-2xl border border-white/10 w-full max-w-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200">

                        <div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/5">
                            <div>
                                <h3 className="text-lg font-bold text-white">Tambahkan Matkul</h3>
                                <p className="text-xs text-blue-400 font-medium uppercase tracking-wider mt-1">Ke Semester {activeTargetSemester}</p>
                            </div>
                            <button onClick={() => setIsModalOpen(false)} className="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-colors">
                                <X className="w-5 h-5" />
                            </button>
                        </div>

                        <div className="flex border-b border-white/10 px-6">
                            <button
                                className={`px-4 py-3 font-semibold text-sm border-b-2 transition-colors ${modalTab === 'DB' ? 'border-blue-500 text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
                                onClick={() => setModalTab('DB')}
                            >
                                Cari di Database Server
                            </button>
                            <button
                                className={`px-4 py-3 font-semibold text-sm border-b-2 transition-colors ${modalTab === 'MANUAL' ? 'border-blue-500 text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
                                onClick={() => setModalTab('MANUAL')}
                            >
                                Input Manual
                            </button>
                        </div>

                        <div className="p-6 h-[400px] overflow-y-auto bg-black/20">

                            {modalTab === 'DB' && (
                                <div className="space-y-4">
                                    <div className="relative">
                                        <Search className="absolute left-3 top-3.5 w-4 h-4 text-gray-500" />
                                        <input
                                            type="text"
                                            placeholder="Cari nama matkul fisika atau kode UPI..."
                                            className="w-full bg-black/20 border border-white/10 text-white rounded-xl pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 shadow-sm transition-all placeholder:text-gray-600"
                                            value={searchQuery}
                                            onChange={(e) => setSearchQuery(e.target.value)}
                                            autoFocus
                                        />
                                    </div>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        {filteredDBMatkuls.map(m => (
                                            <div key={m.id} className="bg-white/5 border border-white/5 p-3 rounded-xl hover:border-blue-500/50 hover:bg-white/10 transition-all group flex flex-col justify-between cursor-pointer" onClick={() => addMatkulFromDB(m)}>
                                                <div>
                                                    <div className="flex justify-between items-start mb-1">
                                                        <span className="text-[10px] font-mono text-gray-500">{m.kode}</span>
                                                        <span className="text-[10px] font-bold text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded uppercase tracking-wider border border-blue-500/20">Sem {m.semester_rekomendasi}</span>
                                                    </div>
                                                    <h4 className="font-semibold text-gray-300 leading-tight mb-1 group-hover:text-white transition-colors">{m.nama}</h4>
                                                </div>
                                                <div className="flex justify-between items-end mt-3">
                                                    <span className="text-[10px] bg-white/5 text-gray-400 px-2 py-1 rounded font-medium">{m.kategori || 'Matkul'}</span>
                                                    <span className="text-xs font-black text-gray-400 bg-black/40 px-2 py-0.5 rounded border border-white/10">{m.sks} SKS</span>
                                                </div>
                                            </div>
                                        ))}
                                        {filteredDBMatkuls.length === 0 && (
                                            <div className="col-span-1 md:col-span-2 text-center py-10 text-gray-500">
                                                Tidak ada mata kuliah yang cocok dari Basis Data Server Supabase. Coba ganti kata kunci.
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )}

                            {modalTab === 'MANUAL' && (
                                <form onSubmit={addManualMatkul} className="space-y-5 bg-white/5 p-6 rounded-2xl border border-white/10 shadow-sm">
                                    <div className="space-y-4">
                                        <div className="bg-blue-900/20 border border-blue-800/30 p-3 rounded-lg text-sm text-blue-300 mb-6">
                                            Fitur ini diperuntukkan bagi mata kuliah <strong>Konversi, Lintas Jurusan, atau MBKM</strong> yang SKS-nya tidak ada pada kurikulum himpunan reguler.
                                        </div>
                                        <div>
                                            <label className="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-1.5">Nama Matkul *</label>
                                            <input
                                                required
                                                type="text"
                                                value={manualNama}
                                                onChange={e => setManualNama(e.target.value)}
                                                placeholder="Contoh: Kewirausahaan Pemuda"
                                                className="w-full bg-black/20 border border-white/10 text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none placeholder:text-gray-600"
                                            />
                                        </div>
                                        <div className="flex gap-4">
                                            <div className="flex-1">
                                                <label className="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-1.5">Kode (Opsional)</label>
                                                <input
                                                    type="text"
                                                    value={manualKode}
                                                    onChange={e => setManualKode(e.target.value)}
                                                    placeholder="Contoh: UN123"
                                                    className="w-full bg-black/20 border border-white/10 text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none placeholder:text-gray-600"
                                                />
                                            </div>
                                            <div className="w-24">
                                                <label className="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-1.5">SKS *</label>
                                                <input
                                                    required
                                                    type="number"
                                                    min="1"
                                                    max="20"
                                                    value={manualSks}
                                                    onChange={e => setManualSks(Number(e.target.value))}
                                                    className="w-full bg-black/20 border border-white/10 text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none text-center font-bold font-mono"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <button
                                        type="submit"
                                        className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3.5 rounded-xl uppercase tracking-widest text-sm transition-colors shadow-md mt-4"
                                    >
                                        Tambahkan Sekarang
                                    </button>
                                </form>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}