"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { aiDict } from "@/features/ai/dict";

type AiPageHeaderProps = {
  title: string;
  subtitle?: string;
  backHref?: string;
  showHistory?: boolean;
};

function HistoryIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <path d="M12 8v4l3 3" />
      <path d="M3.05 11a9 9 0 1 0 .5-3.5" />
      <path d="M3 4v4h4" />
    </svg>
  );
}

export function AiPageHeader({
  title,
  subtitle,
  backHref = "/panel",
  showHistory = false,
}: AiPageHeaderProps) {
  const router = useRouter();

  return (
    <header className="flex items-center justify-between px-1">
      <button
        type="button"
        onClick={() => router.push(backHref)}
        aria-label={aiDict.back}
        className="inline-flex size-11 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-soft-sm transition-transform hover:scale-105"
      >
        <svg
          aria-hidden="true"
          className="size-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path d="M9 6l6 6-6 6" />
        </svg>
      </button>

      <div className="min-w-0 flex-1 px-3 text-center">
        <h1 className="truncate text-base font-bold text-[#1D2D50] dark:text-foreground sm:text-lg">
          {title}
        </h1>
        {subtitle ? (
          <p className="mt-0.5 truncate text-xs text-muted-foreground">
            {subtitle}
          </p>
        ) : null}
      </div>

      {showHistory ? (
        <Link
          href="/panel/ai/history"
          aria-label={aiDict.history}
          className="inline-flex size-11 items-center justify-center rounded-2xl bg-card text-muted-foreground shadow-soft-sm transition-colors hover:bg-accent hover:text-accent-foreground"
        >
          <HistoryIcon />
        </Link>
      ) : (
        <div className="size-11 shrink-0" />
      )}
    </header>
  );
}
