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 } from "lucide-react";

export const dynamic = "force-dynamic";

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

  return (
    <>
      <AdminPageHeader title="Before / After" description={`${items.length} entries configured`}>
        <Button asChild className="brand-gradient text-white">
          <Link href="/admin/before-after/new"><Plus className="size-4 mr-1.5" /> Add Entry</Link>
        </Button>
      </AdminPageHeader>

      <Card className="rounded-2xl overflow-hidden">
        <div className="divide-y divide-border">
          {items.map((b) => (
            <div key={b.id} className="flex items-center gap-4 p-4 hover:bg-accent/40 transition-colors">
              <div className="flex items-center gap-1 shrink-0">
                <img src={b.beforeImage} alt="Before" className="size-12 rounded-md object-cover border border-border bg-muted" />
                <img src={b.afterImage} alt="After" className="size-12 rounded-md object-cover border border-border bg-muted" />
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="font-semibold truncate">{b.title}</span>
                  {b.category && <Badge variant="secondary" className="text-xs">{b.category}</Badge>}
                  {!b.isEnabled && <Badge variant="outline" className="text-xs text-muted-foreground">Disabled</Badge>}
                </div>
                <div className="text-xs text-muted-foreground truncate mt-0.5">
                  Order: {b.order}
                  {b.location && <span className="ml-2">· {b.location}</span>}
                  {b.completionDate && <span className="ml-2">· {b.completionDate}</span>}
                </div>
              </div>
              <Button asChild variant="outline" size="sm">
                <Link href={`/admin/before-after/edit/${b.id}`}><Pencil className="size-3.5 mr-1" /> Edit</Link>
              </Button>
            </div>
          ))}
          {items.length === 0 && (
            <div className="p-12 text-center text-muted-foreground">No entries yet. Click &quot;Add Entry&quot; to create one.</div>
          )}
        </div>
      </Card>
    </>
  );
}