"use client";

import { ReferenceIcon } from "@/components/lovart/reference-icon";

import { Loader2, Save } from "lucide-react";

type CanvasSurfaceHeaderProps = {
  isSaving: boolean;
  onAddImage: () => void;
  onHome: () => void;
  onOpenFiles: () => void;
  onSave: () => void;
  projectTitle: string;
  rightInset: number;
};

const iconButtonClass =
  "inline-flex h-[28px] w-[28px] items-center justify-center rounded-[8px] p-0 text-[#858585] transition-colors hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2 dark:hover:bg-white/10";

export function CanvasSurfaceHeader({
  isSaving,
  onAddImage,
  onHome,
  onOpenFiles,
  onSave,
  projectTitle,
  rightInset,
}: CanvasSurfaceHeaderProps) {
  return (
    <div
      className="absolute left-0 top-0 z-20 flex h-[40px] items-center justify-between border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950"
      data-canvas-topbar="true"
      style={{ right: rightInset }}
    >
      <div className="flex min-w-0 items-center gap-2">
        <button
          aria-label="返回首页"
          className={iconButtonClass}
          onClick={onHome}
          title="返回首页"
          type="button"
        >
          <ReferenceIcon name="branding" size={16} />
        </button>
        <button
          aria-label="添加参考素材"
          className={iconButtonClass}
          onClick={onAddImage}
          title="添加参考素材"
          type="button"
        >
          <ReferenceIcon name="reference" size={16} />
        </button>
        <button
          aria-label="查看项目文件"
          className={iconButtonClass}
          onClick={onOpenFiles}
          title="查看项目文件"
          type="button"
        >
          <ReferenceIcon name="brand" size={16} />
        </button>
        <div className="mx-1 h-4 w-px bg-[#ededed] dark:bg-white/10" />
        <span className="inline-flex h-7 min-w-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[13px] text-[#333333] dark:bg-white/10 dark:text-white">
          <ReferenceIcon name="page" size={16} />
          <span className="max-w-[160px] truncate">
            {projectTitle || "页面 1"}
          </span>
        </span>
        <button
          aria-label="添加到画布"
          className={iconButtonClass}
          onClick={onAddImage}
          title="添加到画布"
          type="button"
        >
          <ReferenceIcon name="plus" size={16} />
        </button>
      </div>
      <button
        className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#333333] transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:text-white"
        disabled={isSaving}
        onClick={onSave}
        type="button"
      >
        {isSaving ? (
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
        ) : (
          <Save className="h-3.5 w-3.5" />
        )}
        保存
      </button>
    </div>
  );
}