import Link from "next/link";
import { ArrowLeft, ClipboardList } from "lucide-react";
import { serverAuth } from "@/lib/pb";
import { JobCardsTable, type JobRow } from "@/components/JobCardsTable";

export const dynamic = "force-dynamic";

/**
 * Job cards: the work mechanics log from the Plant Clock app. A mechanic scans a vehicle's
 * QR to start a job and scans it again to finish, giving the odometer, the kind of work
 * and a note. Time on the job is first scan to second scan.
 */
export default async function JobCardsPage() {
  const pb = await serverAuth();
  const cards = await pb.collection("job_cards").getFullList({ expand: "asset", sort: "-started_at" });
  const rows: JobRow[] = cards.map((j) => ({
    id: j.id,
    startedAt: String(j.started_at || ""),
    endedAt: String(j.ended_at || ""),
    open: j.status === "open",
    asset: String(j.expand?.asset?.code || ""),
    assetName: String(j.expand?.asset?.name || ""),
    mechanic: String(j.mechanic_name || ""),
    type: String(j.job_type || ""),
    minutes: Number(j.duration_minutes || 0),
    odometer: j.status === "closed" && !j.no_meter ? Number(j.odometer || 0) : null,
    note: String(j.note || ""),
  }));

  return (
    <div className="p-4 sm:p-8 max-w-[1400px]">
      <Link href="/running" className="inline-flex min-h-[44px] items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-[#30638E] mb-3">
        <ArrowLeft className="w-3 h-3" /> Back to Running Costs
      </Link>
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-1">
          <div className="w-10 h-10 shrink-0 rounded-xl bg-gradient-to-br from-[#30638E]/15 to-[#003D5B]/15 grid place-items-center text-[#30638E]">
            <ClipboardList className="w-5 h-5" />
          </div>
          <h1 className="text-2xl font-semibold text-[#003D5B] dark:text-white">Job Cards</h1>
        </div>
        <p className="text-gray-500 dark:text-gray-400 text-sm">Work done on each vehicle, logged by mechanics in the Plant Clock app</p>
      </div>
      <JobCardsTable rows={rows} />
    </div>
  );
}