import { ChevronUp, FileChartColumnIncreasing, Sparkles, Trash2 } from "lucide-react";
import { cn } from "@/shared/ui/cn";
import {
  ARTIFACT_DANGER_ICON_BUTTON_CLASS_NAME,
  ARTIFACT_PRIMARY_ACTION_BUTTON_CLASS_NAME
} from "./artifact-view-control-styles";
import type { AnalysisArtifact, WorkbenchSurfaceMode } from "./workspace-model";

export function ArtifactPeekBar({
  artifact,
  surfaceMode,
  onOpen,
  onDestroy
}: {
  artifact: AnalysisArtifact;
  surfaceMode: WorkbenchSurfaceMode;
  onOpen: () => void;
  onDestroy: () => void;
}) {
  return (
    <aside
      aria-label="Agent 成果预览"
      className={cn(
        "acrylic-panel pointer-events-auto absolute bottom-14 z-40 flex min-h-[76px] w-[min(680px,calc(100%-2rem))] items-center gap-3 rounded-2xl border px-3 py-2.5 text-slate-900",
        "left-1/2 -translate-x-1/2",
        surfaceMode === "map_split" && "2xl:left-[25%]"
      )}
    >
      <span className="material-tone-agent hidden h-11 w-11 shrink-0 place-items-center rounded-xl border text-violet-700 sm:grid">
        <FileChartColumnIncreasing size={21} aria-hidden="true" />
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2 text-[11px] font-semibold text-violet-700">
          <Sparkles size={12} aria-hidden="true" />
          新分析成果 · R{artifact.revision}
        </div>
        <p className="mt-1 truncate text-sm font-semibold text-slate-950">{artifact.title}</p>
        <p className="mt-0.5 line-clamp-1 text-xs text-slate-600">{artifact.summary}</p>
      </div>
      <button
        type="button"
        onClick={onOpen}
        className={ARTIFACT_PRIMARY_ACTION_BUTTON_CLASS_NAME}
      >
        <ChevronUp size={14} aria-hidden="true" />
        打开成果
      </button>
      <button
        type="button"
        aria-label="销毁预览成果"
        title="销毁预览成果"
        onClick={onDestroy}
        className={cn("surface-control border", ARTIFACT_DANGER_ICON_BUTTON_CLASS_NAME)}
      >
        <Trash2 size={15} aria-hidden="true" />
      </button>
    </aside>
  );
}