import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";
import {
  Users,
  UserCog,
  Calendar,
  CalendarClock,
  FileText,
  LogOut,
} from "lucide-react";
import { SecretaryPatientList } from "../components/secretaria/SecretaryPatientList";
import { SecretaryDoctorList } from "../components/secretaria/SecretaryDoctorList";
import { SecretaryAppointmentList } from "../components/secretaria/SecretaryAppointmentList";
import { SecretaryDoctorSchedule } from "../components/secretaria/SecretaryDoctorSchedule";
import { SecretaryReportList } from "../components/secretaria/SecretaryReportList";

type TabId = "pacientes" | "medicos" | "consultas" | "agenda" | "relatorios";

export default function PainelSecretaria() {
  const navigate = useNavigate();
  const { user, logout } = useAuth();
  const [activeTab, setActiveTab] = useState<TabId>("pacientes");

  const handleLogout = () => {
    logout();
    navigate("/login-secretaria");
  };

  const tabs: { id: TabId; label: string; icon: typeof Users }[] = [
    { id: "pacientes", label: "Pacientes", icon: Users },
    { id: "medicos", label: "Médicos", icon: UserCog },
    { id: "consultas", label: "Consultas", icon: Calendar },
    { id: "agenda", label: "Agenda Médica", icon: CalendarClock },
    { id: "relatorios", label: "Relatórios", icon: FileText },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-[1400px] mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                Painel da Secretaria
              </h1>
              {user && (
                <p className="text-sm text-gray-600 mt-1">
                  Bem-vinda, {user.email}
                </p>
              )}
            </div>
            <button
              onClick={handleLogout}
              className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <LogOut className="h-4 w-4" />
              Sair
            </button>
          </div>
        </div>
      </header>

      {/* Tabs Navigation */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-[1400px] mx-auto px-6">
          <nav className="flex gap-2">
            {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 border-b-2 transition-colors ${
                    isActive
                      ? "border-green-600 text-green-600 font-medium"
                      : "border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  {tab.label}
                </button>
              );
            })}
          </nav>
        </div>
      </div>

      {/* Main Content */}
      <main className="max-w-[1400px] mx-auto px-6 py-8">
        {activeTab === "pacientes" && <SecretaryPatientList />}
        {activeTab === "medicos" && <SecretaryDoctorList />}
        {activeTab === "consultas" && <SecretaryAppointmentList />}
        {activeTab === "agenda" && <SecretaryDoctorSchedule />}
        {activeTab === "relatorios" && <SecretaryReportList />}
      </main>
    </div>
  );
}