import { CalendarClock, Megaphone, Save, ShieldCheck } from 'lucide-react';
import { useEffect, useState, type FormEvent } from 'react';
import { useApiResource, useServer } from '../context/server-context';
import { useI18n } from '../lib/i18n';
import { Badge, Button, FeatureUnavailable, Field, Input, PageHeader, Panel, ResourceState, Select, TableShell, Textarea, Toast, formatDate } from '../components/ui';
import { RichTextEditor, richTextPlainText } from '../components/rich-text-editor';
import { variableAppliesToEvent } from '../components/rich-text-variables';

export function MaintenancePage() {
  const { t, locale } = useI18n(); const { api, features } = useServer();
  const enabled = features?.moderationEnabled === true;
  const resource = useApiResource(() => api.maintenance(), [], ['maintenance'], enabled);
  const catalogResource = useApiResource(() => api.triggerCatalog(), []);
  const variableCatalog = catalogResource.data?.variables?.filter((variable) =>
    variable.templateAllowed !== false && variable.sensitive !== true
    && variableAppliesToEvent(variable, 'player.maintenance'));
  const defaultSenderName = resource.data?.defaultMessageSender ?? 'XFEServerManager';
  const [active, setActive] = useState(false); const [message, setMessage] = useState('');
  const [allowed, setAllowed] = useState(''); const [reason, setReason] = useState('');
  const [announcement, setAnnouncement] = useState(''); const [announcementReason, setAnnouncementReason] = useState('');
  const [executeAt, setExecuteAt] = useState(''); const [kind, setKind] = useState('announce');
  const [scheduledMessage, setScheduledMessage] = useState(''); const [countdown, setCountdown] = useState('30s');
  const [scheduleReason, setScheduleReason] = useState(''); const [busy, setBusy] = useState(false);
  const [toast, setToast] = useState<{ message: string; tone: 'good' | 'danger' }>();
  useEffect(() => { if (!resource.data) return; setActive(resource.data.enabled); setMessage(resource.data.message); setAllowed(resource.data.allowedPlayers.join('\n')); }, [resource.data?.revision]);
  const outcome = (action: () => Promise<unknown>, success: string) => async () => {
    setBusy(true); try { await action(); setToast({ message: success, tone: 'good' }); resource.reload(); }
    catch (error) { setToast({ message: error instanceof Error ? error.message : String(error), tone: 'danger' }); }
    finally { setBusy(false); }
  };
  const save = (event: FormEvent) => { event.preventDefault(); void outcome(() => api.updateMaintenance(active, message.trim(), allowed.split(/\r?\n|,/).map((item) => item.trim()).filter(Boolean), reason.trim()), t('maintenance.saved'))(); };
  const send = (event: FormEvent) => { event.preventDefault(); void outcome(() => api.announce(announcement.trim(), announcementReason.trim()), t('maintenance.announced'))(); };
  const schedule = (event: FormEvent) => {
    event.preventDefault(); const date = new Date(executeAt);
    void outcome(() => api.scheduleMaintenance(date.toISOString(), kind, scheduleReason.trim(), { message: scheduledMessage.trim(), countdown }), t('maintenance.scheduled'))();
  };
  return <div className="page"><PageHeader title={t('maintenance.title')} description={t('maintenance.description')} />
    {!enabled && <FeatureUnavailable>{t('maintenance.featureOff')}</FeatureUnavailable>}
    <div className="moderation-layout"><div className="form-stack">
      <Panel title={<><ShieldCheck size={18} />{t('maintenance.mode')}</>}><form className="form-stack" onSubmit={save}>
        <label className="toggle-row"><input type="checkbox" checked={active} onChange={(event) => setActive(event.target.checked)} /><span><strong>{active ? t('common.enabled') : t('common.disabled')}</strong><small>{t('maintenance.modeHint')}</small></span></label>
        <Field label={t('maintenance.message')}><RichTextEditor compact value={message} onChange={setMessage}
          defaultSenderName={defaultSenderName} variableCatalog={variableCatalog} /></Field>
        <Field label={t('maintenance.allowed')}><Textarea value={allowed} onChange={(event) => setAllowed(event.target.value)} /></Field>
        <Field label={t('common.reason')}><Input value={reason} onChange={(event) => setReason(event.target.value)} required /></Field>
        <Button type="submit" disabled={busy || !enabled || !reason.trim()}><Save size={16} />{t('common.save')}</Button>
      </form></Panel>
      <Panel title={<><Megaphone size={18} />{t('maintenance.announce')}</>}><form className="form-stack" onSubmit={send}>
        <Field label={t('maintenance.message')}><RichTextEditor value={announcement} onChange={setAnnouncement}
          defaultSenderName={defaultSenderName} variableCatalog={variableCatalog} /></Field>
        <Field label={t('common.reason')}><Input value={announcementReason} onChange={(event) => setAnnouncementReason(event.target.value)} required /></Field>
        <Button type="submit" disabled={busy || !enabled || !richTextPlainText(announcement).trim() || !announcementReason.trim()}><Megaphone size={16} />{t('maintenance.send')}</Button>
      </form></Panel>
    </div><div className="form-stack">
      <Panel title={<><CalendarClock size={18} />{t('maintenance.schedule')}</>}><form className="form-stack" onSubmit={schedule}>
        <Field label={t('maintenance.executeAt')}><Input type="datetime-local" value={executeAt} onChange={(event) => setExecuteAt(event.target.value)} required /></Field>
        <Field label={t('maintenance.action')}><Select value={kind} onChange={(event) => setKind(event.target.value)}><option value="announce">{t('maintenance.announce')}</option><option value="enable_maintenance">{t('maintenance.enable')}</option><option value="disable_maintenance">{t('maintenance.disable')}</option><option value="save_flush">save-all flush</option><option value="graceful_stop">{t('maintenance.stop')}</option></Select></Field>
        {kind === 'announce' && <Field label={t('maintenance.message')}><RichTextEditor compact value={scheduledMessage} onChange={setScheduledMessage}
          defaultSenderName={defaultSenderName} variableCatalog={variableCatalog} /></Field>}
        {kind.includes('maintenance') && <Field label={t('maintenance.message')}><RichTextEditor compact value={scheduledMessage} onChange={setScheduledMessage}
          defaultSenderName={defaultSenderName} variableCatalog={variableCatalog} /></Field>}
        {kind === 'graceful_stop' && <><Field label={t('maintenance.countdown')}><Input value={countdown} onChange={(event) => setCountdown(event.target.value)} placeholder="30s" /></Field><div className="confirm-box"><CalendarClock size={16} /><p>{t('maintenance.stopScheduleHint')}</p></div></>}
        <Field label={t('common.reason')}><Input value={scheduleReason} onChange={(event) => setScheduleReason(event.target.value)} required /></Field>
        <Button type="submit" disabled={busy || !enabled || !executeAt || !scheduleReason.trim() || kind === 'announce' && !richTextPlainText(scheduledMessage).trim()}><CalendarClock size={16} />{t('maintenance.schedule')}</Button>
      </form></Panel>
      <Panel title={t('maintenance.jobs')}><ResourceState loading={resource.loading} error={resource.error} empty={resource.data?.schedules.length === 0} onRetry={resource.reload}><TableShell><thead><tr><th>{t('maintenance.action')}</th><th>{t('maintenance.executeAt')}</th><th>{t('moderation.state')}</th></tr></thead><tbody>{resource.data?.schedules.map((job) => <tr key={job.id}><td><strong>{job.kind}</strong><small className="table-subline">{job.createdBy}</small></td><td>{formatDate(job.executeAt, locale)}</td><td><Badge tone={job.status === 'FAILED' ? 'danger' : job.status === 'COMPLETED' ? 'good' : 'info'}>{job.status}</Badge></td></tr>)}</tbody></TableShell></ResourceState></Panel>
    </div></div>{toast && <Toast {...toast} onClose={() => setToast(undefined)} />}</div>;
}