"use client";

import Image from "next/image";
import { Star } from "lucide-react";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { GlassPanel } from "@/components/ui/GlassPanel";
import { useApprovedTestimonials } from "@/hooks/useApprovedTestimonials";
import { publicImageSrc } from "@/lib/public-image";
import type { TestimonialSubmission } from "@/types/models";
import { TestimonialSubmissionForm } from "@/components/testimonials/TestimonialSubmissionForm";

function StarRow({ count }: { count: number }) {
  const n = Math.min(5, Math.max(1, Math.round(count)));
  return (
    <div className="flex gap-0.5 text-[var(--gold-dark)]">
      {Array.from({ length: n }).map((_, i) => (
        <Star key={i} className="h-4 w-4 fill-[var(--gold)] text-[var(--gold)]" />
      ))}
    </div>
  );
}

function TestimonialCard({ t }: { t: TestimonialSubmission & { id: string } }) {
  return (
    <article className="flex h-full flex-col rounded-2xl border border-black/5 bg-white p-6 shadow-[0_14px_40px_-22px_rgba(15,31,68,0.2)]">
      <StarRow count={t.rating ?? 5} />
      <p className="mt-4 flex-1 text-sm leading-relaxed text-[var(--muted)]">&ldquo;{t.quote}&rdquo;</p>
      <div className="mt-5 flex items-center gap-3 border-t border-black/5 pt-4">
        {t.imageUrl ? (
          <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full border border-black/10">
            <Image src={publicImageSrc(t.imageUrl)} alt="" fill className="object-cover" unoptimized />
          </div>
        ) : (
          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#f0f2f7] text-sm font-bold text-[var(--navy)]">
            {t.name.charAt(0)}
          </div>
        )}
        <div>
          <p className="text-sm font-semibold text-[var(--navy)]">{t.name}</p>
          <p className="text-xs text-[var(--muted)]">{t.role}</p>
        </div>
      </div>
    </article>
  );
}

export default function BiziDegerlendirinPage() {
  const { items, loading, error } = useApprovedTestimonials(100);

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="Geri bildirim"
          title="Bizi değerlendirin"
          subtitle="Deneyiminizi paylaşın; yorumlar yönetici onayından sonra aşağıda listelenir. Yalnızca onaylanan değerlendirmeler herkese açık görünür."
        />
      </FadeIn>

      <div className="mt-12 max-w-2xl">
        <TestimonialSubmissionForm cancelHref="/bizi-degerlendirin" />
      </div>

      <FadeIn className="mt-16">
        <h2 className="font-[family-name:var(--font-display)] text-2xl font-semibold text-[var(--navy)]">
          Onaylanmış yorumlar
        </h2>
        <p className="mt-2 text-sm text-[var(--muted)]">
          Aşağıdaki yorumlar yönetici tarafından onaylanmıştır.
        </p>
      </FadeIn>

      <div className="mt-8">
        {loading ? (
          <p className="text-sm text-[var(--muted)]">Yükleniyor…</p>
        ) : error ? (
          <GlassPanel className="border border-amber-200 bg-amber-50/80 p-4 text-sm text-amber-900">{error}</GlassPanel>
        ) : items.length === 0 ? (
          <GlassPanel className="border border-black/5 bg-white/90 p-8 text-sm text-[var(--muted)]">
            Henüz yayınlanmış yorum yok. Yukarıdaki formdan değerlendirme gönderebilirsiniz.
          </GlassPanel>
        ) : (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {items.map((t, i) => (
              <FadeIn key={t.id} delay={Math.min(i, 8) * 0.04}>
                <TestimonialCard t={t} />
              </FadeIn>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}