"use client";

import Link from "next/link";
import {
  ArrowLeft,
  Download,
  FileImage,
  Printer,
  Redo2,
  Save,
  Undo2,
  ZoomIn,
  ZoomOut,
} from "lucide-react";
import { Button } from "@/components/ui/button";

interface EditorToolbarProps {
  fileName: string;
  dirty: boolean;
  canUndo: boolean;
  canRedo: boolean;
  zoom: number;
  isSaving: boolean;
  isExporting: boolean;
  onUndo: () => void;
  onRedo: () => void;
  onZoom: (zoom: number) => void;
  onDownload: () => void;
  onDownloadPagePng: () => void;
  onPrint: () => void;
  onSaveToFiles: () => void;
}

const ZOOM_LEVELS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];

function IconButton({
  icon: Icon,
  label,
  disabled,
  onClick,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  disabled?: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      title={label}
      aria-label={label}
      disabled={disabled}
      onClick={onClick}
      className="flex h-9 w-9 items-center justify-center rounded-md text-slate-600 transition-colors hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-700"
    >
      <Icon className="h-[18px] w-[18px]" />
    </button>
  );
}

export function EditorToolbar(props: EditorToolbarProps) {
  const zoomIdx = ZOOM_LEVELS.findIndex((z) => z >= props.zoom - 0.001);

  return (
    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-3 dark:border-slate-700 dark:bg-slate-800">
      <Link
        href="/dashboard"
        title="Back to dashboard"
        className="flex h-9 w-9 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700"
      >
        <ArrowLeft className="h-[18px] w-[18px]" />
      </Link>

      <div className="min-w-0 flex-1 sm:flex-none sm:basis-64">
        <p className="truncate text-sm font-medium text-slate-900 dark:text-slate-100">{props.fileName}</p>
        <p className="text-[11px] leading-3 text-slate-400">{props.dirty ? "Unsaved changes" : "All changes stored locally"}</p>
      </div>

      <span className="mx-1 hidden h-6 w-px bg-slate-200 dark:bg-slate-700 sm:block" />

      <IconButton icon={Undo2} label="Undo (Ctrl+Z)" disabled={!props.canUndo} onClick={props.onUndo} />
      <IconButton icon={Redo2} label="Redo (Ctrl+Y)" disabled={!props.canRedo} onClick={props.onRedo} />

      <span className="mx-1 hidden h-6 w-px bg-slate-200 dark:bg-slate-700 sm:block" />

      <IconButton
        icon={ZoomOut}
        label="Zoom out"
        disabled={zoomIdx <= 0}
        onClick={() => props.onZoom(ZOOM_LEVELS[Math.max(0, zoomIdx - 1)])}
      />
      <button
        type="button"
        className="w-14 text-center text-sm tabular-nums text-slate-600 dark:text-slate-300"
        title="Reset zoom"
        onClick={() => props.onZoom(1)}
      >
        {Math.round(props.zoom * 100)}%
      </button>
      <IconButton
        icon={ZoomIn}
        label="Zoom in"
        disabled={zoomIdx >= ZOOM_LEVELS.length - 1}
        onClick={() => props.onZoom(ZOOM_LEVELS[Math.min(ZOOM_LEVELS.length - 1, zoomIdx + 1)])}
      />

      <div className="ml-auto flex items-center gap-1.5">
        <IconButton icon={FileImage} label="Download current page as PNG" onClick={props.onDownloadPagePng} />
        <IconButton icon={Printer} label="Print" onClick={props.onPrint} />
        <Button variant="secondary" size="sm" isLoading={props.isExporting} onClick={props.onDownload}>
          <Download className="h-4 w-4" />
          <span className="hidden sm:inline">Download</span>
        </Button>
        <Button size="sm" isLoading={props.isSaving} onClick={props.onSaveToFiles} title="Save a copy to your files (Ctrl+S)">
          <Save className="h-4 w-4" />
          <span className="hidden sm:inline">Save to my files</span>
        </Button>
      </div>
    </header>
  );
}