'use client';

/**
 * ScheduleDialog — schedule an already-published version for a future publish.
 *
 * Loads version history, lets admin pick a version + future datetime, then
 * POSTs to /schedule. Also shows any current scheduled state with a Cancel
 * button.
 */

import { useEffect, useId, useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/overlays/Dialog';
import { Button } from '@/components/ui/primitives/Button';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/primitives/Select';
import { useT, useLocale } from '@/lib/i18n/react';
import { fetchPage, versions, schedule, cancelSchedule, type VersionRow } from './api';
import { formatDate, formatDateTime } from '@/lib/format';

export interface ScheduleDialogProps {
  page: string;
  onClose: () => void;
}

export function ScheduleDialog({ page, onClose }: ScheduleDialogProps) {
  const t = useT('page_organizer');
  const { locale } = useLocale();
  const versionSelectId = useId();
  const dateTimeId = useId();

  const [versionList, setVersionList] = useState<VersionRow[]>([]);
  const [currentScheduled, setCurrentScheduled] = useState<{
    versionId: string;
    at: string;
  } | null>(null);
  const [selectedVersionId, setSelectedVersionId] = useState('');
  const [at, setAt] = useState('');
  const [datetimeError, setDatetimeError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    void Promise.all([versions(page), fetchPage(page)]).then(([vList, pageData]) => {
      setVersionList(vList);
      setCurrentScheduled(pageData.scheduled);
      if (vList[0]) setSelectedVersionId(vList[0].id);
      setLoading(false);
    });
  }, [page]);

  function validateDatetime(value: string): boolean {
    if (!value) {
      setDatetimeError(t('schedule_datetime_error'));
      return false;
    }
    const picked = new Date(value);
    if (isNaN(picked.getTime()) || picked <= new Date()) {
      setDatetimeError(t('schedule_datetime_error'));
      return false;
    }
    setDatetimeError(null);
    return true;
  }

  async function handleSchedule() {
    if (!validateDatetime(at)) return;
    if (!selectedVersionId) return;
    setBusy(true);
    setError(null);
    try {
      await schedule(page, { versionId: selectedVersionId, at: new Date(at).toISOString() });
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setBusy(false);
    }
  }

  async function handleCancelSchedule() {
    setBusy(true);
    setError(null);
    try {
      await cancelSchedule(page);
      setCurrentScheduled(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setBusy(false);
    }
  }

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t('schedule_title')}</DialogTitle>
        </DialogHeader>

        {/* Current scheduled state */}
        <div className="border-border-default mb-4 rounded-md border p-3 text-sm">
          {currentScheduled ? (
            <div className="flex items-center justify-between gap-2">
              <span className="text-text-secondary">
                {t('schedule_current_at').replace(
                  '{at}',
                  formatDateTime(currentScheduled.at, locale),
                )}
              </span>
              <Button
                variant="danger"
                size="sm"
                disabled={busy}
                onClick={() => void handleCancelSchedule()}
              >
                {t('btn_cancel_schedule')}
              </Button>
            </div>
          ) : (
            <span className="text-text-secondary">{t('schedule_no_current')}</span>
          )}
        </div>

        {loading ? (
          <div className="text-text-secondary py-4 text-center text-sm">
            {/* spinner handled by Button loading state; minimal text here */}
            {t('draft_saving')}
          </div>
        ) : (
          <>
            <FormField label={t('schedule_version_label')} htmlFor={versionSelectId}>
              <Select value={selectedVersionId} onValueChange={setSelectedVersionId}>
                <SelectTrigger id={versionSelectId}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {versionList.map((v) => (
                    <SelectItem key={v.id} value={v.id}>
                      {t('history_col_version')} {v.version}
                      {v.note ? ` — ${v.note}` : ''} ({formatDate(v.createdAt, 'he')})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </FormField>

            <FormField
              label={t('schedule_at_label')}
              htmlFor={dateTimeId}
              error={datetimeError ?? undefined}
            >
              <Input
                id={dateTimeId}
                type="datetime-local"
                value={at}
                onChange={(e) => {
                  setAt(e.target.value);
                  setDatetimeError(null);
                }}
              />
            </FormField>
          </>
        )}

        {error && (
          <p role="alert" className="text-danger-600 mt-2 text-sm">
            {error}
          </p>
        )}

        <DialogFooter>
          <Button
            variant="primary"
            disabled={busy || loading}
            loading={busy}
            onClick={() => void handleSchedule()}
          >
            {t('btn_schedule')}
          </Button>
          <Button variant="ghost" onClick={onClose}>
            {t('btn_cancel')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}