import { useRef } from "react";
import { Button } from "./ui";
import { CloseIcon, CropIcon, ImagePlusIcon, ResetIcon } from "./icons";

interface TopBarProps {
  hasImage: boolean;
  onFile: (file: File) => void;
  onResetEdits: () => void;
  onClose: () => void;
}

export function TopBar({ hasImage, onFile, onResetEdits, onClose }: TopBarProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <header className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-800/60 bg-zinc-900 px-4">
      <div className="group flex items-center gap-2.5">
        <span className="inline-grid size-9 place-items-center">
          <CropIcon
            className="size-6 text-accent-400 transition-transform duration-200 group-hover:-rotate-6"
            strokeWidth={2}
            aria-hidden="true"
          />
        </span>
        <div className="leading-tight">
          <h1 className="text-sm font-semibold tracking-tight text-zinc-100">wimp</h1>
          <p className="text-[0.65rem] text-zinc-500">web image manipulation</p>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <span className="hidden items-center gap-1.5 rounded-full bg-zinc-800 px-2.5 py-1 text-[0.65rem] text-zinc-400 sm:flex">
          <span className="size-1.5 rounded-full bg-emerald-500" /> 100% local · nothing uploaded
        </span>
        {hasImage && (
          <>
            <Button size="sm" variant="ghost" onClick={onResetEdits}>
              <ResetIcon className="size-4" /> Reset
            </Button>
            <Button size="sm" variant="subtle" onClick={() => inputRef.current?.click()}>
              <ImagePlusIcon className="size-4" /> New image
            </Button>
            <Button size="sm" variant="ghost" onClick={onClose} aria-label="Close image">
              <CloseIcon className="size-4" />
            </Button>
          </>
        )}
      </div>

      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) onFile(file);
          e.target.value = "";
        }}
      />
    </header>
  );
}