Header Editor

"use client";

import { useId, useState } from "react";
import { ArrowLeft, Eye } from "lucide-react";
import { cn } from "@/lib/utils";

export type HeaderEditorStatus = "saved" | "saving" | "unsaved";

export interface HeaderEditorProps {
  backHref?: string;
  defaultTitle?: string;
  onTitleChange?: (title: string) => void;
  status?: HeaderEditorStatus;
  version?: string;
  previewHref?: string;
  onPublish?: () => void;
  publishLabel?: string;
  className?: string;
}

const STATUS: Record<HeaderEditorStatus, { label: string; tone: string }> = {
  saved: { label: "Saved", tone: "bg-da-success text-da-success-fg" },
  saving: { label: "Saving…", tone: "bg-da-warning text-da-warning-fg" },
  unsaved: { label: "Unsaved changes", tone: "bg-da-accent text-da-accent-fg" },
};

export function HeaderEditor({
  backHref = "#releases",
  defaultTitle = "AI summaries for every release",
  onTitleChange,
  status = "saved",
  version = "v4.2.0",
  previewHref = "#preview",
  onPublish,
  publishLabel = "Publish",
  className,
}: HeaderEditorProps) {
  const [title, setTitle] = useState(defaultTitle);
  const inputId = useId();
  const s = STATUS[status];

  return (
    <header className={cn("da-stroke-b bg-da-surface text-da-surface-fg", className)}>
      <div className="flex min-h-16 flex-wrap items-stretch">
        <a href={backHref} aria-label="Back to releases" className="da-focus da-stroke-r grid w-16 place-items-center hover:bg-da-primary hover:text-da-primary-fg">
          <ArrowLeft aria-hidden className="size-5" strokeWidth={3} />
        </a>
        <div className="flex min-w-0 flex-1 items-center gap-3 px-4 py-2">
          <span className="da-stroke shrink-0 bg-da-fg px-2 py-1 font-da-mono text-xs font-bold text-da-bg">{version}</span>
          <label htmlFor={inputId} className="sr-only">
            Release title
          </label>
          <input
            id={inputId}
            value={title}
            onChange={(e) => {
              setTitle(e.target.value);
              onTitleChange?.(e.target.value);
            }}
            className="da-focus min-w-0 flex-1 bg-transparent font-da-display text-xl tracking-da-display uppercase outline-none hover:bg-da-muted focus:bg-da-muted"
          />
          <span role="status" className={cn("da-stroke hidden shrink-0 px-2 py-1 font-da-mono text-[11px] font-bold uppercase sm:block", s.tone)}>
            {s.label}
          </span>
        </div>
        <div className="flex w-full sm:w-auto">
          <a href={previewHref} className="da-focus da-stroke-l flex flex-1 items-center justify-center gap-2 px-5 font-bold hover:bg-da-muted sm:flex-none">
            <Eye aria-hidden className="size-4" />
            Preview
          </a>
          <button type="button" onClick={onPublish} className="da-focus da-stroke-l flex-1 bg-da-primary px-6 py-4 font-bold text-da-primary-fg hover:bg-da-fg hover:text-da-bg sm:flex-none">
            {publishLabel}
          </button>
        </div>
      </div>
    </header>
  );
}

export default HeaderEditor;