import { h, Fragment } from "../jsx";

const ICON_GAUGE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 14l3.5-3.5"/><path d="M3 12a9 9 0 0 1 18 0"/><path d="M12 3v2"/><path d="M3 12H5"/><path d="M19 12h2"/><path d="M5.6 5.6l1.4 1.4"/><path d="M17 7l1.4-1.4"/></svg>';
const ICON_FOLDER = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
const ICON_MENU = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>';
const ICON_PLUS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>';
const ICON_DEADLINE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
const ICON_APPOINTMENT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>';

interface BottomNavProps {
  currentPath: string;
}

function isActive(href: string, currentPath: string): boolean {
  return href === currentPath || (href !== "/" && currentPath.startsWith(href + "/"));
}

function slot(href: string, icon: string, i18nKey: string, label: string, currentPath: string, badgeId?: string): string {
  const active = isActive(href, currentPath);
  return (
    <a href={href} className={`bottom-nav-slot${active ? " active" : ""}`} data-bn-slot={href}>
      <span className="bottom-nav-icon" dangerouslySetInnerHTML={{ __html: icon }} />
      <span className="bottom-nav-label" data-i18n={i18nKey}>{label}</span>
      {badgeId ? <span className="bottom-nav-badge" id={badgeId} style="display:none" aria-hidden="true" /> : ""}
    </a>
  );
}

export function BottomNav({ currentPath }: BottomNavProps): string {
  return (
    <Fragment>
      <nav className="bottom-nav" id="bottom-nav" aria-label="Mobile navigation">
        {slot("/dashboard", ICON_GAUGE, "nav.home", "Start", currentPath)}
        {slot("/projects", ICON_FOLDER, "nav.projekte", "Projekte", currentPath)}

        <button type="button" className="bottom-nav-slot bottom-nav-add" id="bottom-nav-add" aria-label="Anlegen">
          <span className="bottom-nav-add-circle" dangerouslySetInnerHTML={{ __html: ICON_PLUS }} />
          <span className="bottom-nav-label" data-i18n="bottomnav.add">Anlegen</span>
        </button>

        {/* t-paliad-162 — Agenda lives inline on the dashboard now; the
            mobile slot points at Fristen so today's-deadline access stays
            one tap away from the bottom rail. */}
        {slot("/events?type=deadline", ICON_DEADLINE, "nav.fristen", "Fristen", currentPath, "bottom-nav-agenda-badge")}

        <button type="button" className="bottom-nav-slot" id="bottom-nav-menu" aria-label="Menü">
          <span className="bottom-nav-icon" dangerouslySetInnerHTML={{ __html: ICON_MENU }} />
          <span className="bottom-nav-label" data-i18n="bottomnav.menu">Menü</span>
        </button>
      </nav>

      <dialog className="quick-add-sheet" id="quick-add-sheet" aria-label="Schnell anlegen">
        <div className="quick-add-card">
          <div className="quick-add-handle" aria-hidden="true" />
          <h2 className="quick-add-title" data-i18n="bottomnav.add.title">Schnell anlegen</h2>
          <a href="/deadlines/new" className="quick-add-row" data-bn-add="deadline">
            <span className="quick-add-icon" dangerouslySetInnerHTML={{ __html: ICON_DEADLINE }} />
            <span className="quick-add-row-label">
              <span className="quick-add-row-title" data-i18n="bottomnav.add.deadline">Frist anlegen</span>
              <span className="quick-add-row-sub" data-i18n="bottomnav.add.deadline.sub">Neue Frist mit Datum &amp; Projekt</span>
            </span>
          </a>
          <a href="/appointments/new" className="quick-add-row" data-bn-add="appointment">
            <span className="quick-add-icon" dangerouslySetInnerHTML={{ __html: ICON_APPOINTMENT }} />
            <span className="quick-add-row-label">
              <span className="quick-add-row-title" data-i18n="bottomnav.add.appointment">Termin anlegen</span>
              <span className="quick-add-row-sub" data-i18n="bottomnav.add.appointment.sub">Neuer Termin mit Uhrzeit &amp; Ort</span>
            </span>
          </a>
          <a href="/projects/new" className="quick-add-row" data-bn-add="project">
            <span className="quick-add-icon" dangerouslySetInnerHTML={{ __html: ICON_FOLDER }} />
            <span className="quick-add-row-label">
              <span className="quick-add-row-title" data-i18n="bottomnav.add.project">Projekt anlegen</span>
              <span className="quick-add-row-sub" data-i18n="bottomnav.add.project.sub">Neues Mandat / Verfahren / Patent</span>
            </span>
          </a>
          <button type="button" className="quick-add-cancel" id="quick-add-cancel" data-i18n="bottomnav.add.cancel">Abbrechen</button>
        </div>
      </dialog>
    </Fragment>
  );
}
