import { Link, Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
import {
  Archive,
  Database,
  Loader2,
  Settings,
  Tag,
  Users,
  Webhook,
} from "lucide-react";
import { useRepo } from "@/contexts";

const TABS = [
  { value: "general", label: "General", icon: Settings },
  { value: "tags", label: "Tags", icon: Tag },
  { value: "branches", label: "Branches", icon: Database },
  { value: "archive", label: "Archive", icon: Archive },
  { value: "members", label: "Members", icon: Users },
  { value: "webhooks", label: "Webhooks", icon: Webhook },
] as const;

const tabValues = new Set(TABS.map((t) => t.value));

export function RepoSettingsLayout() {
  const repo = useRepo();
  const { namespace, repoName } = useParams<{ namespace: string; repoName: string }>();
  const navigate = useNavigate();
  const location = useLocation();

  // Derive active tab from URL segment
  const segments = location.pathname.split("/").filter(Boolean);
  const tabSegment = segments[segments.length - 1] ?? "";
  const activeTab = tabValues.has(tabSegment as (typeof TABS)[number]["value"])
    ? (tabSegment as (typeof TABS)[number]["value"])
    : "general";

  if (!repo) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-6 w-6 animate-spin" />
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header breadcrumb */}
      <div className="border-b">
        <div className="flex items-center justify-between px-6 py-3">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Link to="/" className="hover:text-foreground">
              Projects
            </Link>
            <span>/</span>
            <Link
              to={`/project/${namespace}`}
              className="hover:text-foreground"
            >
              {namespace}
            </Link>
            <span>/</span>
            <Link
              to={`/repository/${namespace}/${repoName}`}
              className="hover:text-foreground"
            >
              {repoName}
            </Link>
            <span>/</span>
            <span className="text-foreground">Settings</span>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-4xl">
          {/* Tab bar */}
          <div className="mb-6">
            <h1 className="text-xl font-semibold mb-4">Repository Settings</h1>
            <div className="flex flex-wrap gap-1">
              {TABS.map((tab) => {
                const isActive = activeTab === tab.value;
                return (
                  <button
                    key={tab.value}
                    onClick={() =>
                      navigate(
                        `/repository/${namespace}/${repoName}/settings/${tab.value}`
                      )
                    }
                    className={`flex items-center gap-2 px-4 py-2 text-sm rounded-md border transition-colors ${
                      isActive
                        ? "border-primary bg-primary/10 text-primary"
                        : "border-transparent hover:bg-muted"
                    }`}
                  >
                    <tab.icon className="h-4 w-4" />
                    {tab.label}
                  </button>
                );
              })}
            </div>
          </div>

          <Outlet />
        </div>
      </div>
    </div>
  );
}
