"use client";

import { useState } from "react";
import { useParams } from "next/navigation";
import { Brain, FileText, Search } from "lucide-react";
import { CaseStrategy } from "@/components/ai/CaseStrategy";
import { DocumentDrafter } from "@/components/ai/DocumentDrafter";
import { SimilarCaseFinder } from "@/components/ai/SimilarCaseFinder";

type AITab = "strategy" | "draft" | "similar";

const TABS: { id: AITab; label: string; icon: typeof Brain }[] = [
  { id: "strategy", label: "KI-Strategie", icon: Brain },
  { id: "draft", label: "KI-Entwurf", icon: FileText },
  { id: "similar", label: "Aehnliche Faelle", icon: Search },
];

export default function CaseAIPage() {
  const { id } = useParams<{ id: string }>();
  const [activeTab, setActiveTab] = useState<AITab>("strategy");

  return (
    <div>
      {/* Sub-tabs */}
      <div className="mb-6 flex gap-1 rounded-lg border border-neutral-200 bg-neutral-50 p-1">
        {TABS.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
                isActive
                  ? "bg-white text-neutral-900 shadow-sm"
                  : "text-neutral-500 hover:text-neutral-700"
              }`}
            >
              <tab.icon className="h-4 w-4" />
              {tab.label}
            </button>
          );
        })}
      </div>

      {/* Content */}
      {activeTab === "strategy" && <CaseStrategy caseId={id} />}
      {activeTab === "draft" && <DocumentDrafter caseId={id} />}
      {activeTab === "similar" && <SimilarCaseFinder caseId={id} />}
    </div>
  );
}