'use client';

import { useEffect, useState } from 'react';
import { newsApi } from '@/lib/api/admin';
import type { News } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, StatusBadge, ActionButton,
    ConfirmDialog, Modal, FormField, Input, Textarea, Toggle,
    ImageUpload, SubmitButton, ErrorAlert, EmptyState, LoadingSpinner, ImagePreview
} from '@/components/Ui';
import { EyeIcon } from '@heroicons/react/24/outline';

export default function NewsPage() {
    const [items, setItems] = useState<News[]>([]);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<News | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<News | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [filterStatus, setFilterStatus] = useState('');
    const [form, setForm] = useState({
        title: '',
        content: '',
        category: '',
        published_date: new Date().toISOString().split('T')[0],
        is_published: false,
    });
    const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
    const [imageFile, setImageFile] = useState<File | null>(null);

    const fetchData = async () => {
        setLoading(true);
        try {
            const params: any = { per_page: 100 };
            if (filterStatus !== '') params.is_published = filterStatus;

            const r = await newsApi.getAll(params);
 
            const payload = r.data as any;
            const list: News[] = Array.isArray(payload) ? payload : (payload?.data ?? []);
            const count: number = Array.isArray(payload) ? payload.length : (payload?.total ?? list.length);

            setItems(list);
            setTotal(count);
        } catch (err) {
            console.error('Failed to fetch news:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => { fetchData(); }, [filterStatus]);

    const openCreate = () => {
        setEditing(null);
        setForm({ title: '', content: '', category: '', published_date: new Date().toISOString().split('T')[0], is_published: false });
        setThumbnailFile(null);
        setImageFile(null);
        setError('');
        setModalOpen(true);
    };

    const openEdit = (n: News) => {
        setEditing(n);
        setForm({
            title: n.title,
            content: n.content,
            category: n.category || '',
            published_date: n.published_date?.split('T')[0] || '',
            is_published: n.is_published,
        });
        setThumbnailFile(null);
        setImageFile(null);
        setError('');
        setModalOpen(true);
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setSaving(true);
        setError('');
        try {
            const fd = new FormData();
            fd.append('title', form.title);
            fd.append('content', form.content);
            fd.append('category', form.category);
            fd.append('published_date', form.published_date);
            fd.append('is_published', form.is_published ? '1' : '0');
            if (thumbnailFile) fd.append('thumbnail', thumbnailFile);
            if (imageFile) fd.append('image', imageFile);

            if (editing) {
                await newsApi.update(editing.id, fd);
            } else {
                await newsApi.create(fd);
            }
            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 newsApi.delete(deleteTarget.id);
            setDeleteTarget(null);
            fetchData();
        } finally {
            setDeleting(false);
        }
    };

    const publishedCount = items.filter(n => n.is_published).length;
    const draftCount = items.filter(n => !n.is_published).length;

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader
                title="News"
                subtitle={`${total} total articles`}
                action={<AddButton onClick={openCreate} label="Add Article" />}
            />

            <div className="grid grid-cols-3 gap-4">
                {[
                    { label: 'Total', count: total, border: 'border-gray-200', text: 'text-main' },
                    { label: 'Published', count: publishedCount, border: 'border-green-200', text: 'text-green-600' },
                    { label: 'Draft', count: draftCount, border: 'border-orange-200', text: 'text-brand' },
                ].map(s => (
                    <div key={s.label} className={`bg-white rounded-xl shadow-sm p-4 border-l-4 ${s.border}`}>
                        <p className="text-sec text-sm">{s.label}</p>
                        <p className={`text-2xl font-bold ${s.text}`}>{s.count}</p>
                    </div>
                ))}
            </div>

            <div className="bg-white rounded-xl shadow-sm p-4 flex gap-3 items-center">
                <span className="text-sm text-sec font-medium">Filter:</span>
                {[
                    { value: '', label: 'All' },
                    { value: '1', label: 'Published' },
                    { value: '0', label: 'Draft' },
                ].map(opt => (
                    <button
                        key={opt.value}
                        onClick={() => setFilterStatus(opt.value)}
                        className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all ${filterStatus === opt.value
                                ? 'bg-brand text-white'
                                : 'bg-gray-100 text-sec hover:bg-orange-50 hover:text-brand'
                            }`}
                    >
                        {opt.label}
                    </button>
                ))}
            </div>

            {items.length === 0 ? (
                <div className="bg-white rounded-xl shadow-sm">
                    <EmptyState
                        message={
                            filterStatus === '0' ? 'No draft articles'
                                : filterStatus === '1' ? 'No published articles'
                                    : 'No news articles yet'
                        }
                    />
                </div>
            ) : (
                <Table headers={['#', 'Thumbnail', 'Title', 'Category', 'Views', 'Date', 'Status', 'Actions']}>
                    {items.map((n, i) => (
                        <TableRow key={n.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell><ImagePreview src={n.thumbnail} alt={n.title} size={12} /></TableCell>
                            <TableCell>
                                <div>
                                    <p className="font-medium max-w-xs truncate">{n.title}</p>
                                    <p className="text-xs text-sec">/{n.slug}</p>
                                </div>
                            </TableCell>
                            <TableCell>
                                {n.category
                                    ? <span className="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full text-xs">{n.category}</span>
                                    : <span className="text-sec">-</span>}
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-1 text-sec text-sm">
                                    <EyeIcon className="w-3.5 h-3.5" />{n.views ?? 0}
                                </div>
                            </TableCell>
                            <TableCell>
                                {n.published_date ? new Date(n.published_date).toLocaleDateString('id-ID') : '-'}
                            </TableCell>
                            <TableCell>
                                <StatusBadge active={n.is_published} activeLabel="Published" inactiveLabel="Draft" />
                            </TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(n)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(n)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit Article' : 'Add Article'} size="lg">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <FormField label="Title" required>
                        <Input
                            value={form.title}
                            onChange={e => setForm(p => ({ ...p, title: e.target.value }))}
                            placeholder="Article title"
                            required
                        />
                    </FormField>
                    <div className="grid grid-cols-2 gap-4">
                        <FormField label="Category">
                            <Input
                                value={form.category}
                                onChange={e => setForm(p => ({ ...p, category: e.target.value }))}
                                placeholder="e.g. Organization"
                            />
                        </FormField>
                        <FormField label="Publish Date" required>
                            <Input
                                type="date"
                                value={form.published_date}
                                onChange={e => setForm(p => ({ ...p, published_date: e.target.value }))}
                                required
                            />
                        </FormField>
                    </div>
                    <FormField label="Content" required>
                        <Textarea
                            value={form.content}
                            onChange={e => setForm(p => ({ ...p, content: e.target.value }))}
                            rows={8}
                            placeholder="Article content..."
                            required
                        />
                    </FormField>
                    <div className="grid grid-cols-2 gap-4">
                        <ImageUpload currentImage={editing?.thumbnail} onChange={setThumbnailFile} label="Thumbnail" />
                        <ImageUpload currentImage={editing?.image} onChange={setImageFile} label="Cover Image" />
                    </div>
                    <Toggle
                        checked={form.is_published}
                        onChange={v => setForm(p => ({ ...p, is_published: v }))}
                        label="Publish immediately"
                    />
                    <SubmitButton loading={saving} label={editing ? 'Update Article' : 'Create Article'} />
                </form>
            </Modal>

            <ConfirmDialog
                isOpen={!!deleteTarget}
                onClose={() => setDeleteTarget(null)}
                onConfirm={handleDelete}
                loading={deleting}
                title="Delete Article"
                message={`Delete article "${deleteTarget?.title}"? This cannot be undone.`}
            />
        </div>
    );
}