"use client";
import React, { useState } from "react";
import EntityPanel from "./EntityPanel";
import KnowledgeBrowser from "./KnowledgeBrowser";

type Tab = "entity" | "browser";

export default function RightPanelTabs() {
  const [active, setActive] = useState<Tab>("browser");

  return (
    <div className="w-full flex flex-col gap-0">
      {/* Tab switcher */}
      <div className="flex items-center gap-1 mb-3 p-1 rounded-xl bg-[#0C0814]/80 border border-[#A78BFA]/10 backdrop-blur-sm">
        <button
          onClick={() => setActive("browser")}
          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[9px] font-mono font-bold uppercase tracking-[0.15em] transition-all duration-200"
          style={{
            backgroundColor: active === "browser" ? "rgba(167,139,250,0.18)" : "transparent",
            color: active === "browser" ? "#E9D9FF" : "#6B7280",
            border: active === "browser" ? "1px solid rgba(167,139,250,0.25)" : "1px solid transparent",
          }}
        >
          <span className="material-symbols-outlined text-[13px]">library_books</span>
          Knowledge
        </button>
        <button
          onClick={() => setActive("entity")}
          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[9px] font-mono font-bold uppercase tracking-[0.15em] transition-all duration-200"
          style={{
            backgroundColor: active === "entity" ? "rgba(167,139,250,0.18)" : "transparent",
            color: active === "entity" ? "#E9D9FF" : "#6B7280",
            border: active === "entity" ? "1px solid rgba(167,139,250,0.25)" : "1px solid transparent",
          }}
        >
          <span className="material-symbols-outlined text-[13px]">manage_search</span>
          Query
        </button>
      </div>

      {/* Panel content */}
      {active === "browser" ? <KnowledgeBrowser /> : <EntityPanel />}
    </div>
  );
}