'use client';

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

export default function PeriodsPage() {
    const [items, setItems] = useState<Period[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [deleteTarget, setDeleteTarget] = useState<Period | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [form, setForm] = useState({ name: '', is_active: false });

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

    const openCreate = () => {
        setForm({ name: '', is_active: false });
        setError('');
        setModalOpen(true);
    };

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

    const handleSetActive = async (id: number) => {
        try {
            await periodApi.setActive(id);
            fetchData();
        } catch (err: any) {
            alert(err.message);
        }
    };

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

    if (loading) return <LoadingSpinner />;

    const activePeriod = items.find(p => p.is_active);

    return (
        <div className="space-y-6">
            <PageHeader
                title="Periods"
                subtitle="Manage organization periods for structure"
                action={<AddButton onClick={openCreate} label="Add Period" />}
            />

            {/* Active Period Banner */}
            {activePeriod && (
                <div className="bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl p-5 text-white flex items-center justify-between">
                    <div>
                        <p className="text-orange-100 text-sm font-medium">Active Period</p>
                        <p className="text-2xl font-bold mt-0.5">{activePeriod.name}</p>
                    </div>
                    <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                        <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
            )}

            {items.length === 0 ? (
                <div className="bg-white rounded-xl shadow-sm">
                    <EmptyState message="No periods found. Create your first period." />
                </div>
            ) : (
                <Table headers={['#', 'Period Name', 'Status', 'Created At', 'Actions']}>
                    {items.map((p, i) => (
                        <TableRow key={p.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell>
                                <span className="font-semibold text-main">{p.name}</span>
                            </TableCell>
                            <TableCell>
                                <StatusBadge active={p.is_active} activeLabel="Active" inactiveLabel="Inactive" />
                            </TableCell>
                            <TableCell>
                                {new Date(p.created_at).toLocaleDateString('id-ID', {
                                    day: 'numeric', month: 'long', year: 'numeric'
                                })}
                            </TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    {!p.is_active && (
                                        <ActionButton
                                            variant="set-active"
                                            label="Set as Active"
                                            onClick={() => handleSetActive(p.id)}
                                        />
                                    )}
                                    <ActionButton
                                        variant="delete"
                                        onClick={() => setDeleteTarget(p)}
                                    />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            {/* Create Modal */}
            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title="Add Period">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <FormField
                        label="Period Name"
                        required
                        hint='e.g. "2023-2025" or "Periode I 2024"'
                    >
                        <Input
                            value={form.name}
                            onChange={e => setForm(p => ({ ...p, name: e.target.value }))}
                            placeholder="e.g. 2023-2025"
                            required
                        />
                    </FormField>
                    <Toggle
                        checked={form.is_active}
                        onChange={v => setForm(p => ({ ...p, is_active: v }))}
                        label="Set as active period immediately"
                    />
                    <SubmitButton loading={saving} label="Create Period" />
                </form>
            </Modal>

            <ConfirmDialog
                isOpen={!!deleteTarget}
                onClose={() => setDeleteTarget(null)}
                onConfirm={handleDelete}
                loading={deleting}
                title="Delete Period"
                message={`Delete period "${deleteTarget?.name}"? Organization structures linked to this period may be affected.`}
            />
        </div>
    );
}