"use client";

import Link from "next/link";
import { useState } from "react";
import type { NavNode } from "@/lib/public/site";

function Item({ node, className }: { node: NavNode; className: string }) {
  const body = (
    <>
      {node.style?.includes("nav-home") ? (
        <svg aria-hidden viewBox="0 0 24 24" width="16" height="16" fill="currentColor" className="rail-home-icon"><path d="M12 3 2 12h3v8h5v-6h4v6h5v-8h3z" /></svg>
      ) : null}
      {node.label}
    </>
  );
  if (node.external) {
    return <a href={node.href} className={className} rel="noopener noreferrer" {...(node.newTab ? { target: "_blank" } : {})}>{body}</a>;
  }
  return <Link href={node.href} className={className} {...(node.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{body}</Link>;
}

/** Navigation for the left-rail layout: top-level links with chevron buttons that expand their sub-links. */
export function RailMenu({ items, label }: { items: NavNode[]; label: string }) {
  const [open, setOpen] = useState<string | null>(null);
  return (
    <nav id="rail-nav" aria-label={label} className="rail-nav">
      <ul>
        {items.map((n) => {
          const expanded = open === n.id;
          return (
            <li key={n.id} data-open={expanded || undefined}>
              <div className="rail-row">
                <Item node={n} className="rail-link" />
                {n.children.length > 0 && (
                  <button type="button" className="rail-chevron" aria-expanded={expanded} aria-controls={`rail-sub-${n.id}`} aria-label={n.label} onClick={() => setOpen(expanded ? null : n.id)}>
                    <svg aria-hidden viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                  </button>
                )}
              </div>
              {n.children.length > 0 && (
                <ul id={`rail-sub-${n.id}`} className="rail-sub" hidden={!expanded}>
                  {n.children.map((c) => (
                    <li key={c.id}><Item node={c} className="rail-sublink" /></li>
                  ))}
                </ul>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

const ICONS: Record<string, string> = {
  twitter: "M18.2 2H21l-6.5 7.4L22 22h-6l-4.7-6.1L5.9 22H3l7-8L2.4 2h6.1l4.3 5.6zm-1 18h1.6L7.3 3.7H5.6z",
  x: "M18.2 2H21l-6.5 7.4L22 22h-6l-4.7-6.1L5.9 22H3l7-8L2.4 2h6.1l4.3 5.6zm-1 18h1.6L7.3 3.7H5.6z",
  facebook: "M14 8V6.5c0-.8.2-1.2 1.3-1.2H17V2h-2.6C11.6 2 10 3.600 10 6.200V8H7.500v3.300H10V22h4V11.300h2.700L17 8z",
  linkedin: "M4.500 9H8v12H4.500zM6.200 3.500a2 2 0 1 1 0 4 2 2 0 0 1 0-4M10 9h3.300v1.700c.5-.9 1.700-2 3.600-2 3.700 0 4.100 2.400 4.100 5.500V21h-3.500v-5.800c0-1.400 0-3.100-1.900-3.100s-2.100 1.500-2.100 3V21H10z",
};

/** Round social icons for the foot of the rail. Only networks with an icon are shown. */
export function RailSocial({ links }: { links: [string, string][] }) {
  const order = ["twitter", "x", "facebook", "linkedin"];
  const shown = links.filter(([k]) => ICONS[k.toLowerCase()]).sort((a, b) => order.indexOf(a[0].toLowerCase()) - order.indexOf(b[0].toLowerCase()));
  if (!shown.length) return null;
  return (
    <ul className="rail-social">
      {shown.map(([k, v]) => (
        <li key={k}>
          <a href={v} target="_blank" rel="noopener noreferrer me" aria-label={k}>
            <svg aria-hidden viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d={ICONS[k.toLowerCase()]} /></svg>
          </a>
        </li>
      ))}
    </ul>
  );
}