import { useState } from 'react';
import { Link } from 'react-router-dom';
import AddDocumentModal from '../components/AddDocumentModal'; // Kita akan buat ini

// Data dummy
const documentTypes = [
    { name: 'Akta Kelahiran', count: 0 },
    { name: 'Ijazah', count: 0 },
    { name: 'KK', count: 0 },
    { name: 'KTP', count: 6 },
    { name: 'Polinema', count: 3 },
    { name: 'Sampul Buku', count: 1 },
];

const StatCard = ({ title, value }) => (
    <div className="bg-gradient-to-br from-blue-500 to-indigo-600 text-white p-6 rounded-2xl shadow-lg">
        <p className="text-sm font-medium opacity-80">{title}</p>
        <p className="text-4xl font-bold mt-2">{value}</p>
    </div>
);

export default function DashboardPage() {
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
        <div className="bg-gray-50 min-h-screen">
            <main className="p-4 sm:p-6 lg:p-8">
                {/* Statistik */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <StatCard title="HARI INI" value="10" />
                    <StatCard title="BULAN INI" value="10" />
                    <StatCard title="TOTAL KESELURUHAN" value="10" />
                </div>

                {/* Daftar Jenis Dokumen */}
                <div className="mt-8">
                    <div className="flex justify-between items-center mb-4">
                        <h2 className="text-2xl font-bold text-gray-800">Daftar Jenis Dokumen</h2>
                        <button
                            onClick={() => setIsModalOpen(true)}
                            className="bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
                        >
                            + Tambah Jenis
                        </button>
                    </div>
                    <div className="bg-white rounded-2xl shadow-sm divide-y divide-gray-100">
                        {documentTypes.map((doc, index) => (
                            <Link key={doc.name} to={`/input-data/${doc.name.toLowerCase().replace(' ', '-')}`} className="flex items-center p-4 hover:bg-gray-50 transition-colors">
                                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold">{index + 1}</div>
                                <div className="ml-4 flex-grow">
                                    <p className="font-semibold text-gray-800">{doc.name}</p>
                                    <p className="text-sm text-gray-500">{doc.count} data tersedia</p>
                                </div>
                                {/* Arrow Icon */}
                            </Link>
                        ))}
                    </div>
                </div>
            </main>

            <AddDocumentModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
        </div>
    );
}