import { useState } from 'react';
import { Button } from '@heroui/react';
import { ClipboardDocumentListIcon, PlusIcon } from '@heroicons/react/24/solid';
import { Field } from '@/Components/ui/Field';
import { FormModal } from '@/Components/ui/FormModal';
import { RowActions } from '@/Components/ui/RowActions';
import { BoardView } from '@/Components/Board/BoardView';
import { useList, useCreate, useUpdate, useDelete } from '@/hooks/useResource';
import { useAuth } from '@/hooks/useAuth';
import { useConfirm } from '@/hooks/useConfirm';

interface BoardSummary {
    id: number;
    name: string;
    columns_count: number;
    pending_count: number;
}

export function KegiatanTugasTab({ kegiatanId, kegiatanNama }: { kegiatanId: number; kegiatanNama?: string }) {
    const { canWrite, canDelete, canEdit } = useAuth();
    const allowEdit = canEdit('board');
    const allowDelete = canDelete('board');
    const confirm = useConfirm();
    const key = `kegiatan-boards-${kegiatanId}`;
    const { data: boards, isLoading } = useList<BoardSummary>(key, '/boards', { kegiatan_id: kegiatanId, per_page: 5 });
    const createBoard = useCreate<{ id: number }>(key, '/boards');
    const updateBoard = useUpdate<{ id: number }>(key, '/boards');
    const deleteBoard = useDelete(key, '/boards');

    const [selectedBoardId, setSelectedBoardId] = useState<number | null>(null);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [name, setName] = useState(kegiatanNama ?? '');
    const [description, setDescription] = useState('');

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

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

    function openEdit(board: BoardSummary & { description?: string | null }) {
        setEditingId(board.id);
        setName(board.name);
        setDescription(board.description ?? '');
        setModalOpen(true);
    }

    function handleSubmit() {
        if (!name.trim()) return;
        const payload = { name: name.trim(), description: description.trim() || null, kegiatan_id: kegiatanId } as any;
        if (editingId) {
            updateBoard.mutate({ id: editingId, data: payload }, { onSuccess: () => { setModalOpen(false); resetForm(); } });
        } else {
            createBoard.mutate(payload, { onSuccess: () => { setModalOpen(false); resetForm(); } });
        }
    }

    async function handleDelete(board: BoardSummary) {
        if (await confirm({ title: `Hapus papan "${board.name}"?`, description: 'Seluruh isi papan ikut terhapus.' })) {
            deleteBoard.mutate(board.id, { onSuccess: () => { if (selectedBoardId === board.id) setSelectedBoardId(null); } });
        }
    }

    if (isLoading) {
        return <p className="text-sm text-gray-400">Memuat papan tugas...</p>;
    }

    if (selectedBoardId !== null) {
        return <BoardView boardId={selectedBoardId} />;
    }

    const list = boards?.data ?? [];

    return (
        <>
            {allowEdit && list.length > 0 && (
                <div className="flex justify-end mb-3">
                    <Button variant="outline" onPress={openCreate}>
                        <PlusIcon className="w-4 h-4" /> <span>Tambah Papan Tugas</span>
                    </Button>
                </div>
            )}

            {list.length === 0 ? (
                <div className="rounded-2xl border border-dashed border-gray-300 bg-white p-8 flex flex-col items-center gap-3 text-center">
                    <ClipboardDocumentListIcon className="w-8 h-8 text-gray-300" />
                    <p className="text-sm text-gray-500">Belum ada papan tugas untuk kegiatan ini.</p>
                    {allowEdit && (
                        <Button variant="primary" onPress={openCreate}>
                            <PlusIcon className="w-4 h-4" /> <span>Buat Papan Tugas</span>
                        </Button>
                    )}
                </div>
            ) : (
                <div className="flex flex-col gap-2">
                    {list.map((board) => (
                        <div
                            key={board.id}
                            className="flex items-center justify-between gap-3 rounded-2xl border border-gray-200 bg-white shadow-sm p-4 sm:p-5 hover:border-sky-300 hover:shadow-md transition-all"
                        >
                            <button
                                onClick={() => setSelectedBoardId(board.id)}
                                className="flex items-center gap-3 min-w-0 flex-1 text-left"
                            >
                                <ClipboardDocumentListIcon className="w-5 h-5 text-sky-600 shrink-0" />
                                <span className="font-medium text-gray-800 truncate">{board.name}</span>
                                <span className="text-xs text-gray-400 shrink-0">{board.columns_count} kolom</span>
                                {board.pending_count > 0 && (
                                    <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[10px] font-semibold shrink-0">
                                        {board.pending_count > 99 ? '99+' : board.pending_count}
                                    </span>
                                )}
                            </button>
                            {(allowEdit || allowDelete) && (
                                <RowActions
                                    onEdit={allowEdit ? () => openEdit(board) : undefined}
                                    onDelete={allowDelete ? () => handleDelete(board) : undefined}
                                />
                            )}
                        </div>
                    ))}
                </div>
            )}

            <FormModal
                isOpen={modalOpen}
                onOpenChange={(open) => { setModalOpen(open); if (!open) resetForm(); }}
                title={editingId ? 'Ubah Papan Tugas' : 'Buat Papan Tugas'}
                subtitle="Papan ini otomatis tertaut ke kegiatan ini."
                icon={<ClipboardDocumentListIcon 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 placeholder="Nama papan tugas" />
                </div>
                <div className="sm:col-span-2">
                    <Field label="Deskripsi (opsional)" value={description} onChange={setDescription} multiline placeholder="Tujuan papan ini, cakupan tugas, dsb." />
                </div>
            </FormModal>
        </>
    );
}