'use client';

import { useEffect, useState } from 'react';
import { faqApi } from '@/lib/api/admin';
import type { Faq } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, StatusBadge, ActionButton,
    ConfirmDialog, Modal, FormField, Input, Textarea, Toggle, SubmitButton,
    ErrorAlert, EmptyState, LoadingSpinner
} from '@/components/Ui';

export default function FaqsPage() {
    const [items, setItems] = useState<Faq[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<Faq | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<Faq | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [form, setForm] = useState({ question: '', answer: '', order: 0, is_active: true });

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

    const openCreate = () => { setEditing(null); setForm({ question: '', answer: '', order: items.length, is_active: true }); setError(''); setModalOpen(true); };
    const openEdit = (f: Faq) => { setEditing(f); setForm({ question: f.question, answer: f.answer, order: f.order || 0, is_active: f.is_active }); setError(''); setModalOpen(true); };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); setSaving(true); setError('');
        try {
            if (editing) { await faqApi.update(editing.id, form); } else { await faqApi.create(form); }
            setModalOpen(false); fetchData();
        } catch (err: any) { setError(err.message || 'Failed to save'); } finally { setSaving(false); }
    };

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

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader title="FAQs" subtitle="Frequently asked questions" action={<AddButton onClick={openCreate} />} />

            {items.length === 0 ? <div className="bg-white rounded-xl shadow-sm"><EmptyState /></div> : (
                <Table headers={['Order', 'Question', 'Answer', 'Status', 'Actions']}>
                    {items.map((f) => (
                        <TableRow key={f.id}>
                            <TableCell>
                                <span className="w-8 h-8 bg-orange-50 text-brand rounded-lg flex items-center justify-center font-bold text-sm">{f.order ?? '-'}</span>
                            </TableCell>
                            <TableCell className="max-w-xs"><p className="font-medium">{f.question}</p></TableCell>
                            <TableCell className="max-w-sm"><p className="truncate text-sec text-sm">{f.answer}</p></TableCell>
                            <TableCell><StatusBadge active={f.is_active} /></TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(f)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(f)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit FAQ' : 'Add FAQ'}>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <FormField label="Question" required>
                        <Textarea value={form.question} onChange={e => setForm(p => ({ ...p, question: e.target.value }))} rows={2} placeholder="Frequently asked question..." required />
                    </FormField>
                    <FormField label="Answer" required>
                        <Textarea value={form.answer} onChange={e => setForm(p => ({ ...p, answer: e.target.value }))} rows={4} placeholder="Detailed answer..." required />
                    </FormField>
                    <FormField label="Order" hint="Lower number appears first">
                        <Input type="number" value={form.order} onChange={e => setForm(p => ({ ...p, order: +e.target.value }))} min={0} />
                    </FormField>
                    <Toggle checked={form.is_active} onChange={v => setForm(p => ({ ...p, is_active: v }))} label="Active (visible on website)" />
                    <SubmitButton loading={saving} />
                </form>
            </Modal>

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