"use client";

import Image from "next/image";
import { Mail, Phone, UserRound } from "lucide-react";
import { useCollection } from "@/hooks/useCollection";
import { COLLECTIONS } from "@/lib/firestore-paths";
import type { TeamMember } from "@/types/models";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { publicImageSrc } from "@/lib/public-image";

export default function TeamPage() {
  const { items, loading } = useCollection<TeamMember>(COLLECTIONS.team, "order", "asc");
  const list = [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="Birlikte çalışıyoruz"
          title="Ekibimiz"
          subtitle="Deneyimli kadromuzla hukuki süreçlerinizde yanınızdayız."
        />
      </FadeIn>

      {loading ? (
        <p className="mt-12 text-center text-sm text-[var(--muted)]">Yükleniyor…</p>
      ) : list.length === 0 ? (
        <FadeIn delay={0.08}>
          <p className="mt-12 rounded-2xl border border-dashed border-black/10 bg-white px-6 py-12 text-center text-sm text-[var(--muted)]">
            Ekip üyeleri henüz eklenmedi. Yönetim panelinden ekleyebilirsiniz.
          </p>
        </FadeIn>
      ) : (
        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {list.map((member, i) => (
            <FadeIn key={member.id} delay={i * 0.06}>
              <article className="group flex h-full flex-col overflow-hidden rounded-xl border border-black/5 bg-white shadow-[0_12px_36px_-20px_rgba(15,31,68,0.4)] transition duration-300 hover:-translate-y-0.5">
                <div className="relative aspect-[4/3] w-full overflow-hidden bg-[#f0f2f7]">
                  {member.imageUrl ? (
                    <Image
                      src={publicImageSrc(member.imageUrl)}
                      alt={member.name}
                      fill
                      className="object-cover transition duration-500 group-hover:scale-[1.03]"
                      unoptimized
                    />
                  ) : (
                    <div className="flex h-full items-center justify-center bg-gradient-to-br from-[#0f1f44] to-[#152a45]">
                      <UserRound className="h-12 w-12 text-[var(--gold)]/80" />
                    </div>
                  )}
                </div>
                <div className="flex flex-1 flex-col p-4">
                  <h2 className="font-[family-name:var(--font-display)] text-lg text-[var(--navy)]">
                    {member.name}
                  </h2>
                  <p className="mt-0.5 text-xs font-medium text-[var(--gold-dark)]">{member.role}</p>
                  {member.bio ? (
                    <p className="mt-2 line-clamp-3 flex-1 text-xs leading-relaxed text-[var(--muted)]">
                      {member.bio}
                    </p>
                  ) : null}
                  {(member.email || member.phone) && (
                    <ul className="mt-3 space-y-1.5 border-t border-black/5 pt-3 text-xs">
                      {member.email ? (
                        <li>
                          <a
                            href={`mailto:${member.email}`}
                            className="inline-flex items-center gap-2 text-[var(--muted)] transition hover:text-[var(--navy)]"
                          >
                            <Mail className="h-3.5 w-3.5 shrink-0 text-[var(--gold-dark)]" />
                            {member.email}
                          </a>
                        </li>
                      ) : null}
                      {member.phone ? (
                        <li>
                          <a
                            href={`tel:${member.phone.replace(/\s/g, "")}`}
                            className="inline-flex items-center gap-2 text-[var(--muted)] transition hover:text-[var(--navy)]"
                          >
                            <Phone className="h-3.5 w-3.5 shrink-0 text-[var(--gold-dark)]" />
                            {member.phone}
                          </a>
                        </li>
                      ) : null}
                    </ul>
                  )}
                </div>
              </article>
            </FadeIn>
          ))}
        </div>
      )}
    </div>
  );
}