'use client';

import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { RotateCcw, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/api/client';
import { useConfirmation } from '@/hooks/use-confirmation';

interface TemplateVersion {
  version: number;
  content: Record<string, unknown>;
  changedBy: string | null;
  changedAt: string;
  auditLogId: string;
}

interface TemplateVersionHistoryProps {
  templateId: string;
  currentVersion: number;
  onRollback: () => void;
}

export function TemplateVersionHistory({
  templateId,
  currentVersion,
  onRollback,
}: TemplateVersionHistoryProps) {
  const queryClient = useQueryClient();
  const { confirm, dialog: confirmDialog } = useConfirmation();
  const queryKey = ['admin', 'template-versions', templateId] as const;
  const [rollingBack, setRollingBack] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);

  const {
    data: versions = [],
    isLoading: loading,
    error: queryError,
  } = useQuery<TemplateVersion[]>({
    queryKey,
    queryFn: () =>
      apiFetch<{ data: TemplateVersion[] }>(`/api/v1/admin/templates/${templateId}/versions`).then(
        (r) => r.data,
      ),
  });

  const fetchVersions = () => queryClient.invalidateQueries({ queryKey });
  const effectiveError = error ?? (queryError instanceof Error ? queryError.message : null);

  async function handleRollback(version: number) {
    const ok = await confirm({
      title: `Roll back to version ${version}`,
      description: `This will create a new version ${currentVersion + 1}.`,
      confirmLabel: 'Restore',
    });
    if (!ok) return;

    setRollingBack(version);
    setError(null);
    try {
      await apiFetch(`/api/v1/admin/templates/${templateId}/rollback`, {
        method: 'POST',
        body: { version },
      });
      onRollback();
      await fetchVersions();
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Rollback failed');
    } finally {
      setRollingBack(null);
    }
  }

  if (loading) {
    return (
      <div className="py-4 text-center text-sm text-muted-foreground">Loading version history…</div>
    );
  }

  if (versions.length === 0) {
    return (
      <div className="flex flex-col items-center gap-2 rounded-md border border-dashed p-6 text-center">
        <Clock className="h-6 w-6 text-muted-foreground" aria-hidden />
        <p className="text-sm text-muted-foreground">
          No previous versions found. Versions are saved whenever you update the template content.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {effectiveError && (
        <p className="rounded bg-destructive/10 px-3 py-2 text-sm text-destructive">
          {effectiveError}
        </p>
      )}

      <p className="text-sm text-muted-foreground">
        Current version: <strong>v{currentVersion}</strong>. Click Restore to roll back to a
        previous version (creates a new version).
      </p>

      <div className="divide-y rounded-md border">
        {versions.map((v) => (
          <div key={v.auditLogId} className="flex items-center justify-between px-4 py-3">
            <div className="space-y-0.5">
              <div className="flex items-center gap-2">
                <Badge variant="outline">v{v.version}</Badge>
                <span className="text-sm font-medium">Version {v.version}</span>
              </div>
              <p className="text-xs text-muted-foreground">
                Saved{' '}
                {new Date(v.changedAt).toLocaleString('en-GB', {
                  day: '2-digit',
                  month: 'short',
                  year: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                })}
                {v.changedBy ? ` by ${v.changedBy}` : ''}
              </p>
            </div>

            <Button
              variant="outline"
              size="sm"
              onClick={() => handleRollback(v.version)}
              disabled={rollingBack === v.version}
            >
              <RotateCcw className="mr-1.5 h-3.5 w-3.5" aria-hidden />
              {rollingBack === v.version ? 'Restoring…' : 'Restore'}
            </Button>
          </div>
        ))}
      </div>
      {confirmDialog}
    </div>
  );
}