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

export const dynamic = "force-dynamic";

function firstImage(imagesJson: string): string | null {
  try {
    const arr = JSON.parse(imagesJson || "[]");
    if (Array.isArray(arr) && arr.length > 0 && typeof arr[0] === "string") return arr[0];
  } catch {}
  return null;
}

export default async function AdminProjectsPage() {
  const projects = await db.project.findMany({ orderBy: { createdAt: "desc" } });

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

      <Card className="rounded-2xl overflow-hidden">
        <div className="divide-y divide-border">
          {projects.map((p) => {
            const cover = firstImage(p.images) || "/uploads/project-chiller.jpg";
            return (
              <div key={p.id} className="flex items-center gap-4 p-4 hover:bg-accent/40 transition-colors">
                <img src={cover} alt={p.title} className="size-14 rounded-lg object-cover border border-border shrink-0 bg-muted" />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="font-semibold truncate">{p.title}</span>
                    {p.isFeatured && (
                      <Badge className="brand-gradient text-white text-xs gap-1">
                        <Star className="size-3" /> Featured
                      </Badge>
                    )}
                    <Badge variant="secondary" className="text-xs">{p.category}</Badge>
                    {!p.isEnabled && <Badge variant="outline" className="text-xs text-muted-foreground">Disabled</Badge>}
                  </div>
                  <div className="text-xs text-muted-foreground truncate mt-0.5">
                    /{p.slug}
                    {p.location && (
                      <span className="ml-2 inline-flex items-center gap-0.5">
                        <MapPin className="size-3" /> {p.location}
                      </span>
                    )}
                    {p.completionDate && <span className="ml-2">· {p.completionDate}</span>}
                  </div>
                </div>
                <Button asChild variant="outline" size="sm">
                  <Link href={`/admin/projects/edit/${p.id}`}><Pencil className="size-3.5 mr-1" /> Edit</Link>
                </Button>
              </div>
            );
          })}
          {projects.length === 0 && (
            <div className="p-12 text-center text-muted-foreground">No projects yet. Click &quot;Add Project&quot; to create one.</div>
          )}
        </div>
      </Card>
    </>
  );
}