"use client";

/**
 * Horizontal project nav bar — sits in the unified top row beside chat.
 *
 * Primary section icons sit on the trailing (right) side; Settings stays
 * at the far right. The parent row owns the bottom border.
 */
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Eye,
  Code2,
  ClipboardList,
  Palette,
  Globe,
  Database,
  Settings,
  CreditCard,
  PlaneTakeoff,
} from "lucide-react";

interface Props {
  workspace: string;
  projectId: string;
}

interface RailItem {
  segment: string;
  label: string;
  Icon: typeof Eye;
  aliases?: string[];
}

const PRIMARY_ITEMS: RailItem[] = [
  { segment: "preview", label: "Preview", Icon: Eye },
  { segment: "plan", label: "Plan", Icon: ClipboardList },
  { segment: "design-system", label: "Design", Icon: Palette },
  { segment: "market", label: "Market", Icon: PlaneTakeoff },
  { segment: "product", label: "Code", Icon: Code2, aliases: ["code"] },
  { segment: "hosting", label: "Hosting", Icon: Globe },
  { segment: "infrastructure", label: "Infra", Icon: Database },
  { segment: "billing", label: "Billing", Icon: CreditCard },
];

export function ProjectIconRail({ workspace, projectId }: Props) {
  const pathname = usePathname() ?? "";
  const projectBase = `/${workspace}/project/${projectId}`;

  const isActive = (item: RailItem) => {
    const segments = [item.segment, ...(item.aliases ?? [])];
    return segments.some(
      (s) =>
        pathname === `${projectBase}/${s}` ||
        pathname.startsWith(`${projectBase}/${s}/`),
    );
  };

  return (
    <nav style={bar} aria-label="Project sections">
      <div style={{ flex: 1, minWidth: 0 }} aria-hidden />
      <div style={primaryGroup}>
        {PRIMARY_ITEMS.map((item) => (
          <RailLink
            key={item.segment}
            href={`${projectBase}/${item.segment}`}
            label={item.label}
            Icon={item.Icon}
            active={isActive(item)}
          />
        ))}
      </div>
      <RailLink
        href={`${projectBase}/settings`}
        label="Settings"
        Icon={Settings}
        active={
          pathname === `${projectBase}/settings` ||
          pathname.startsWith(`${projectBase}/settings/`)
        }
      />
    </nav>
  );
}

function RailLink({
  href,
  label,
  Icon,
  active,
}: {
  href: string;
  label: string;
  Icon: typeof Eye;
  active: boolean;
}) {
  return (
    <Link
      href={href}
      title={label}
      aria-label={label}
      aria-current={active ? "page" : undefined}
      style={{
        ...linkBase,
        background: active ? "#f6f2ec" : "transparent",
        color: active ? "#1a1a1a" : "#6b665e",
        borderColor: active ? "#d9d2c5" : "transparent",
      }}
    >
      <Icon size={16} />
    </Link>
  );
}

const bar: React.CSSProperties = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  flex: 1,
  minWidth: 0,
  height: "100%",
  padding: "0 12px",
  gap: 6,
  boxSizing: "border-box",
  background: "#faf8f5",
  fontFamily: '"Outfit", "Inter", ui-sans-serif, sans-serif',
};

const primaryGroup: React.CSSProperties = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  gap: 4,
};

const linkBase: React.CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  width: 36,
  height: 36,
  borderRadius: 6,
  border: "1px solid",
  textDecoration: "none",
  transition: "background 0.15s, color 0.15s, border-color 0.15s",
  flexShrink: 0,
};
