"use client";

import { useEffect, useState } from "react";
import { Briefcase, ChevronRight, Plus } from "lucide-react";
import PageHeader from "@/components/modals/ui/PageHeader";
import { getMyHospitalsApi } from "@/app/services/hospitalApi";
import { Hospital } from "@/app/types/medicalData";

export default function MyPracticesPage({
  onSelectHospital,
  onAddHospital,
}: {
  onSelectHospital?: (hospitalId: string) => void;
  onAddHospital?: () => void;
}) {
  const [loading, setLoading] = useState(true);
  const [hospitals, setHospitals] = useState<Hospital[]>([]);

  const fetchHospitals = async () => {
    try {
      setLoading(true);
      const res = await getMyHospitalsApi();
      setHospitals(res?.data || []);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchHospitals();
  }, []);

  return (
    <div className="min-h-screen bg-[#f7f7f8]">
      <PageHeader
        icon={<Briefcase size={20} />}
        title="My Practices"
        subtitle="Manage your hospitals and clinics"
      />

      <main className="max-w-[760px] mx-auto p-5 sm:p-7">
        {loading ? (
          <div className="text-center py-10 text-[#6b7280]">Loading...</div>
        ) : hospitals.length === 0 ? (
          <div className="flex flex-col items-center justify-center text-center pt-20 sm:pt-28">
            <div className="w-28 h-28 rounded-3xl bg-[#eef2ff] flex items-center justify-center mb-6">
              <Briefcase size={44} className="text-indigo-600" />
            </div>
            <p className="text-xl font-bold text-[#111827] mb-2">
              No hospitals yet
            </p>
            <p className="text-[#6b7280] text-[15px] max-w-[280px]">
              Create your first hospital or clinic to get started
            </p>
          </div>
        ) : (
          <div className="flex flex-col gap-4">
            {hospitals.map((hospital) => (
              <div
                key={hospital._id}
                onClick={() => onSelectHospital?.(hospital._id)}
                className="bg-white border border-[#e5e7eb] rounded-[24px] p-4 flex items-center gap-4 shadow-sm cursor-pointer hover:border-[#22c55e] transition-colors"
              >
                <div className="w-16 h-16 rounded-2xl bg-[#eef2ff] flex items-center justify-center shrink-0">
                  <Briefcase size={28} className="text-indigo-600" />
                </div>

                <div className="flex-1 min-w-0">
                  <p className="text-[17px] font-semibold text-[#111827] truncate">
                    {hospital.name}
                  </p>
                  <p className="text-sm text-[#6b7280] truncate mt-0.5">
                    {hospital.city}, {hospital.state}, {hospital.country}
                  </p>
                </div>

                <div className="flex gap-2">
                  <span className="px-4 py-1 rounded-full border border-[#d1d5db] text-[#4b5563] text-sm font-medium">
                    {hospital.type}
                  </span>

                  {hospital.members?.some((member: any) => member.isDefault === true) && (
                    <span className="px-4 py-1 rounded-full bg-[#dcfce7] border border-[#bbf7d0] text-[#16a34a] text-sm font-medium">
                      Default
                    </span>
                  )}
                </div>
                <ChevronRight size={20} className="text-[#9ca3af]" />
              </div>
            ))}
          </div>
        )}
      </main>

      <button
        onClick={() => onAddHospital?.()}
        className="fixed bottom-6 right-6 w-14 h-14 bg-[#4f46e5] text-white rounded-2xl shadow-lg flex items-center justify-center hover:bg-[#4338ca] transition-transform active:scale-95"
      >
        <Plus size={32} />
      </button>
    </div>
  );
}