import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { Plus, Pencil, Trash2, Star, ExternalLink } from "lucide-react";

export const dynamic = "force-dynamic";

export default async function AdminProjectsPage() {
  const session = await getSession();
  if (!session.isLoggedIn) redirect("/admin/login");

  const projects = await prisma.project.findMany({
    orderBy: [{ sortOrder: "asc" }, { createdAt: "desc" }],
  });

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">پروژه‌ها</h1>
          <p className="text-sm text-text-secondary mt-1">{projects.length} پروژه</p>
        </div>
        <a
          href="/admin/projects/new"
          className="flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-background hover:bg-accent-hover transition-colors"
        >
          <Plus size={16} />
          پروژه جدید
        </a>
      </div>

      {projects.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-20 text-center">
          <p className="text-text-secondary">هنوز پروژه‌ای ندارید</p>
          <a href="/admin/projects/new" className="mt-4 text-sm text-accent hover:text-accent-hover">اولین پروژه را اضافه کنید →</a>
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map((project) => (
            <div key={project.id} className="rounded-xl border border-border bg-surface p-4 space-y-3">
              {project.coverImage && (
                <div className="relative h-32 overflow-hidden rounded-lg bg-surface-hover">
                  <img src={project.coverImage} alt={project.title} className="h-full w-full object-cover" />
                </div>
              )}
              <div>
                <div className="flex items-start justify-between gap-2">
                  <h3 className="font-semibold text-text-primary line-clamp-1">{project.title}</h3>
                  {project.featured && <Star size={12} className="text-accent shrink-0 mt-1" />}
                </div>
                <div className="mt-1 flex items-center gap-2">
                  <span className="rounded-full bg-surface-hover border border-border px-2 py-0.5 font-mono text-xs text-text-secondary">
                    {project.projectType}
                  </span>
                  <span className="font-mono text-xs text-text-secondary">{project.locale}</span>
                </div>
                {project.description && (
                  <p className="mt-2 text-xs text-text-secondary line-clamp-2">{project.description}</p>
                )}
              </div>
              <div className="flex items-center gap-2 border-t border-border pt-3">
                <a
                  href={`/admin/projects/${project.id}`}
                  className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border py-1.5 text-xs text-text-secondary hover:border-accent/40 hover:text-accent transition-colors"
                >
                  <Pencil size={12} /> ویرایش
                </a>
                {project.liveUrl && (
                  <a
                    href={project.liveUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex h-8 w-8 items-center justify-center rounded-lg border border-border text-text-secondary hover:border-accent/40 hover:text-accent transition-colors"
                  >
                    <ExternalLink size={12} />
                  </a>
                )}
                <button
                  type="button"
                  onClick={async () => {
                    if (!confirm("حذف شود؟")) return;
                    await fetch(`/api/admin/projects/${project.id}`, { method: "DELETE" });
                    window.location.reload();
                  }}
                  className="flex h-8 w-8 items-center justify-center rounded-lg border border-border text-text-secondary hover:border-danger/40 hover:text-danger transition-colors"
                >
                  <Trash2 size={12} />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
