import Link from "next/link";
import { asc } from "drizzle-orm";
import { FileImage, FileText } from "lucide-react";

import { db } from "@/db";
import { files } from "@/db/schema";
import UserPicker from "@/components/UserPicker";
import UploadFileForm from "@/components/UploadFileForm";
import { imageFormatFromUrl } from "@/utils/file-kind";

export const dynamic = "force-dynamic";

/** badge ชนิดไฟล์ต่อรายการ (N3) */
function kindBadge(pdfUrl: string): string {
  switch (imageFormatFromUrl(pdfUrl)) {
    case "jpeg":
      return "JPG";
    case "png":
      return "PNG";
    case "tiff":
      return "TIFF";
    default:
      return "PDF";
  }
}

export default async function HomePage() {
  const rows = await db.select().from(files).orderBy(asc(files.createdAt));

  return (
    <main className="mx-auto max-w-2xl px-4 py-10 sm:px-8">
      <header className="flex items-center gap-3">
        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-base font-bold text-white shadow-sm">
          JN
        </div>
        <div>
          <h1 className="text-2xl font-bold leading-tight text-primary">
            Judge&apos;s Note
          </h1>
          <p className="text-sm text-slate-500">
            ระบบ PDF Annotation สำหรับ e-Court
          </p>
        </div>
      </header>

      <UserPicker />

      <section className="mt-8">
        <h2 className="text-sm font-semibold text-slate-700">เพิ่มเอกสาร</h2>
        <UploadFileForm />
      </section>

      <div className="mt-8 flex items-baseline justify-between">
        <h2 className="text-sm font-semibold text-slate-700">เอกสาร</h2>
        {rows.length > 0 && (
          <span className="text-xs tabular-nums text-slate-500">{rows.length} ไฟล์</span>
        )}
      </div>

      {rows.length === 0 ? (
        <div className="mt-3 rounded-xl border border-dashed border-slate-300 bg-white/60 p-10 text-center">
          <FileText className="mx-auto h-8 w-8 text-slate-300" />
          <p className="mt-3 text-sm font-medium text-slate-500">
            ยังไม่มีไฟล์ในระบบ
          </p>
          <p className="mt-1 text-xs text-slate-500">
            รัน /sync-db เพื่อ seed ไฟล์ตัวอย่าง
          </p>
        </div>
      ) : (
        <ul className="mt-3 space-y-3">
          {rows.map((f) => (
            <li
              key={f.id}
              className="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
            >
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                {imageFormatFromUrl(f.pdfUrl) ? (
                  <FileImage className="h-5 w-5 text-primary" />
                ) : (
                  <FileText className="h-5 w-5 text-primary" />
                )}
              </div>
              <span className="min-w-0 flex-1">
                <span className="block break-all line-clamp-2 text-sm font-medium text-slate-900">
                  {f.title}
                </span>
                <span className="mt-0.5 block text-xs text-slate-500">
                  <span className="mr-1.5 rounded bg-slate-100 px-1 py-0.5 font-medium text-slate-500">
                    {kindBadge(f.pdfUrl)}
                  </span>
                  {new Date(f.createdAt).toLocaleString("th-TH")}
                </span>
              </span>
              {/* ปุ่มเข้า annotate แทนลิงก์กางเต็มการ์ด (M4) ตาม feedback — เป้าจิ้ม 36px (H4) */}
              <Link
                href={`/annotate/${f.id}`}
                className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
              >
                Annotate
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}