import React, { useEffect, useState } from "react";
import { UserPlus, Mail, Phone } from "lucide-react";

interface Secretaria {
  nome: string;
  email: string;
  cpf: string;
  telefone: string;
  criadoEm: string;
}

const ListaSecretarias: React.FC = () => {
  const [secretarias, setSecretarias] = useState<Secretaria[]>([]);

  useEffect(() => {
    const lista = JSON.parse(localStorage.getItem("secretarias") || "[]");
    setSecretarias(lista);
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto space-y-4 sm:space-y-6">
        <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3">
          <UserPlus className="w-5 h-5 sm:w-6 sm:h-6 text-green-600 flex-shrink-0" />{" "}
          Secretárias Cadastradas
        </h2>

        {secretarias.length === 0 ? (
          <div className="text-sm sm:text-base text-gray-500 text-center py-8">
            Nenhuma secretária cadastrada.
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-5 lg:gap-6">
            {secretarias.map((sec, idx) => (
              <div
                key={idx}
                className={`rounded-lg sm:rounded-xl p-4 sm:p-5 lg:p-6 flex flex-col gap-2 sm:gap-2.5 transition-all border border-gray-200 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500/50 ${
                  idx % 2 === 0 ? "bg-white" : "bg-gray-50"
                }`}
                tabIndex={0}
              >
                <div className="flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2">
                  <UserPlus className="w-4 h-4 sm:w-5 sm:h-5 text-green-600 flex-shrink-0" />
                  <span className="font-semibold text-sm sm:text-base lg:text-lg truncate">
                    {sec.nome}
                  </span>
                </div>

                <div className="space-y-1.5 sm:space-y-2">
                  <div className="text-xs sm:text-sm text-gray-700">
                    <strong className="font-medium">CPF:</strong> {sec.cpf}
                  </div>
                  <div className="flex items-start gap-2 text-xs sm:text-sm text-gray-700">
                    <Mail className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0 mt-0.5" />
                    <span className="break-all">{sec.email}</span>
                  </div>
                  <div className="flex items-center gap-2 text-xs sm:text-sm text-gray-700">
                    <Phone className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
                    <span className="break-words">{sec.telefone}</span>
                  </div>
                  <div className="text-xs sm:text-sm text-gray-500 pt-1">
                    <strong className="font-medium">Cadastrada em:</strong>{" "}
                    {new Date(sec.criadoEm).toLocaleString()}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ListaSecretarias;