import { Link, useNavigate } from "react-router-dom";
import { ChevronDown } from "lucide-react";

interface SliceSubNavProps {
  handle: string;
  rkey: string;
  sliceName?: string;
  activeTab:
    | "overview"
    | "records"
    | "jetstream"
    | "sync"
    | "oauth"
    | "settings";
  isOwner?: boolean;
}

export function SliceSubNav(
  { handle, rkey, sliceName, activeTab, isOwner = false }: SliceSubNavProps,
) {
  const navigate = useNavigate();

  const allTabs = [
    {
      value: "overview",
      label: "Overview",
      path: `/profile/${handle}/slice/${rkey}`,
      ownerOnly: false,
    },
    {
      value: "records",
      label: "Records",
      path: `/profile/${handle}/slice/${rkey}/records`,
      ownerOnly: false,
    },
    {
      value: "jetstream",
      label: "Jetstream",
      path: `/profile/${handle}/slice/${rkey}/jetstream`,
      ownerOnly: false,
    },
    {
      value: "sync",
      label: "Sync",
      path: `/profile/${handle}/slice/${rkey}/sync`,
      ownerOnly: true,
    },
    {
      value: "oauth",
      label: "OAuth",
      path: `/profile/${handle}/slice/${rkey}/oauth`,
      ownerOnly: true,
    },
    {
      value: "settings",
      label: "Settings",
      path: `/profile/${handle}/slice/${rkey}/settings`,
      ownerOnly: true,
    },
  ];

  // Filter tabs based on ownership
  const tabs = allTabs.filter(tab => !tab.ownerOnly || isOwner);

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedTab = tabs.find((tab) => tab.value === e.target.value);
    if (selectedTab) {
      navigate(selectedTab.path);
    }
  };

  return (
    <div className="flex items-center justify-between h-10">
      <div className="flex items-center gap-2 text-sm text-zinc-500">
        <Link to="/" className="hover:text-zinc-400 transition-colors">
          Slices
        </Link>
        <span>/</span>
        <Link
          to={`/profile/${handle}`}
          className="hover:text-zinc-400 transition-colors max-w-[130px] truncate"
        >
          @{handle}
        </Link>
        {sliceName && (
          <>
            <span>/</span>
            <span className="max-w-[200px] truncate">{sliceName}</span>
          </>
        )}
      </div>
      <div className="relative inline-block ml-auto">
        <ChevronDown
          size={16}
          className="absolute left-2 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none"
        />
        <select
          value={activeTab}
          onChange={handleChange}
          className="appearance-none bg-transparent text-sm text-white pl-7 pr-3 py-2 cursor-pointer focus:outline-none hover:text-zinc-300 transition-colors text-right"
        >
          {tabs.map((tab) => (
            <option
              key={tab.value}
              value={tab.value}
              className="bg-zinc-900 text-zinc-300"
            >
              {tab.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}