import { useState } from 'react';
import { EyeIcon } from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { MasterCrudPage } from '@/Components/MasterCrudPage';
import { DetailModal, DetailRow } from '@/Components/ui/DetailModal';

interface Klien {
    id: number;
    kode: string;
    nama: string;
    instansi: string | null;
    nomor_hp: string | null;
    email: string | null;
    status: string;
    catatan: string | null;
}

function StatusBadge({ status }: { status: string }) {
    const color = status === 'Aktif' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500';
    return <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${color}`}>{status}</span>;
}

export default function KlienPage() {
    const [viewRow, setViewRow] = useState<Klien | null>(null);

    return (
        <AppLayout>
            <MasterCrudPage<Klien>
                title="Master Klien"
                resourceKey="klien"
                apiPath="/master/klien"
                menuKey="klien"
                emptyForm={{ nama: '', instansi: '', nomor_hp: '', email: '', status: 'Aktif', catatan: '' }}
                rowActionsExtra={(row) => (
                    <button
                        type="button"
                        onClick={() => setViewRow(row)}
                        title="Lihat"
                        className="p-1.5 rounded-md bg-sky-500 text-white hover:bg-sky-600 cursor-pointer"
                    >
                        <EyeIcon className="w-4 h-4" />
                    </button>
                )}
                columns={[
                    { header: 'Nama', cell: (r) => r.nama, sortKey: (r) => r.nama },
                    { header: 'Instansi', cell: (r) => r.instansi ?? '-', sortKey: (r) => r.instansi },
                    { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                ]}
                fields={[
                    { name: 'nama', label: 'Nama', required: true },
                    { name: 'instansi', label: 'Instansi' },
                    { name: 'nomor_hp', label: 'Nomor HP' },
                    { name: 'email', label: 'Email', type: 'email' },
                    { name: 'catatan', label: 'Catatan', type: 'textarea' },
                    {
                        name: 'status', label: 'Status', type: 'select',
                        options: ['Aktif', 'Tidak Aktif'].map((v) => ({ id: v, label: v })),
                    },
                ]}
            />

            {viewRow && (
                <DetailModal isOpen onOpenChange={(open) => { if (!open) setViewRow(null); }} title={`Data Klien - ${viewRow.nama}`}>
                    <DetailRow label="Kode" value={viewRow.kode} />
                    <DetailRow label="Nama" value={viewRow.nama} />
                    <DetailRow label="Instansi" value={viewRow.instansi} />
                    <DetailRow label="Nomor HP" value={viewRow.nomor_hp} />
                    <DetailRow label="Email" value={viewRow.email} />
                    <DetailRow label="Status" value={<StatusBadge status={viewRow.status} />} />
                    <DetailRow span2 label="Catatan" value={viewRow.catatan} />
                </DetailModal>
            )}
        </AppLayout>
    );
}