"use client";

/**
 * Public subscribe form (PR-19, May 2026).
 *
 * Client component because we want the submit to stay on /status
 * (no full-page reload, single status flash). Talks to
 * POST /api/status/subscribe.
 */
import { useState } from 'react';
import { Button } from '@/components/ui';

type SubmitState = 'idle' | 'submitting' | 'ok' | 'error';

export function SubscribeForm() {
    const [email, setEmail] = useState('');
    const [state, setState] = useState<SubmitState>('idle');
    const [errorMsg, setErrorMsg] = useState<string | null>(null);

    async function onSubmit(e: React.FormEvent) {
        e.preventDefault();
        if (state === 'submitting') return;
        setState('submitting');
        setErrorMsg(null);
        try {
            const res = await fetch('/api/status/subscribe', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email: email.trim() }),
            });
            if (res.ok) {
                setState('ok');
                setEmail('');
            } else {
                const body = await res.json().catch(() => ({ error: 'Subscribe failed.' }));
                setErrorMsg(body.error || 'Subscribe failed.');
                setState('error');
            }
        } catch {
            setErrorMsg('Network error. Try again.');
            setState('error');
        }
    }

    return (
        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 mt-6">
            <h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-1">
                Get notified about incidents
            </h3>
            <p className="text-xs text-slate-600 dark:text-slate-400 mb-3">
                We&apos;ll email you when a new incident opens and when it&apos;s resolved.
                You&apos;ll receive a confirmation link first — no email lists are shared.
            </p>
            <form onSubmit={onSubmit} className="flex flex-col sm:flex-row gap-2">
                <input aria-label="you@example.com"
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="you@example.com"
                    disabled={state === 'submitting'}
                    className="flex-1 h-9 px-3 rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-500/30 focus:border-amber-500 disabled:opacity-50"
                />
                <Button
                    type="submit"
                    variant="primary"
                    size="sm"
                    disabled={state === 'submitting' || email.trim().length === 0}
                    className="px-4 rounded-md bg-amber-500 hover:bg-amber-400 text-white text-sm font-semibold"
                >
                    {state === 'submitting' ? 'Subscribing...' : 'Subscribe'}
                </Button>
            </form>
            {state === 'ok' && (
                <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-2">
                    Check your inbox for a confirmation link.
                </p>
            )}
            {state === 'error' && errorMsg && (
                <p className="text-xs text-rose-600 dark:text-rose-400 mt-2">{errorMsg}</p>
            )}
        </div>
    );
}