'use client';

/**
 * C-FE — create-maintenance-window modal.
 *
 * POSTs to /api/maintenance-windows. The CRUD API enforces ADMIN/EDITOR
 * on writes; this form only renders for users who can write (parent
 * page check). One-shot windows leave the recurrence field empty;
 * weekly recurrence sets a comma-separated day-of-week string.
 */

import { useState } from 'react';
import { X, Calendar, AlertCircle } from 'lucide-react';
import { RecurrencePicker } from './RecurrencePicker';
import { Button, IconButton } from '@/components/ui';

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

interface Props {
    monitors: MonitorOption[];
    onClose: () => void;
    onCreated: () => void;
}

function nowPlusMinutesLocal(mins: number): string {
    const d = new Date(Date.now() + mins * 60_000);
    // datetime-local needs "YYYY-MM-DDTHH:mm" in local time
    const pad = (n: number) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

export function MaintenanceFormModal({ monitors, onClose, onCreated }: Props) {
    const [monitorId, setMonitorId] = useState<string>('');         // empty = operator-wide
    const [startsAt, setStartsAt] = useState(nowPlusMinutesLocal(5));
    const [endsAt, setEndsAt] = useState(nowPlusMinutesLocal(65));
    const [reason, setReason] = useState('');
    const [recurrence, setRecurrence] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);

    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        setError(null);
        if (!reason.trim()) {
            setError('Reason is required.');
            return;
        }
        if (new Date(endsAt).getTime() <= new Date(startsAt).getTime()) {
            setError('End time must be after start time.');
            return;
        }
        setSubmitting(true);
        try {
            const res = await fetch('/api/maintenance-windows', {
                method: 'POST',
                headers: { 'content-type': 'application/json' },
                body: JSON.stringify({
                    monitorId: monitorId ? parseInt(monitorId, 10) : null,
                    startsAt: new Date(startsAt).toISOString(),
                    endsAt: new Date(endsAt).toISOString(),
                    reason: reason.trim(),
                    recurrence: recurrence || null,
                }),
            });
            const data = await res.json();
            if (!res.ok) {
                setError(data?.error || 'Failed to create window');
                setSubmitting(false);
                return;
            }
            onCreated();
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Network error');
            setSubmitting(false);
        }
    }

    return (
        <div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
            role="dialog"
            aria-modal="true"
            aria-labelledby="mw-modal-title"
        >
            <div className="w-full max-w-lg max-h-[95vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl p-6 border border-slate-200 dark:border-slate-700">
                <div className="flex items-start justify-between mb-4">
                    <div className="flex items-center gap-2">
                        <Calendar className="size-5 text-amber-500" />
                        <h2 id="mw-modal-title" className="text-base font-bold text-slate-800 dark:text-white">
                            Schedule maintenance window
                        </h2>
                    </div>
                    <IconButton
                        label="Close"
                        variant="ghost"
                        size="md"
                        onClick={onClose}
                        className="text-slate-400 hover:text-slate-700 dark:hover:text-white"
                    >
                        <X className="size-5" />
                    </IconButton>
                </div>

                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label className="block text-xs font-bold text-slate-600 dark:text-slate-300 mb-1">
                            Monitor
                        </label>
                        <select
                            value={monitorId}
                            onChange={(e) => setMonitorId(e.target.value)}
                            className="w-full h-10 px-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm text-slate-800 dark:text-white"
                        >
                            <option value="">All monitors (operator-wide)</option>
                            {monitors.map((m) => (
                                <option key={m.id} value={m.id}>
                                    {m.name}
                                </option>
                            ))}
                        </select>
                        <p className="text-xs text-slate-400 mt-1">
                            Leave as &quot;All monitors&quot; to suppress alerts everywhere during the window.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label className="block text-xs font-bold text-slate-600 dark:text-slate-300 mb-1">
                                Starts at
                            </label>
                            <input
                                type="datetime-local"
                                value={startsAt}
                                onChange={(e) => setStartsAt(e.target.value)}
                                className="w-full h-10 px-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm text-slate-800 dark:text-white"
                            />
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-slate-600 dark:text-slate-300 mb-1">
                                Ends at
                            </label>
                            <input
                                type="datetime-local"
                                value={endsAt}
                                onChange={(e) => setEndsAt(e.target.value)}
                                className="w-full h-10 px-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm text-slate-800 dark:text-white"
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-xs font-bold text-slate-600 dark:text-slate-300 mb-1">
                            Reason
                        </label>
                        <input aria-label="DB upgrade, certificate rotation, ..."
                            type="text"
                            value={reason}
                            onChange={(e) => setReason(e.target.value)}
                            placeholder="DB upgrade, certificate rotation, ..."
                            maxLength={255}
                            className="w-full h-10 px-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm text-slate-800 dark:text-white"
                        />
                    </div>

                    <div>
                        <label className="block text-xs font-bold text-slate-600 dark:text-slate-300 mb-2">
                            Repeat weekly on (leave blank for one-shot)
                        </label>
                        <RecurrencePicker value={recurrence} onChange={setRecurrence} />
                        <p className="text-xs text-slate-400 mt-2">
                            When set, the window repeats every week at the same UTC time on the selected days.
                        </p>
                    </div>

                    {error && (
                        <div className="flex items-start gap-2 text-xs text-red-400 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-900/40 rounded-lg px-3 py-2">
                            <AlertCircle className="size-4 flex-shrink-0 mt-0.5" />
                            {error}
                        </div>
                    )}

                    <div className="flex justify-end gap-2 pt-2">
                        <Button
                            variant="ghost"
                            size="md"
                            onClick={onClose}
                            disabled={submitting}
                            className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
                        >
                            Cancel
                        </Button>
                        <Button
                            type="submit"
                            variant="primary"
                            size="md"
                            disabled={submitting}
                            className="text-sm font-bold bg-amber-500 hover:bg-amber-600 text-white shadow-sm"
                        >
                            {submitting ? 'Creating...' : 'Create window'}
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    );
}