"use client";

import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import type { DocumentSnapshot } from "@/types/document";

interface DocumentHistoryDrawerProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  history: DocumentSnapshot[];
  onRestore: (snapshot: DocumentSnapshot) => void;
}

export function DocumentHistoryDrawer({ open, onOpenChange, history, onRestore }: DocumentHistoryDrawerProps) {
  return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent className="max-h-[90vh]">
        <DrawerHeader className="text-left">
          <DrawerTitle>页面历史</DrawerTitle>
          <DrawerDescription>最近保存的 15 个版本，可以一键恢复。</DrawerDescription>
        </DrawerHeader>
        <div className="space-y-3 px-4 pb-6">
          {history.length === 0 ? (
            <div className="rounded-lg border border-dashed border-[#e2e8f0] px-4 py-10 text-center text-sm text-gray-500">
              尚未产生历史快照，编辑后会自动生成。
            </div>
          ) : (
            history.map((snapshot) => (
              <div
                key={snapshot.id}
                className="flex items-center justify-between rounded-lg border border-[#e2e8f0] bg-white px-4 py-3 text-sm"
              >
                <div>
                  <div className="font-medium text-gray-800">
                    {new Date(snapshot.timestamp).toLocaleString()}
                  </div>
                  <div className="text-xs text-gray-500">
                    字数 {snapshot.stats.wordCount} · 字符 {snapshot.stats.characterCount}
                  </div>
                </div>
                <Button variant="outline" size="sm" onClick={() => onRestore(snapshot)}>
                  恢复该版本
                </Button>
              </div>
            ))
          )}
        </div>
      </DrawerContent>
    </Drawer>
  );
}
