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

export default async function TestimonialsAdminPage() {
  const items = await listTestimonials();
  return (
    <div>
      <PageHeader
        title="Referanslar"
        description="Müşteri yorumları ve değerlendirmeleri."
        action={
          <Link
            href="/admin/referanslar/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 referans
          </Link>
        }
      />
      <div className="mt-6 grid gap-4 md:grid-cols-2">
        {items.length === 0 && (
          <div className="md:col-span-2 rounded-2xl border border-dashed border-[var(--border)] bg-white p-12 text-center text-sm text-[var(--muted)]">
            Henüz referans eklenmemiş.
          </div>
        )}
        {items.map((t) => (
          <div
            key={t.$id}
            className="rounded-2xl border border-[var(--border)] bg-white p-5"
          >
            <div className="flex items-start justify-between">
              <div>
                <p className="text-base font-semibold text-[var(--navy)]">{t.name}</p>
                <p className="text-xs text-[var(--muted)]">
                  {[t.role, t.company].filter(Boolean).join(" — ") || "—"}
                </p>
              </div>
              <div className="flex items-center gap-0.5 text-amber-500">
                {Array.from({ length: t.rating ?? 5 }).map((_, i) => (
                  <Star key={i} className="size-3.5 fill-current" />
                ))}
              </div>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-[var(--foreground)] line-clamp-4">
              “{t.message}”
            </p>
            <div className="mt-4 flex items-center justify-between border-t border-[var(--border)] pt-3">
              <span className="text-xs text-[var(--muted)]">
                Sıra: {t.order ?? 0} {t.featured && "• Öne çıkan"}
              </span>
              <div className="flex items-center gap-2">
                <Link
                  href={`/admin/referanslar/${t.$id}/edit`}
                  className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] bg-white px-2.5 py-1.5 text-xs font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
                >
                  <Edit className="size-3.5" /> Düzenle
                </Link>
                <form action={deleteTestimonial}>
                  <input type="hidden" name="id" value={t.$id} />
                  <DeleteButton />
                </form>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}