"use client";
// KA Tabbar v1 — variante Next.js du canonique ka-ui.git/nav/KaTabbar.tsx
// (Link next/link ; le CSS global ka-tabbar.css est importé par layout.tsx).
import type { CSSProperties, ReactElement } from "react";
import Link from "next/link";

export type KaTabIcon =
  | "compass" | "search" | "heart" | "user" | "map" | "pin" | "tag"
  | "home" | "grid" | "store" | "basket" | "target" | "trendup"
  | "receipt" | "book" | "chart" | "calendar";

const ICONS: Record<KaTabIcon, ReactElement> = {
  compass: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="m15.5 8.5-2.2 5-4.8 2 2.2-5 4.8-2z" />
    </>
  ),
  search: (
    <>
      <circle cx="11" cy="11" r="7" />
      <path d="m20.5 20.5-4.2-4.2" />
    </>
  ),
  heart: (
    <path d="M12 20.5S4.5 15.8 2.6 11.4A5.3 5.3 0 0 1 12 6.6a5.3 5.3 0 0 1 9.4 4.8C19.5 15.8 12 20.5 12 20.5z" />
  ),
  user: (
    <>
      <circle cx="12" cy="8.2" r="3.7" />
      <path d="M4.5 20.2a7.5 7.5 0 0 1 15 0" />
    </>
  ),
  map: (
    <>
      <path d="M9 4 3.5 6v14L9 18l6 2 5.5-2V4L15 6 9 4z" />
      <path d="M9 4v14M15 6v14" />
    </>
  ),
  pin: (
    <>
      <path d="M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z" />
      <circle cx="12" cy="10" r="2.6" />
    </>
  ),
  tag: (
    <>
      <path d="M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z" />
      <circle cx="7" cy="7" r="1.6" />
    </>
  ),
  home: (
    <>
      <path d="m3.5 10.5 8.5-7 8.5 7" />
      <path d="M5.5 9v11h13V9" />
    </>
  ),
  grid: (
    <>
      <rect x="4" y="4" width="7" height="7" rx="1.5" />
      <rect x="13" y="4" width="7" height="7" rx="1.5" />
      <rect x="4" y="13" width="7" height="7" rx="1.5" />
      <rect x="13" y="13" width="7" height="7" rx="1.5" />
    </>
  ),
  store: (
    <>
      <path d="M4.5 9.5 6 4.5h12l1.5 5" />
      <path d="M5 9.5h14V20H5V9.5z" />
      <path d="M10 20v-5h4v5" />
    </>
  ),
  basket: (
    <>
      <path d="M4 9h16l-1.6 10a2 2 0 0 1-2 1.7H7.6a2 2 0 0 1-2-1.7L4 9z" />
      <path d="M8.5 9 12 3l3.5 6" />
    </>
  ),
  target: (
    <>
      <circle cx="12" cy="12" r="8.5" />
      <circle cx="12" cy="12" r="4.5" />
      <circle cx="12" cy="12" r="0.8" />
    </>
  ),
  trendup: (
    <>
      <path d="m3.5 16.5 5.5-5.5 3.5 3.5 7.5-7.5" />
      <path d="M14.5 7H20v5.5" />
    </>
  ),
  receipt: (
    <>
      <path d="M6 3.5h12V21l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21V3.5z" />
      <path d="M9 8h6M9 11.5h6M9 15h4" />
    </>
  ),
  book: (
    <>
      <path d="M12 6.5C10.5 5 8.5 4.5 5.5 4.5H3.5V19h2c3 0 5 .5 6.5 2 1.5-1.5 3.5-2 6.5-2h2V4.5h-2c-3 0-5 .5-6.5 2z" />
      <path d="M12 6.5V21" />
    </>
  ),
  chart: (
    <>
      <path d="M4 20h16" />
      <path d="M7.5 20v-6M12 20V9M16.5 20v-4" />
    </>
  ),
  calendar: (
    <>
      <rect x="3.5" y="5" width="17" height="15.5" rx="2" />
      <path d="M8 3v4M16 3v4M3.5 10h17" />
    </>
  ),
};

export function KaTabIco({ name, size = 21 }: { name: KaTabIcon; size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.7}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {ICONS[name]}
    </svg>
  );
}

export type KaTab = {
  label: string;
  icon: KaTabIcon;
  /** route interne (react-router Link) */
  to?: string;
  /** lien externe (ex. hub univers KA) */
  href?: string;
  /** action locale (ex. ouvrir la recherche) — rend un <button> */
  onPress?: () => void;
  /** complément d'un lien `to` (ex. focus d'un champ une fois arrivé) */
  onClick?: () => void;
  active?: boolean;
};

export default function KaTabbar({
  tabs,
  theme = "light",
  accent,
  className,
}: {
  tabs: KaTab[];
  theme?: "light" | "dark";
  /** couleur signature de la marque (défaut : var(--accent) du site) */
  accent?: string;
  className?: string;
}) {
  const cls =
    "ka-tabbar" +
    (theme === "dark" ? " ka-tabbar--dark" : "") +
    (className ? " " + className : "");
  const style = accent ? ({ "--ktb-accent": accent } as CSSProperties) : undefined;
  return (
    <nav className={cls} style={style} aria-label="Navigation mobile">
      {tabs.map((t) => {
        const inner = (
          <>
            <KaTabIco name={t.icon} />
            {t.label}
          </>
        );
        const c = t.active ? "active" : "";
        if (t.to)
          return (
            <Link
              key={t.label}
              href={t.to}
              className={c}
              onClick={t.onClick}
              aria-current={t.active ? "page" : undefined}
            >
              {inner}
            </Link>
          );
        if (t.href)
          return (
            <a key={t.label} href={t.href} className={c} target="_blank" rel="noreferrer">
              {inner}
            </a>
          );
        return (
          <button key={t.label} type="button" className={c} onClick={t.onPress}>
            {inner}
          </button>
        );
      })}
    </nav>
  );
}