import Link from "next/link";
import type { ReactNode } from "react";

const navigationItems = [
  { href: "/", label: "总览" },
  { href: "/messages", label: "留言" },
  { href: "/devices", label: "设备" },
  { href: "/activity", label: "活动" },
  { href: "/scan", label: "扫码" },
];

function isActivePath(currentPath: string, href: string) {
  if (href === "/") {
    return currentPath === "/";
  }

  return currentPath === href || currentPath.startsWith(`${href}/`);
}

type PanelShellProps = {
  currentPath: string;
  title: string;
  description: string;
  caregiverToken: string;
  children: ReactNode;
  actions?: ReactNode;
  eyebrow?: string;
};

export function PanelShell({
  currentPath,
  title,
  description,
  caregiverToken,
  children,
  actions,
  eyebrow = "Digital Human Bridge",
}: PanelShellProps) {
  return (
    <main className="relative overflow-hidden px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
      <div className="pointer-events-none absolute inset-x-0 top-0 h-72 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.8),transparent_70%)]" />
      <div className="mx-auto max-w-7xl space-y-6">
        <header className="paper-panel relative overflow-hidden rounded-[36px] border border-white/70 px-6 py-7 shadow-[0_35px_90px_rgba(105,68,41,0.13)] sm:px-8 lg:px-10 lg:py-8">
          <div className="absolute -right-12 top-[-50px] h-44 w-44 rounded-full bg-[rgba(53,84,141,0.14)] blur-2xl" />
          <div className="absolute left-10 top-10 h-24 w-24 rounded-full border border-[rgba(118,132,94,0.18)]" />

          <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
            <div className="max-w-4xl">
              <div className="flex flex-wrap gap-3">
                {navigationItems.map((item) => {
                  const active = isActivePath(currentPath, item.href);

                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={`inline-flex h-11 items-center justify-center rounded-full px-4 text-sm font-semibold transition ${
                        active
                          ? "bg-[var(--ink)] text-white shadow-[0_12px_30px_rgba(36,27,20,0.18)]"
                          : "border border-[var(--line)] bg-white/82 text-[var(--ink)] hover:bg-[var(--paper-soft)]"
                      }`}
                    >
                      {item.label}
                    </Link>
                  );
                })}
              </div>

              <p className="mt-6 text-sm font-semibold tracking-[0.24em] text-[var(--copper)] uppercase">
                {eyebrow}
              </p>
              <h1 className="mt-4 max-w-3xl font-[family-name:var(--font-display)] text-4xl leading-[1.15] text-[var(--ink)] sm:text-5xl">
                {title}
              </h1>
              <p className="mt-5 max-w-2xl text-base leading-8 text-[var(--muted)] sm:text-lg">
                {description}
              </p>

              <div className="mt-6 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
                <span className="rounded-full border border-[var(--line)] bg-white/76 px-4 py-2">
                  当前家属账号：{caregiverToken.slice(0, 8).toUpperCase()}
                </span>
                <span className="rounded-full border border-[var(--line)] bg-white/76 px-4 py-2">
                  不同功能已拆到独立路径，消息支持单条直达
                </span>
              </div>
            </div>

            {actions ? <div className="w-full max-w-md xl:pt-2">{actions}</div> : null}
          </div>
        </header>

        {children}
      </div>
    </main>
  );
}