import Link from "next/link";
import { db } from "@/lib/db";
import { AdminPageHeader } from "@/components/admin/page-header";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, Pencil, GripVertical, Star, Quote } from "lucide-react";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function AdminTestimonialsPage() {
  const testimonials = await db.testimonial.findMany({
    orderBy: [{ order: "asc" }, { createdAt: "desc" }],
  });

  return (
    <>
      <AdminPageHeader title="Testimonials" description={`${testimonials.length} testimonials collected`}>
        <Button asChild className="brand-gradient text-white">
          <Link href="/admin/testimonials/new"><Plus className="size-4 mr-1.5" /> Add Testimonial</Link>
        </Button>
      </AdminPageHeader>

      <Card className="rounded-2xl overflow-hidden">
        <div className="divide-y divide-border">
          {testimonials.map((t) => (
            <div key={t.id} className="flex items-start gap-4 p-4 hover:bg-accent/40 transition-colors">
              <GripVertical className="size-4 text-muted-foreground/40 shrink-0 mt-1" />
              <div className="grid place-items-center size-10 rounded-full bg-[var(--brand-royal)]/10 text-[var(--brand-royal)] shrink-0 overflow-hidden">
                {t.avatar ? (
                  <img src={t.avatar} alt={t.name} className="size-full object-cover" />
                ) : (
                  <Quote className="size-5" />
                )}
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-semibold truncate">{t.name}</span>
                  {!t.isEnabled && <Badge variant="secondary" className="text-xs">Disabled</Badge>}
                  {t.position && <span className="text-xs text-muted-foreground">· {t.position}</span>}
                  {t.company && <span className="text-xs text-muted-foreground">· {t.company}</span>}
                </div>
                <p className="text-sm text-muted-foreground line-clamp-1 mt-0.5">{t.content}</p>
                <div className="flex items-center gap-0.5 mt-1">
                  {[1, 2, 3, 4, 5].map((s) => (
                    <Star
                      key={s}
                      className={cn(
                        "size-3.5",
                        s <= t.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"
                      )}
                    />
                  ))}
                </div>
              </div>
              <div className="hidden sm:block text-xs text-muted-foreground shrink-0">Order: {t.order}</div>
              <Button asChild variant="outline" size="sm" className="shrink-0">
                <Link href={`/admin/testimonials/edit/${t.id}`}><Pencil className="size-3.5 mr-1" /> Edit</Link>
              </Button>
            </div>
          ))}
          {testimonials.length === 0 && (
            <div className="p-12 text-center text-muted-foreground">No testimonials yet. Click &ldquo;Add Testimonial&rdquo; to create one.</div>
          )}
        </div>
      </Card>
    </>
  );
}
