'use client';

import * as React from 'react';
import { Undo2, Redo2, History, Info } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import type { HistoryState } from '@/lib/history/history-manager';

export interface HistoryControlsProps {
  historyState: HistoryState;
  onUndo: () => void;
  onRedo: () => void;
  onClear?: () => void;
  className?: string;
}

export function HistoryControls({
  historyState,
  onUndo,
  onRedo,
  onClear,
  className,
}: HistoryControlsProps) {
  return (
    <div className={cn('space-y-4', className)}>
      {/* History Info */}
      {historyState.historySize > 0 && (
        <div className="rounded-lg border-2 border-info bg-info/90 p-3">
          <div className="flex items-start gap-2">
            <Info className="h-4 w-4 text-white dark:text-white mt-0.5 flex-shrink-0" />
            <div className="flex-1 min-w-0 text-sm text-white dark:text-white">
              <p className="font-medium">History Available</p>
              <p className="opacity-95 mt-1">
                {historyState.historySize} action{historyState.historySize !== 1 ? 's' : ''} in history
              </p>
              {historyState.undoDescription && (
                <p className="text-xs opacity-90 mt-1">
                  Next undo: {historyState.undoDescription}
                </p>
              )}
              {historyState.redoDescription && (
                <p className="text-xs opacity-90 mt-1">
                  Next redo: {historyState.redoDescription}
                </p>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Control Buttons */}
      <div className="grid grid-cols-2 gap-2">
        <Button
          variant="outline"
          onClick={onUndo}
          disabled={!historyState.canUndo}
          title={
            historyState.canUndo
              ? `Undo ${historyState.undoDescription} (Ctrl+Z)`
              : 'Nothing to undo (Ctrl+Z)'
          }
          className="justify-start"
        >
          <Undo2 className="h-4 w-4 mr-2" />
          Undo
        </Button>

        <Button
          variant="outline"
          onClick={onRedo}
          disabled={!historyState.canRedo}
          title={
            historyState.canRedo
              ? `Redo ${historyState.redoDescription} (Ctrl+Y)`
              : 'Nothing to redo (Ctrl+Y)'
          }
          className="justify-start"
        >
          <Redo2 className="h-4 w-4 mr-2" />
          Redo
        </Button>

        {onClear && historyState.historySize > 0 && (
          <Button
            variant="outline"
            onClick={onClear}
            title="Clear history"
            className="justify-start col-span-2"
          >
            <History className="h-4 w-4 mr-2" />
            Clear History ({historyState.historySize})
          </Button>
        )}
      </div>

      {/* Keyboard Shortcuts Info */}
      <div className="text-xs text-muted-foreground space-y-1 p-3 rounded-lg bg-muted/30">
        <p className="font-medium mb-2">History Shortcuts:</p>
        <p>• Ctrl+Z: Undo last action</p>
        <p>• Ctrl+Y or Ctrl+Shift+Z: Redo last action</p>
        <p className="mt-2 text-xs text-muted-foreground/75">
          History tracks up to 50 edit operations
        </p>
      </div>
    </div>
  );
}