"use client";

import { useState } from "react";
import { Icons } from "@turbostarter/ui-web/icons";

type Tab = "chat" | "inspector" | "annotations";

const tabs: { key: Tab; label: string }[] = [
  { key: "chat", label: "Chat" },
  { key: "inspector", label: "Inspector" },
  { key: "annotations", label: "Annotations" },
];

interface RightPanelProps {
  open: boolean;
}

export function RightPanel({ open }: RightPanelProps) {
  const [activeTab, setActiveTab] = useState<Tab>("chat");

  return (
    <div
      className={`shrink-0 border-l border-border bg-background transition-[width] duration-200 ease-out overflow-hidden ${
        open ? "w-80 xl:w-[360px]" : "w-0 border-l-0"
      }`}
    >
      <div className="flex w-80 flex-col xl:w-[360px] h-full">
        {/* Tab headers */}
        <div className="flex h-10 shrink-0 items-center border-b border-border">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              className={`flex-1 h-full text-xs font-medium transition-colors ${
                activeTab === tab.key
                  ? "text-foreground border-b-2 border-primary"
                  : "text-muted-foreground hover:text-foreground"
              }`}
              onClick={() => setActiveTab(tab.key)}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab content */}
        <div className="flex flex-1 flex-col items-center justify-center p-6 text-center">
          {activeTab === "chat" && (
            <>
              <Icons.Sparkles className="h-8 w-8 text-muted-foreground/30 mb-3" />
              <p className="text-sm font-medium text-muted-foreground">
                AI Copilot
              </p>
              <p className="text-xs text-muted-foreground/60 mt-1">
                Start a conversation to build your diagram
              </p>
            </>
          )}
          {activeTab === "inspector" && (
            <>
              <Icons.Search className="h-8 w-8 text-muted-foreground/30 mb-3" />
              <p className="text-sm font-medium text-muted-foreground">
                Inspector
              </p>
              <p className="text-xs text-muted-foreground/60 mt-1">
                Select a node to see its properties
              </p>
            </>
          )}
          {activeTab === "annotations" && (
            <>
              <Icons.MessageSquare className="h-8 w-8 text-muted-foreground/30 mb-3" />
              <p className="text-sm font-medium text-muted-foreground">
                Annotations
              </p>
              <p className="text-xs text-muted-foreground/60 mt-1">
                Coming soon
              </p>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
