"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { History } from "lucide-react";

interface VersionHistoryItem {
  id: string;
  version: number;
  changeDescription: string;
  changedBy: string;
  changedAt: string;
}

interface ScreenVersionHistoryProps {
  versionHistory: VersionHistoryItem[];
  title?: string;
  colorScheme?: {
    border: string;
    background: string;
    text: string;
  };
  maxVisible?: number;
}

export function ScreenVersionHistory({
  versionHistory,
  title = "수정 이력",
  colorScheme = {
    border: "border-purple-200 dark:border-purple-800",
    background: "bg-purple-50 dark:bg-purple-950/30",
    text: "text-purple-700 dark:text-purple-300"
  },
  maxVisible = 3
}: ScreenVersionHistoryProps) {
  if (versionHistory.length === 0) {
    return null;
  }

  return (
    <Card className={`${colorScheme.border} ${colorScheme.background}`}>
      <CardHeader>
        <CardTitle className={`flex items-center gap-2 ${colorScheme.text}`}>
          <History className="h-5 w-5" />
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="bg-background border rounded-lg p-4">
          <div className="text-sm space-y-2">
            <div className="flex items-center justify-between mb-2">
              <span className={`font-semibold ${colorScheme.text}`}>최근 수정 이력</span>
              <Badge variant="secondary">총 {versionHistory.length}건</Badge>
            </div>
            <div className="max-h-32 overflow-y-auto space-y-2">
              {versionHistory.slice().reverse().slice(0, maxVisible).map((history) => (
                <div key={history.id} className="flex items-center gap-2 text-xs">
                  <Badge variant="outline">v{history.version}</Badge>
                  <span className="text-muted-foreground">•</span>
                  <span>{history.changeDescription}</span>
                  <span className="text-muted-foreground">•</span>
                  <span className="text-muted-foreground">{history.changedBy}</span>
                  <span className="text-muted-foreground ml-auto">
                    {new Date(history.changedAt).toLocaleDateString('ko-KR')}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}