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 dark:bg-gray-900">
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-3 sm:py-4">
          <div className="flex items-center justify-between gap-4">
            <div className="min-w-0 flex-1">
              <h1 className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white truncate">
                Painel da Secretaria
              </h1>
              {user && (
                <p className="text-xs sm:text-sm text-gray-600 mt-0.5 sm:mt-1 truncate">
                  Bem-vindo(a), {user.nome || user.email}
                </p>
              )}
            </div>
            <button
              onClick={handleLogout}
              className="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 text-sm sm:text-base text-gray-700 hover:bg-gray-100 rounded-lg transition-colors flex-shrink-0"
            >
              <LogOut className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
              <span className="hidden sm:inline">Sair</span>
            </button>
          </div>
        </div>
      </header>

      {/* Tabs Navigation */}
      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6">
          <nav className="flex gap-1 sm:gap-2 min-w-max">
            {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-1.5 sm:gap-2 px-3 sm:px-4 py-2.5 sm:py-3 border-b-2 transition-colors text-sm sm:text-base whitespace-nowrap ${
                    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-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" />
                  <span className="hidden sm:inline">{tab.label}</span>
                  <span className="sm:hidden">{tab.label.split(" ")[0]}</span>
                </button>
              );
            })}
          </nav>
        </div>
      </div>

      {/* Main Content */}
      <main className="max-w-[1400px] mx-auto px-4 sm:px-6 py-6 sm:py-8">
        {activeTab === "pacientes" && (
          <SecretaryPatientList
            onOpenAppointment={(patientId: string) => {
              // store selected patient for appointment and switch to consultas tab
              sessionStorage.setItem(
                "selectedPatientForAppointment",
                patientId
              );
              setActiveTab("consultas");
            }}
          />
        )}
        {activeTab === "medicos" && (
          <SecretaryDoctorList
            onOpenSchedule={(doctorId: string) => {
              // store selected doctor for schedule and switch to agenda tab
              sessionStorage.setItem("selectedDoctorForSchedule", doctorId);
              setActiveTab("agenda");
            }}
          />
        )}
        {activeTab === "consultas" && <SecretaryAppointmentList />}
        {activeTab === "agenda" && <SecretaryDoctorSchedule />}
        {activeTab === "relatorios" && <SecretaryReportList />}
      </main>
    </div>
  );
}
