import Link from "next/link";
import { Edit, Plus } from "lucide-react";
import { PageHeader } from "@/components/admin/form";
import { DeleteButton } from "@/components/admin/delete-button";
import { listTeamMembers } from "@/lib/data";
import { deleteTeamMember } from "@/lib/admin-actions";

export default async function TeamAdminPage() {
  const members = await listTeamMembers();
  return (
    <div>
      <PageHeader
        title="Ekip"
        description="Hakkımızda sayfasında gösterilen ekip üyeleri."
        action={
          <Link
            href="/admin/ekip/new"
            className="inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
          >
            <Plus className="size-4" /> Yeni üye
          </Link>
        }
      />
      <div className="mt-6 grid gap-4 md:grid-cols-2">
        {members.length === 0 && (
          <div className="rounded-2xl border border-dashed border-[var(--border)] bg-white p-12 text-center text-sm text-[var(--muted)] md:col-span-2">
            Henüz ekip üyesi yok.
          </div>
        )}
        {members.map((m) => (
          <div
            key={m.$id}
            className="rounded-2xl border border-[var(--border)] bg-white p-5"
          >
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-center gap-3">
                {m.photo_url ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={m.photo_url}
                    alt={m.name}
                    className="size-12 rounded-full object-cover"
                  />
                ) : (
                  <div className="flex size-12 items-center justify-center rounded-full bg-[var(--navy-50)] text-sm font-semibold text-[var(--navy)]">
                    {m.name.charAt(0)}
                  </div>
                )}
                <div>
                  <p className="font-semibold text-[var(--navy)]">{m.name}</p>
                  <p className="text-xs text-[var(--muted)]">
                    {m.role ?? "—"} {m.order != null && `• Sıra: ${m.order}`}
                  </p>
                </div>
              </div>
              <div className="flex gap-1.5">
                <Link
                  href={`/admin/ekip/${m.$id}/edit`}
                  className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] bg-white px-2 py-1 text-xs font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
                >
                  <Edit className="size-3" /> Düzenle
                </Link>
                <form action={deleteTeamMember}>
                  <input type="hidden" name="id" value={m.$id} />
                  <DeleteButton />
                </form>
              </div>
            </div>
            {m.bio && (
              <p className="mt-3 text-sm text-[var(--muted)] line-clamp-3">
                {m.bio}
              </p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}