import { Form, Head, router } from '@inertiajs/react';
import { Globe, Megaphone, Pencil, Plus, Trash2, X, Check, FileText } from 'lucide-react';
import { useState } from 'react';
import { DataTable, type Column, type TableFilter } from '@/components/data-table';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type Announcement = {
    id: number;
    title: string;
    content: string;
    is_published: boolean;
    published_at: string | null;
    author: { name: string };
};

type Props = { announcements: Announcement[] };

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Pengumuman', href: '/admin/announcements' },
];

function AnnouncementForm({ onCancel, initial }: { onCancel: () => void; initial?: Announcement }) {
    const isEdit = !!initial;
    const action = isEdit ? `/admin/announcements/${initial.id}` : '/admin/announcements';
    const method = isEdit ? 'patch' : 'post';

    return (
        <Form action={action} method={method} onSuccess={onCancel} className="rounded-2xl border border-blue-100 bg-blue-50/50 p-5 dark:border-blue-900/30 dark:bg-blue-950/20">
            {({ processing, errors }) => (
                <div className="flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label className="font-semibold">Judul Pengumuman</Label>
                        <Input name="title" defaultValue={initial?.title ?? ''} placeholder="Judul pengumuman..." required />
                        {errors.title && <p className="text-xs text-destructive">{errors.title}</p>}
                    </div>
                    <div className="grid gap-1.5">
                        <Label className="font-semibold">Konten</Label>
                        <textarea
                            name="content"
                            rows={4}
                            defaultValue={initial?.content ?? ''}
                            placeholder="Isi pengumuman yang akan dikirim ke semua pengguna..."
                            className="border-input placeholder:text-muted-foreground focus-visible:border-blue-400 focus-visible:ring-blue-200 flex w-full rounded-xl border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-[3px] resize-none"
                            required
                        />
                        {errors.content && <p className="text-xs text-destructive">{errors.content}</p>}
                    </div>
                    <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-blue-100 bg-white p-3 text-sm dark:bg-background dark:border-blue-900/30 hover:bg-blue-50/50 transition-colors">
                        <input type="checkbox" name="is_published" value="1" defaultChecked={initial?.is_published ?? true} className="h-4 w-4 accent-blue-600" />
                        <span>
                            <span className="font-medium">Publikasikan sekarang</span>
                            <span className="ml-1 text-muted-foreground">(akan kirim notifikasi ke semua pengguna)</span>
                        </span>
                    </label>
                    <div className="flex gap-2">
                        <Button type="submit" disabled={processing} size="sm" className="gap-1.5 rounded-xl bg-blue-600 hover:bg-blue-700">
                            <Check className="h-4 w-4" />
                            {isEdit ? 'Simpan Perubahan' : 'Buat Pengumuman'}
                        </Button>
                        <Button type="button" variant="outline" size="sm" onClick={onCancel} className="gap-1.5 rounded-xl">
                            <X className="h-4 w-4" />
                            Batal
                        </Button>
                    </div>
                </div>
            )}
        </Form>
    );
}

export default function AdminAnnouncementsIndex({ announcements }: Props) {
    const [showAdd, setShowAdd] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [deleteModal, setDeleteModal] = useState<{ open: boolean; id: number | null; title: string }>({ open: false, id: null, title: '' });

    function confirmDelete() {
        if (!deleteModal.id) return;
        router.delete(`/admin/announcements/${deleteModal.id}`, {
            onSuccess: () => setDeleteModal({ open: false, id: null, title: '' }),
        });
    }

    const columns: Column<Announcement>[] = [
        {
            key: 'title',
            header: 'Judul',
            searchable: true,
            render: (a) => (
                <div className="flex items-center gap-3">
                    <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${a.is_published ? 'bg-blue-100 dark:bg-blue-900/40' : 'bg-muted'}`}>
                        {a.is_published
                            ? <Globe className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                            : <FileText className="h-4 w-4 text-muted-foreground" />
                        }
                    </div>
                    <div className="min-w-0">
                        <p className="truncate font-medium">{a.title}</p>
                        <p className="mt-0.5 max-w-xs truncate text-xs text-muted-foreground">{a.content}</p>
                    </div>
                </div>
            ),
        },
        {
            key: 'is_published',
            header: 'Status',
            headerClass: 'w-28',
            render: (a) => (
                <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                    a.is_published
                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400'
                        : 'bg-muted text-muted-foreground'
                }`}>
                    {a.is_published ? 'Publik' : 'Draft'}
                </span>
            ),
        },
        {
            key: 'author.name',
            header: 'Penulis',
            headerClass: 'w-36',
            searchable: true,
            render: (a) => <span className="text-sm text-muted-foreground">{a.author.name}</span>,
        },
        {
            key: 'published_at',
            header: 'Tanggal',
            headerClass: 'w-36',
            render: (a) => (
                <span className="text-xs text-muted-foreground">
                    {a.published_at ? new Date(a.published_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'}
                </span>
            ),
        },
        {
            key: 'id',
            header: 'Aksi',
            sortable: false,
            headerClass: 'w-20',
            render: (a) => (
                <div className="flex gap-1.5">
                    <button
                        onClick={() => setEditingId(a.id)}
                        className="flex h-8 w-8 items-center justify-center rounded-xl bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors dark:bg-amber-900/30 dark:text-amber-400"
                        title="Edit"
                    >
                        <Pencil className="h-3.5 w-3.5" />
                    </button>
                    <button
                        onClick={() => setDeleteModal({ open: true, id: a.id, title: a.title })}
                        className="flex h-8 w-8 items-center justify-center rounded-xl bg-red-100 text-red-700 hover:bg-red-200 transition-colors dark:bg-red-900/30 dark:text-red-400"
                        title="Hapus"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                    </button>
                </div>
            ),
        },
    ];

    const filters: TableFilter[] = [
        {
            key: 'is_published',
            label: 'Status',
            options: [
                { label: 'Publik', value: 'true' },
                { label: 'Draft', value: 'false' },
            ],
        },
    ];

    return (
        <>
            <Head title="Manajemen Pengumuman" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-indigo-950/30">
                    <div className="relative z-10 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/60">
                                <Megaphone className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                            </div>
                            <div>
                                <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100">Manajemen Pengumuman</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{announcements.length}</span> pengumuman
                                </p>
                            </div>
                        </div>
                        {!showAdd && !editingId && (
                            <Button size="sm" onClick={() => setShowAdd(true)} className="gap-1.5 bg-blue-600 hover:bg-blue-700 shadow-sm">
                                <Plus className="h-4 w-4" />
                                Buat Pengumuman
                            </Button>
                        )}
                    </div>
                    <div className="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="absolute right-10 -bottom-6 h-28 w-28 rounded-full bg-indigo-100/30 dark:bg-indigo-700/10" />
                </div>

                {showAdd && <AnnouncementForm onCancel={() => setShowAdd(false)} />}

                {editingId !== null && (
                    <AnnouncementForm
                        initial={announcements.find((a) => a.id === editingId)}
                        onCancel={() => setEditingId(null)}
                    />
                )}

                <DataTable
                    data={announcements}
                    columns={columns}
                    filters={filters}
                    searchPlaceholder="Cari judul atau penulis..."
                    defaultPageSize={25}
                    emptyIcon={Megaphone}
                    emptyMessage="Belum ada pengumuman"
                    emptyDescription="Buat pengumuman pertama untuk menginformasikan semua pengguna."
                />
            </div>

            <DeleteConfirmModal
                open={deleteModal.open}
                onClose={() => setDeleteModal({ open: false, id: null, title: '' })}
                onConfirm={confirmDelete}
                title={`Hapus pengumuman "${deleteModal.title}"?`}
                description="Pengumuman yang dihapus tidak dapat dikembalikan."
            />
        </>
    );
}

AdminAnnouncementsIndex.layout = (page: React.ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;