'use client';

import { useHistoryStore } from '@/store/history-store';
import { History } from 'lucide-react';

export function HistoryPanel() {
  const { undoStack, redoStack } = useHistoryStore();

  return (
    <div className="flex h-full flex-col bg-card">
      <div className="border-b border-border p-3">
        <h2 className="flex items-center gap-2 text-sm font-semibold text-card-foreground">
          <History className="h-4 w-4" />
          History
        </h2>
      </div>

      <div className="flex-1 overflow-y-auto p-2 space-y-2">
        {undoStack.length === 0 && redoStack.length === 0 ? (
          <div className="flex h-full items-center justify-center">
            <p className="text-sm text-muted-foreground">No history yet</p>
          </div>
        ) : (
          <>
            {/* Undo stack (most recent first) */}
            {[...undoStack].reverse().map((command, index) => (
              <div
                key={`undo-${undoStack.length - index - 1}`}
                className="rounded-md border border-border bg-background p-2"
              >
                <p className="text-sm font-medium text-foreground">{command.name}</p>
                <p className="text-xs text-muted-foreground">
                  {new Date(command.timestamp).toLocaleTimeString()}
                </p>
              </div>
            ))}

            {/* Current state indicator */}
            {undoStack.length > 0 && (
              <div className="flex items-center justify-center py-1">
                <div className="h-2 w-2 rounded-full bg-primary" />
                <div className="ml-2 text-xs font-semibold text-primary">Current State</div>
              </div>
            )}

            {/* Redo stack (oldest first) */}
            {[...redoStack].reverse().map((command, index) => (
              <div
                key={`redo-${index}`}
                className="rounded-md border border-border bg-muted/50 p-2 opacity-50"
              >
                <p className="text-sm font-medium text-muted-foreground">{command.name}</p>
                <p className="text-xs text-muted-foreground">
                  {new Date(command.timestamp).toLocaleTimeString()}
                </p>
              </div>
            ))}
          </>
        )}
      </div>

      <div className="border-t border-border p-3 text-xs text-muted-foreground">
        <div className="flex justify-between">
          <span>{undoStack.length} undoable</span>
          <span>{redoStack.length} redoable</span>
        </div>
      </div>
    </div>
  );
}