"use client";

import { useState } from "react";
import { Ticket, BookOpen } from "lucide-react";
import SupportTicketsDashboard from "./SupportTicketsDashboard";
import FAQManagement from "./FAQManagement";

interface StaffUser {
  id: string;
  role: string;
  email: string;
  name?: string;
}

interface SupportDashboardTabsProps {
  user: StaffUser;
}

type TabId = "tickets" | "faqs";

export default function SupportDashboardTabs({
  user,
}: SupportDashboardTabsProps) {
  const [activeTab, setActiveTab] = useState<TabId>("tickets");

  const tabs = [
    { id: "tickets" as const, label: "Support Tickets", icon: Ticket },
    { id: "faqs" as const, label: "FAQ Management", icon: BookOpen },
  ];

  return (
    <div className="space-y-6">
      {/* Tab Navigation */}
      <div className="border-b border-slate-200">
        <nav className="flex gap-4" aria-label="Tabs">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.id;

            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-3 font-medium text-sm border-b-2 transition-colors ${
                  isActive
                    ? "border-brand-green text-brand-green"
                    : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
                }`}
              >
                <Icon className="w-5 h-5" />
                {tab.label}
              </button>
            );
          })}
        </nav>
      </div>

      {/* Tab Content */}
      <div>
        {activeTab === "tickets" && <SupportTicketsDashboard user={user} />}
        {activeTab === "faqs" && <FAQManagement user={user} />}
      </div>
    </div>
  );
}