"use client";

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/atoms/Tooltip/BaseTooltip";
import { cn } from "@/lib/utils";
import {
  ArrowLeftIcon,
  CopyIcon,
  DownloadSimpleIcon,
  FolderIcon,
  XIcon,
} from "@phosphor-icons/react";
import type { ArtifactRef } from "../../../store";
import type { ArtifactClassification } from "../helpers";
import { SourceToggle } from "./SourceToggle";

interface Props {
  artifact: ArtifactRef;
  classification: ArtifactClassification;
  canGoBack: boolean;
  isSourceView: boolean;
  hasSourceToggle: boolean;
  canCopy?: boolean;
  onBack: () => void;
  onClose: () => void;
  onCopy: () => void;
  onDownload: () => void;
  onOpenFiles: () => void;
  onSourceToggle: (isSource: boolean) => void;
}

function HeaderButton({
  onClick,
  title,
  children,
}: {
  onClick: () => void;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          type="button"
          onClick={onClick}
          aria-label={title}
          className="rounded p-1.5 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
        >
          {children}
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom">{title}</TooltipContent>
    </Tooltip>
  );
}

export function ArtifactPanelHeader({
  artifact,
  classification,
  canGoBack,
  isSourceView,
  hasSourceToggle,
  canCopy = true,
  onBack,
  onClose,
  onCopy,
  onDownload,
  onOpenFiles,
  onSourceToggle,
}: Props) {
  const Icon = classification.icon;

  return (
    <div className="sticky top-0 z-10 flex items-center gap-2 border-b border-b-[#80808017] bg-sidebar px-3 py-2">
      {/* Left section */}
      <div className="flex min-w-0 flex-1 items-center gap-2">
        {canGoBack && (
          <HeaderButton onClick={onBack} title="Back">
            <ArrowLeftIcon size={16} />
          </HeaderButton>
        )}
        <Icon size={16} className="shrink-0 text-zinc-400" />
        <span className="truncate text-sm font-medium text-zinc-900">
          {artifact.title}
        </span>
        <span
          className={cn(
            "shrink-0 rounded-full px-2 py-0.5 text-xs font-medium",
            artifact.origin === "user-upload"
              ? "bg-blue-50 text-blue-600"
              : "bg-violet-50 text-violet-600",
          )}
        >
          {classification.label}
        </span>
      </div>

      {/* Right section */}
      <div className="flex items-center gap-1">
        {hasSourceToggle && (
          <SourceToggle isSourceView={isSourceView} onToggle={onSourceToggle} />
        )}
        {canCopy && (
          <HeaderButton onClick={onCopy} title="Copy">
            <CopyIcon size={16} />
          </HeaderButton>
        )}
        <HeaderButton onClick={onDownload} title="Download">
          <DownloadSimpleIcon size={16} />
        </HeaderButton>
        <HeaderButton onClick={onOpenFiles} title="All files">
          <FolderIcon size={16} />
        </HeaderButton>
        <HeaderButton onClick={onClose} title="Close">
          <XIcon size={16} />
        </HeaderButton>
      </div>
    </div>
  );
}
