import { AdminFormDialog } from '@/components/admin-form-dialog';
import { useEffect, useState } from 'react';
import { useForm } from '@inertiajs/react';
import {
    AdminPage,
    Status,
    Pagination,
    Errors,
    date,
    type PageData,
} from '@/components/admin-page';
interface News {
    id: number;
    alumni_name_snapshot?: string | null;
    title: string;
    excerpt: string | null;
    content: string;
    thumbnail: string | null;
    status: string;
    published_at: string | null;
    category_id: number | null;
    category: { name: string } | null;
}
export default function NewsPage({ newsList, categories }: { newsList: PageData<News>; categories: Array<{ id: number; name: string }> }) {
    const [editing, setEditing] = useState<number | 'new' | null>(null);
    const [imageMode, setImageMode] = useState<'upload' | 'url'>('upload');
    const [existingImage, setExistingImage] = useState('');
    const [filePreview, setFilePreview] = useState('');
    const [previewFailed, setPreviewFailed] = useState(false);
    const form = useForm({
        category_id: '',
        title: '',
        excerpt: '',
        content: '',
        thumbnail: '',
        thumbnail_file: null as File | null,
        status: 'DRAFT',
    });
    useEffect(() => {
        if (!form.data.thumbnail_file) {
            setFilePreview('');
            return;
        }
        const url = URL.createObjectURL(form.data.thumbnail_file);
        setFilePreview(url);
        return () => URL.revokeObjectURL(url);
    }, [form.data.thumbnail_file]);
    const preview =
        filePreview ||
        (/^https?:\/\//i.test(form.data.thumbnail)
            ? form.data.thumbnail
            : '') ||
        existingImage;
    useEffect(() => setPreviewFailed(false), [preview]);
    const close = () => {
        setEditing(null);
        form.reset();
    };
    return (
        <AdminPage
            title="Kelola berita"
            description="Siapkan draf, terbitkan kabar fakultas, dan perbarui pengumuman untuk alumni."
            path="/admin/news"
            action={
                <button
                    id="news-create"
                    className="admin-primary-link"
                    onClick={() => {
                        form.reset();
                        form.clearErrors();
                        setExistingImage('');
                        setImageMode('upload');
                        setEditing('new');
                    }}
                >
                    Tulis berita
                </button>
            }
        >
            {/* Modal Buat Berita Baru */}
            {editing !== null && (
                <AdminFormDialog title="Berita" onClose={close}>
                    <form
                        className="admin-form"
                        onSubmit={(e) => {
                            e.preventDefault();
                            form.transform((data) => ({
                                ...data,
                                ...(editing !== 'new'
                                    ? { _method: 'put' }
                                    : {}),
                            }));
                            form.post(
                                editing === 'new'
                                    ? '/admin/news'
                                    : `/admin/news/${editing}`,
                                { onSuccess: close, forceFormData: true },
                            );
                        }}
                    >
                        <h2>
                            {editing === 'new'
                                ? 'Berita baru'
                                : 'Sunting berita'}
                        </h2>
                        <Errors errors={form.errors} />
                        <div className="admin-field">
                            <label htmlFor="news-title">Judul berita</label>
                            <input
                                id="news-title"
                                required
                                maxLength={255}
                                value={form.data.title}
                                onChange={(e) =>
                                    form.setData('title', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="news-category">Kategori berita</label>
                            <select id="news-category" value={form.data.category_id} onChange={(e) => form.setData('category_id', e.target.value)}>
                                <option value="">Umum</option>
                                {categories.map((category) => (
                                    <option key={category.id} value={category.id}>{category.name}</option>
                                ))}
                            </select>
                        </div>
                        <fieldset className="admin-field">
                            <legend>Gambar berita (opsional)</legend>
                            <div className="admin-form-actions">
                                <button
                                    id="news-mode-upload"
                                    type="button"
                                    className="admin-button"
                                    aria-pressed={imageMode === 'upload'}
                                    onClick={() => {
                                        setImageMode('upload');
                                        form.setData('thumbnail', '');
                                    }}
                                >
                                    Upload gambar
                                </button>
                                <button
                                    id="news-mode-url"
                                    type="button"
                                    className="admin-button"
                                    aria-pressed={imageMode === 'url'}
                                    onClick={() => {
                                        setImageMode('url');
                                        form.setData('thumbnail_file', null);
                                    }}
                                >
                                    Gunakan URL
                                </button>
                            </div>
                            {imageMode === 'upload' ? (
                                <div className="admin-field">
                                    <label htmlFor="news-image-file">
                                        Pilih gambar dari perangkat
                                    </label>
                                    <input
                                        key={String(editing)}
                                        id="news-image-file"
                                        type="file"
                                        accept="image/jpeg,image/png,image/webp"
                                        aria-describedby="news-image-help"
                                        onChange={(e) => {
                                            const file =
                                                e.target.files?.[0] ?? null;
                                            form.clearErrors('thumbnail_file');
                                            if (
                                                file &&
                                                (![
                                                    'image/jpeg',
                                                    'image/png',
                                                    'image/webp',
                                                ].includes(file.type) ||
                                                    file.size > 5 * 1024 * 1024)
                                            ) {
                                                form.setError(
                                                    'thumbnail_file',
                                                    'Pilih JPG, PNG, atau WebP maksimal 5 MB.',
                                                );
                                                form.setData(
                                                    'thumbnail_file',
                                                    null,
                                                );
                                                e.target.value = '';
                                                return;
                                            }
                                            form.setData(
                                                'thumbnail_file',
                                                file,
                                            );
                                        }}
                                    />
                                    <small id="news-image-help">
                                        JPG, PNG, atau WebP. Maksimal 5 MB.
                                        Gambar lama tetap dipakai jika tidak
                                        diganti.
                                    </small>
                                </div>
                            ) : (
                                <div className="admin-field">
                                    <label htmlFor="news-thumbnail">
                                        URL gambar
                                    </label>
                                    <input
                                        id="news-thumbnail"
                                        type="url"
                                        maxLength={2048}
                                        value={form.data.thumbnail}
                                        onChange={(e) =>
                                            form.setData(
                                                'thumbnail',
                                                e.target.value,
                                            )
                                        }
                                    />
                                </div>
                            )}
                            {preview && (
                                <figure className="admin-image-preview">
                                    {previewFailed ? (
                                        <p role="status">
                                            Gambar tidak dapat ditampilkan.
                                            Periksa URL atau pilih gambar lain.
                                        </p>
                                    ) : (
                                        <img
                                            src={preview}
                                            alt="Pratinjau gambar berita"
                                            referrerPolicy="no-referrer"
                                            onError={() =>
                                                setPreviewFailed(true)
                                            }
                                        />
                                    )}
                                    <figcaption>
                                        Pratinjau gambar
                                        {!filePreview &&
                                        !form.data.thumbnail &&
                                        existingImage
                                            ? ' tersimpan'
                                            : ''}
                                    </figcaption>
                                </figure>
                            )}
                            {form.progress && (
                                <p role="status">
                                    Mengunggah: {form.progress.percentage}%
                                </p>
                            )}
                        </fieldset>
                        <div className="admin-field">
                            <label htmlFor="news-excerpt">Ringkasan</label>
                            <textarea
                                id="news-excerpt"
                                rows={2}
                                value={form.data.excerpt}
                                onChange={(e) =>
                                    form.setData('excerpt', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="news-content">Isi berita</label>
                            <textarea
                                id="news-content"
                                rows={10}
                                required
                                value={form.data.content}
                                onChange={(e) =>
                                    form.setData('content', e.target.value)
                                }
                            />
                        </div>
                        <div className="admin-field">
                            <label htmlFor="news-status">
                                Status publikasi
                            </label>
                            <select
                                id="news-status"
                                value={form.data.status}
                                onChange={(e) =>
                                    form.setData('status', e.target.value)
                                }
                            >
                                <option value="DRAFT">
                                    Simpan sebagai draf
                                </option>
                                <option value="PUBLISHED">Terbitkan</option>
                                <option value="ARCHIVED">Arsipkan</option>
                            </select>
                        </div>
                        <div className="admin-form-actions">
                            <button
                                id="news-save"
                                disabled={form.processing}
                                className="admin-primary-link"
                            >
                                {form.processing
                                    ? 'Menyimpan…'
                                    : 'Simpan berita'}
                            </button>
                            <button
                                id="news-cancel"
                                type="button"
                                className="admin-button"
                                onClick={close}
                            >
                                Tutup
                            </button>
                        </div>
                    </form>
                </AdminFormDialog>
            )}
            {/* Table List Berita */}
            <section
                className="admin-panel admin-table-scroll"
                aria-label="Daftar berita"
            >
                <table className="admin-table">
                    <thead>
                        <tr>
                            <th scope="col">Berita</th>
                            <th scope="col">Kategori</th>
                            <th scope="col">Status</th>
                            <th scope="col">Tanggal terbit</th>
                            <th scope="col">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        {newsList.data.length ? (
                            newsList.data.map((n) => (
                                <tr key={n.id}>
                                    <td>
                                        <strong>{n.title}</strong>
                                        <p>{n.excerpt}</p>
                                        <small>{n.alumni_name_snapshot ? `Kiriman alumni: ${n.alumni_name_snapshot}` : 'Fakultas'}</small>
                                    </td>
                                    <td>{n.category?.name ?? 'Umum'}</td>
                                    <td>
                                        <Status value={n.status} />
                                    </td>
                                    <td>{date(n.published_at)}</td>
                                    <td>
                                        <button
                                            id={`news-edit-${n.id}`}
                                            className="admin-button"
                                            onClick={() => {
                                                setExistingImage(
                                                    n.thumbnail ?? '',
                                                );
                                                setImageMode('upload');
                                                setEditing(n.id);
                                                form.clearErrors();
                                                form.setData({
                                                    category_id: n.category_id?.toString() ?? '',
                                                    title: n.title,
                                                    excerpt: n.excerpt ?? '',
                                                    content: n.content,
                                                    thumbnail: '',
                                                    thumbnail_file: null,
                                                    status: n.status,
                                                });
                                                window.scrollTo({ top: 0 });
                                            }}
                                        >
                                            Sunting
                                        </button>
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr>
                                <td colSpan={5}>
                                    Belum ada berita. Mulai dengan menulis draf
                                    pertama.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </section>
            <Pagination page={newsList} />
        </AdminPage>
    );
}