'use client';

import { useEffect, useState } from 'react';
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import { historyApi } from '@/lib/api/admin';
import type { History } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, ActionButton,
    ConfirmDialog, Modal, FormField, Input, Textarea, SubmitButton,
    ErrorAlert, EmptyState, LoadingSpinner
} from '@/components/Ui';

const splitContent = (content: string) => {
    const parts = content
        .split(/\n{2,}/)
        .map(item => item.trim())
        .filter(Boolean);

    return parts.length ? parts : [''];
};

export default function HistoriesPage() {
    const [items, setItems] = useState<History[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<History | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<History | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [form, setForm] = useState({ year: new Date().getFullYear(), title: '', content: '', order: 0 });
    const [contentItems, setContentItems] = useState(['']);

    const fetch = async () => { try { const r = await historyApi.getAll(); setItems(r.data); } finally { setLoading(false); } };
    useEffect(() => { fetch(); }, []);

    const openCreate = () => {
        setEditing(null);
        setForm({ year: new Date().getFullYear(), title: '', content: '', order: 0 });
        setContentItems(['']);
        setError('');
        setModalOpen(true);
    };
    const openEdit = (h: History) => {
        setEditing(h);
        setForm({ year: h.year, title: h.title, content: h.content, order: h.order || 0 });
        setContentItems(splitContent(h.content));
        setError('');
        setModalOpen(true);
    };

    const addContentItem = () => setContentItems(prev => [...prev, '']);
    const removeContentItem = (index: number) => setContentItems(prev => prev.filter((_, idx) => idx !== index));
    const updateContentItem = (index: number, value: string) => setContentItems(prev => prev.map((item, idx) => idx === index ? value : item));

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); setSaving(true); setError('');
        try {
            const mergedContent = contentItems
                .map(item => item.trim())
                .filter(Boolean)
                .join('\n\n');

            if (!mergedContent) {
                throw new Error('Tambahkan minimal satu content.');
            }

            const payload = { ...form, content: mergedContent };

            if (editing) { await historyApi.update(editing.id, payload); } else { await historyApi.create(payload); }
            setModalOpen(false); fetch();
        } catch (err: any) { setError(err.message || 'Failed to save'); } finally { setSaving(false); }
    };

    const handleDelete = async () => {
        if (!deleteTarget) return; setDeleting(true);
        try { await historyApi.delete(deleteTarget.id); setDeleteTarget(null); fetch(); } finally { setDeleting(false); }
    };

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader title="Histories" subtitle="Manage organization history timeline" action={<AddButton onClick={openCreate} />} />

            {items.length === 0 ? <div className="bg-white rounded-xl shadow-sm"><EmptyState /></div> : (
                <Table headers={['#', 'Year', 'Title', 'Content', 'Order', 'Actions']}>
                    {items.map((h, i) => (
                        <TableRow key={h.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell><span className="font-bold text-brand">{h.year}</span></TableCell>
                            <TableCell><span className="font-medium">{h.title}</span></TableCell>
                            <TableCell className="max-w-xs"><p className="truncate text-sec">{h.content}</p></TableCell>
                            <TableCell>{h.order ?? '-'}</TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(h)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(h)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit History' : 'Add History'}>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <div className="grid grid-cols-2 gap-4">
                        <FormField label="Year" required>
                            <Input type="number" value={form.year} onChange={e => setForm(p => ({ ...p, year: +e.target.value }))} required min={1900} max={2099} />
                        </FormField>
                        <FormField label="Order">
                            <Input type="number" value={form.order} onChange={e => setForm(p => ({ ...p, order: +e.target.value }))} min={0} />
                        </FormField>
                    </div>
                    <FormField label="Title" required><Input value={form.title} onChange={e => setForm(p => ({ ...p, title: e.target.value }))} placeholder="History event title" required /></FormField>
                    <div>
                        <label className="block text-sm font-medium text-main mb-2">Content <span className="text-red-500">*</span></label>
                        <div className="space-y-2">
                            {contentItems.map((item, index) => (
                                <div key={index} className="flex gap-2 items-start">
                                    <span className="flex-shrink-0 w-6 h-6 bg-orange-50 text-brand rounded-full text-xs flex items-center justify-center font-bold mt-2">{index + 1}</span>
                                    <Textarea
                                        value={item}
                                        onChange={e => updateContentItem(index, e.target.value)}
                                        rows={3}
                                        placeholder={`Describe content ${index + 1}...`}
                                        className="flex-1"
                                        required
                                    />
                                    {contentItems.length > 1 && (
                                        <button
                                            type="button"
                                            onClick={() => removeContentItem(index)}
                                            className="p-1.5 text-red-400 hover:bg-red-50 rounded-lg mt-1.5 flex-shrink-0"
                                        >
                                            <TrashIcon className="w-4 h-4" />
                                        </button>
                                    )}
                                </div>
                            ))}
                        </div>
                        <button type="button" onClick={addContentItem} className="mt-2 flex items-center gap-1.5 text-sm text-brand hover:text-orange-600">
                            <PlusIcon className="w-4 h-4" /> Add Content
                        </button>
                    </div>
                    <SubmitButton loading={saving} />
                </form>
            </Modal>

            <ConfirmDialog isOpen={!!deleteTarget} onClose={() => setDeleteTarget(null)} onConfirm={handleDelete} loading={deleting} title="Delete History" message={`Delete "${deleteTarget?.title}" (${deleteTarget?.year})?`} />
        </div>
    );
}