'use client';

/**
 * C-FE — maintenance windows table + create button.
 *
 * Lists active+future + recurring windows from /api/maintenance-windows.
 * Owns the create modal lifecycle. Soft-delete is a DELETE call; the
 * row disappears on next refresh.
 */

import { useState, useEffect, useCallback } from 'react';
import { Plus, Trash, Loader2, Calendar } from 'lucide-react';
import { MaintenanceFormModal } from './MaintenanceFormModal';
import { useToast } from '@/components/ui/Toast';
import { useConfirm } from '@/components/ui/ConfirmDialogProvider';
import { Button, IconButton } from '@/components/ui';

interface MaintenanceWindow {
    id: number;
    monitorId: number | null;
    startsAt: string;
    endsAt: string;
    reason: string;
    recurrence: string | null;
    createdAt: string;
    monitor: { id: number; name: string } | null;
    createdBy: { id: number; name: string | null; email: string | null } | null;
}

interface MonitorOption {
    id: number;
    name: string;
}

function fmt(d: string): string {
    return new Date(d).toLocaleString();
}

function recurrenceBadge(rec: string | null): string {
    if (!rec) return 'One-shot';
    return `Weekly: ${rec}`;
}

export function MaintenanceList({ canWrite }: { canWrite: boolean }) {
    const toast = useToast();
    const { confirm } = useConfirm();
    const [windows, setWindows] = useState<MaintenanceWindow[]>([]);
    const [monitors, setMonitors] = useState<MonitorOption[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [showCreate, setShowCreate] = useState(false);

    const fetchWindows = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const res = await fetch('/api/maintenance-windows');
            const data = await res.json();
            if (!res.ok) {
                setError(data?.error || 'Failed to load windows');
                return;
            }
            setWindows(data.windows || []);
        } catch (e) {
            setError(e instanceof Error ? e.message : 'Network error');
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchWindows();
    }, [fetchWindows]);

    useEffect(() => {
        // For the form's monitor picker. Reuses the existing monitors endpoint.
        fetch('/api/monitors?limit=200')
            .then((r) => r.json())
            .then((d) => {
                if (d?.monitors) {
                    setMonitors(
                        d.monitors.map((m: { id: number; name: string }) => ({
                            id: m.id,
                            name: m.name,
                        }))
                    );
                }
            })
            .catch(() => { /* graceful — the form falls back to operator-wide only */ });
    }, []);

    async function handleDelete(id: number) {
        const ok = await confirm({
            title: 'Delete maintenance window?',
            description: 'Alerts will resume immediately if this window was currently active.',
            confirmText: 'Delete',
            variant: 'danger',
        });
        if (!ok) return;
        try {
            const res = await fetch(`/api/maintenance-windows?id=${id}`, { method: 'DELETE' });
            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                toast.error('Delete failed', data?.error || 'Unknown error');
                return;
            }
            await fetchWindows();
        } catch (e) {
            toast.error('Network error', e instanceof Error ? e.message : 'Unknown error');
        }
    }

    return (
        <div className="space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Maintenance windows</h1>
                    <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
                        Declare planned downtime. Monitors record <code>status=maintenance</code> instead of <code>down</code>,
                        no alerts fire, and SLA reports exclude this time.
                    </p>
                </div>
                {canWrite && (
                    <Button
                        variant="primary"
                        size="md"
                        onClick={() => setShowCreate(true)}
                        className="bg-amber-500 hover:bg-amber-600 text-white font-bold shadow-sm"
                    >
                        <Plus className="size-4" />
                        New window
                    </Button>
                )}
            </div>

            {loading && (
                <div className="flex items-center gap-2 text-sm text-slate-500">
                    <Loader2 className="size-4 animate-spin" /> Loading...
                </div>
            )}

            {error && (
                <div className="text-sm text-red-500 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900/40 rounded-lg px-3 py-2">
                    {error}
                </div>
            )}

            {!loading && !error && windows.length === 0 && (
                <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 p-10 text-center text-slate-400">
                    <Calendar className="size-8 mx-auto mb-2" />
                    <p className="text-sm italic">No active or scheduled maintenance windows.</p>
                </div>
            )}

            {!loading && !error && windows.length > 0 && (
                <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 overflow-hidden">
                    <div className="overflow-x-auto">
                        <table className="w-full text-left text-sm responsive-table">
                            <thead className="bg-slate-50 dark:bg-slate-800 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                <tr>
                                    <th className="p-4">Scope</th>
                                    <th className="p-4">Starts</th>
                                    <th className="p-4">Ends</th>
                                    <th className="p-4">Recurrence</th>
                                    <th className="p-4">Reason</th>
                                    <th className="p-4 text-right">Created by</th>
                                    {canWrite && <th className="p-4 w-12" />}
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                                {windows.map((w) => (
                                    <tr key={w.id} className="hover:bg-slate-50/50 dark:hover:bg-slate-800/50 transition-colors">
                                        <td className="p-4 font-bold text-slate-700 dark:text-slate-200" data-label="Scope">
                                            {w.monitor?.name || <span className="text-amber-500">All monitors</span>}
                                        </td>
                                        <td className="p-4 text-slate-600 dark:text-slate-400" data-label="Starts">{fmt(w.startsAt)}</td>
                                        <td className="p-4 text-slate-600 dark:text-slate-400" data-label="Ends">{fmt(w.endsAt)}</td>
                                        <td className="p-4 text-slate-500 dark:text-slate-400 text-xs" data-label="Recurrence">
                                            {recurrenceBadge(w.recurrence)}
                                        </td>
                                        <td className="p-4 text-slate-600 dark:text-slate-400 max-w-xs truncate" title={w.reason} data-label="Reason">
                                            {w.reason}
                                        </td>
                                        <td className="p-4 text-right text-slate-500 dark:text-slate-400 text-xs" data-label="Created by">
                                            {w.createdBy?.name || w.createdBy?.email || '—'}
                                        </td>
                                        {canWrite && (
                                            <td className="p-4 text-right" data-label="Actions">
                                                <IconButton
                                                    label="Delete window"
                                                    variant="ghost"
                                                    size="md"
                                                    onClick={() => handleDelete(w.id)}
                                                    className="text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
                                                >
                                                    <Trash className="size-4" />
                                                </IconButton>
                                            </td>
                                        )}
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {showCreate && (
                <MaintenanceFormModal
                    monitors={monitors}
                    onClose={() => setShowCreate(false)}
                    onCreated={async () => {
                        setShowCreate(false);
                        await fetchWindows();
                    }}
                />
            )}
        </div>
    );
}