import { useState } from 'react';
import { router } from '@inertiajs/react';
import { Button } from '@heroui/react';
import { PlusIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { FormModal } from '@/Components/ui/FormModal';
import { RowActions } from '@/Components/ui/RowActions';
import { useAll, useCreate, useDelete, useList, useUpdate } from '@/hooks/useResource';
import { useConfirm } from '@/hooks/useConfirm';
import { useAuth } from '@/hooks/useAuth';

interface Kegiatan {
    id: number;
    nama_kegiatan: string;
}

interface BoardItem {
    id: number;
    name: string;
    description: string | null;
    kegiatan_id: number | null;
    kegiatan?: Kegiatan;
    columns_count: number;
    pending_count: number;
}

export default function BoardIndex() {
    const { canWrite, canDelete, canEdit } = useAuth();
    const allowEdit = canEdit('board');
    const allowDelete = canDelete('board');
    const { data } = useList<BoardItem>('boards', '/boards');
    const { data: kegiatans } = useAll<Kegiatan[]>('kegiatan-all', '/kegiatan', { per_page: 1000 });
    const createBoard = useCreate<BoardItem>('boards', '/boards');
    const updateBoard = useUpdate<BoardItem>('boards', '/boards');
    const deleteBoard = useDelete('boards', '/boards');
    const confirm = useConfirm();

    const [isOpen, setIsOpen] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [kegiatanId, setKegiatanId] = useState<number | null>(null);

    const kegiatanOptions = (Array.isArray(kegiatans) ? kegiatans : (kegiatans as any)?.data ?? [])
        .map((k: Kegiatan) => ({ id: k.id, label: k.nama_kegiatan }));

    function resetForm() {
        setEditingId(null);
        setName('');
        setDescription('');
        setKegiatanId(null);
    }

    function openCreate() {
        resetForm();
        setIsOpen(true);
    }

    function openEdit(board: BoardItem) {
        setEditingId(board.id);
        setName(board.name);
        setDescription(board.description ?? '');
        setKegiatanId(board.kegiatan_id);
        setIsOpen(true);
    }

    function handleSubmit() {
        const payload = { name, description, kegiatan_id: kegiatanId };
        if (editingId) {
            updateBoard.mutate({ id: editingId, data: payload }, { onSuccess: () => { setIsOpen(false); resetForm(); } });
        } else {
            createBoard.mutate(payload, { onSuccess: () => { setIsOpen(false); resetForm(); } });
        }
    }

    return (
        <AppLayout>
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm mb-6">
                <div>
                    <h1 className="text-lg sm:text-xl font-bold text-gray-900">Papan Tugas</h1>
                    <p className="text-sm text-muted">Kelola tugas tim dengan papan Kanban, bisa dikaitkan ke Kegiatan atau berdiri sendiri.</p>
                </div>
                {allowEdit && (
                    <Button variant="primary" onPress={openCreate} className="shrink-0">
                        <PlusIcon className="w-4 h-4" />
                        <span>Papan Baru</span>
                    </Button>
                )}
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {data?.data.map((board) => (
                    <div key={board.id} className="h-full bg-white border border-gray-200 rounded-xl p-4 flex flex-col gap-3 hover:border-sky-200 hover:shadow-sm transition-all">
                        <div className="flex items-start gap-3 flex-1">
                            <span className="w-10 h-10 rounded-lg bg-sky-100 text-sky-600 flex items-center justify-center shrink-0 relative">
                                <Squares2X2Icon className="w-5 h-5" />
                                {board.pending_count > 0 && (
                                    <span className="absolute -top-1.5 -right-1.5 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[10px] font-semibold">
                                        {board.pending_count > 99 ? '99+' : board.pending_count}
                                    </span>
                                )}
                            </span>
                            <div className="min-w-0">
                                <p className="font-medium text-gray-900 truncate">{board.name}</p>
                                <p className="text-xs text-muted">
                                    {board.kegiatan?.nama_kegiatan ?? 'Papan mandiri'} · {board.columns_count} kolom
                                </p>
                                {board.description && (
                                    <p className="text-xs text-gray-500 mt-1 line-clamp-2">{board.description}</p>
                                )}
                            </div>
                        </div>
                        <div className="flex justify-end mt-auto pt-1 border-t border-gray-100">
                            <RowActions
                                onView={() => router.visit(`/board/${board.id}`)}
                                onEdit={allowEdit ? () => openEdit(board) : undefined}
                                onDelete={allowDelete ? async () => { if (await confirm({ title: 'Hapus papan ini?', description: 'Seluruh isi papan ikut terhapus.' })) deleteBoard.mutate(board.id); } : undefined}
                            />
                        </div>
                    </div>
                ))}
                {data?.data.length === 0 && (
                    <p className="col-span-full text-center text-sm text-gray-400 py-10">Belum ada papan tugas.</p>
                )}
            </div>

            <FormModal
                isOpen={isOpen}
                onOpenChange={(open) => { setIsOpen(open); if (!open) resetForm(); }}
                title={editingId ? 'Ubah Papan Tugas' : 'Papan Tugas Baru'}
                icon={<Squares2X2Icon className="w-5 h-5" />}
                onSubmit={handleSubmit}
                isSubmitting={createBoard.isPending || updateBoard.isPending}
                submitLabel={editingId ? 'Simpan' : 'Buat'}
            >
                <div className="sm:col-span-2">
                    <Field label="Nama Papan" value={name} onChange={setName} required />
                </div>
                <div className="sm:col-span-2">
                    <Field label="Deskripsi (opsional)" value={description} onChange={setDescription} multiline placeholder="Tujuan papan ini, cakupan tugas, dsb." />
                </div>
                <div className="sm:col-span-2">
                    <SelectField
                        label="Kaitkan ke Kegiatan (opsional)"
                        items={kegiatanOptions}
                        selectedKey={kegiatanId}
                        onSelectionChange={(k) => setKegiatanId(k ? Number(k) : null)}
                        placeholder="Tidak terkait kegiatan"
                        clearable
                    />
                </div>
            </FormModal>
        </AppLayout>
    );
}