'use client';

/**
 * HistoryDialog — shows version history for a page.
 *
 * Fetches /versions and renders a semantic <table>. Each row has a Revert
 * button that POSTs /revert and then calls onReverted() to refresh state.
 * Preview per-version is disabled until a dedicated preview route ships.
 */

import { useEffect, useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/overlays/Dialog';
import { Button } from '@/components/ui/primitives/Button';
import { AdminTable } from '@/components/ui/domain/admin/AdminTable';
import { useT, useLocale } from '@/lib/i18n/react';
import { formatDateTime } from '@/lib/format';
import { versions, revert, type VersionRow } from './api';

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

export function HistoryDialog({ page, onReverted, onClose }: HistoryDialogProps) {
  const t = useT('page_organizer');
  const { locale } = useLocale();
  const [versionList, setVersionList] = useState<VersionRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [revertingId, setRevertingId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    void versions(page).then((v) => {
      setVersionList(v);
      setLoading(false);
    });
  }, [page]);

  async function handleRevert(versionId: string) {
    setRevertingId(versionId);
    setError(null);
    try {
      await revert(page, { versionId });
      onReverted();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setRevertingId(null);
    }
  }

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{t('history_title')}</DialogTitle>
        </DialogHeader>

        {loading ? (
          <div className="text-text-secondary py-6 text-center text-sm">{t('draft_saving')}</div>
        ) : (
          <AdminTable
            columns={[
              {
                key: 'version',
                label: t('history_col_version'),
                render: (v) => <span className="text-text-primary tabular-nums">{v.version}</span>,
              },
              {
                key: 'createdAt',
                label: t('history_col_date'),
                render: (v) => (
                  <span className="text-text-secondary">{formatDateTime(v.createdAt, locale)}</span>
                ),
              },
              {
                key: 'note',
                label: t('history_col_note'),
                render: (v) => <span className="text-text-secondary">{v.note ?? '—'}</span>,
              },
              {
                key: 'actions',
                label: t('history_col_actions'),
                render: (v) => (
                  <Button
                    variant="secondary"
                    size="sm"
                    disabled={revertingId !== null}
                    loading={revertingId === v.id}
                    onClick={() => void handleRevert(v.id)}
                  >
                    {t('btn_revert')}
                  </Button>
                ),
              },
            ]}
            rows={versionList}
          />
        )}

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

        <DialogFooter>
          <Button variant="ghost" onClick={onClose}>
            {t('btn_cancel')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}