import Link from "next/link";
import { isLocale, type Locale } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { getDb } from "@/lib/db";
import { listProjects } from "@/lib/models";
import { AdminShell } from "@/components/admin/admin-shell";

export default async function ProjectsAdminList() {
  const locale: Locale = "de";
  const dict = getDict(locale);
  const projects = listProjects(getDb(), locale);
  return (
    <AdminShell locale={locale} title={dict.admin.projectsTitle} active="projects">
      <div className="mb-4 flex items-center justify-between">
        <p className="font-mono text-xs text-muted">{projects.length} Einträge</p>
        <Link
          href="/admin/projects/new"
          className="border border-accent bg-accent px-3 py-1 font-mono text-xs uppercase text-[var(--bg)]"
        >
          + {dict.admin.newProject}
        </Link>
      </div>
      <ul className="divide-y divide-[var(--hairline)] border border-hairline">
        {projects.map((p) => (
          <li key={p.slug} className="flex items-center gap-4 px-4 py-3">
            <span className="w-10 font-mono text-xs text-muted">{p.number}</span>
            <div className="flex-1">
              <Link href={`/admin/projects/${p.slug}`} className="font-mono text-sm text-[var(--fg)] hover:text-accent">
                {p.slug}
              </Link>
              <p className="text-xs text-muted">{p.category} · {p.status}</p>
            </div>
            <span className="font-mono text-xs text-muted">sort: {p.sortIndex}</span>
            {p.featured ? <span className="badge badge--live">featured</span> : null}
            <Link href={`/admin/projects/${p.slug}`} className="font-mono text-xs uppercase text-accent hover:underline">
              edit →
            </Link>
          </li>
        ))}
      </ul>
    </AdminShell>
  );
}
