"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { useStore, currentDoctor } from "@/lib/store";
import { fdate } from "@/lib/logic";
import type { Role } from "@/lib/types";
import { Icon } from "./icons";
import { LogoMark } from "./ui";

export const NAV: { href: string; label: string; icon: string; roles: Role[] }[] = [
  { href: "/medico", label: "Mi día", icon: "medico", roles: ["medico"] },
  { href: "/agenda", label: "Agenda", icon: "agenda", roles: ["recepcion", "medico"] },
  { href: "/pacientes", label: "Pacientes", icon: "pacientes", roles: ["recepcion", "medico"] },
  { href: "/caja", label: "Caja", icon: "caja", roles: ["recepcion"] },
  { href: "/membresias", label: "Membresías", icon: "membresias", roles: ["recepcion"] },
  { href: "/aseguradoras", label: "Aseguradoras", icon: "aseguradoras", roles: ["recepcion"] },
  { href: "/convenios", label: "Convenios", icon: "convenios", roles: ["recepcion", "medico"] },
  { href: "/consejos", label: "Consejos y juegos", icon: "consejos", roles: ["recepcion", "medico"] },
  { href: "/portal", label: "Portal paciente", icon: "portal", roles: ["recepcion"] },
  { href: "/mi-consultorio", label: "Mi consultorio", icon: "config", roles: ["recepcion", "medico"] },
];

const ROLES: [Role, string][] = [["recepcion", "Recepción"], ["medico", "Médico"]];

export function AppShell({ children }: { children: ReactNode }) {
  const { s, mutate, reset } = useStore();
  const path = usePathname();
  const router = useRouter();
  const items = NAV.filter((n) => n.roles.includes(s.role));

  const setRole = (r: Role) => {
    mutate((d) => { d.role = r; });
    // cada rol entra a su pantalla de inicio: el médico a "Mi día", recepción a la agenda
    router.push(NAV.filter((n) => n.roles.includes(r))[0].href);
  };
  const RoleSelect = ({ id }: { id: string }) => (
    <select id={id} aria-label="Entrar como" value={s.role} onChange={(e) => setRole(e.target.value as Role)}>
      {ROLES.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
    </select>
  );
  const links = items.map((n) => (
    <Link key={n.href} href={n.href} className="nav" aria-current={path.startsWith(n.href) ? "page" : undefined}>
      <Icon name={n.icon} /><span>{n.label}</span>
    </Link>
  ));

  return (
    <div className="app">
      <aside className="side">
        <div className="logo">
          <LogoMark />
          <div style={{ minWidth: 0 }}>
            <b>{s.clinic.name}</b>
            <small>{s.role === "medico" ? currentDoctor(s).name : "Recepción"}</small>
          </div>
        </div>
        <label className="f" style={{ padding: "0 8px 12px" }}>Entrar como <RoleSelect id="roleSel" /></label>
        {links}
        <div style={{ flex: 1 }} />
        <div className="note">
          Maquetación con datos de prueba. Hoy: {fdate(s.today)}
          <br /><button className="link" onClick={reset}>Restablecer datos</button>
        </div>
      </aside>
      <main>
        <div className="mrole">
          <span className="row" style={{ gap: 8 }}><LogoMark size={30} /><b style={{ fontFamily: "var(--f-display)" }}>{s.clinic.name}</b></span>
          <RoleSelect id="roleSelM" />
        </div>
        <div className="wrap">{children}</div>
      </main>
      <nav className="bottom" aria-label="Secciones">{links}</nav>
    </div>
  );
}