import Link from "next/link";
import { requireOperator } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

/**
 * Operator dashboard. Because phones often have the browser open between scans,
 * we want this page to answer one question fast: "what am I currently working
 * on?" Active claims are the headline list; below that we show a generic
 * "scan a card to start" hint so a fresh operator knows what to do.
 */
export default async function OperatorHomePage() {
  const user = await requireOperator();

  const claims = await prisma.operation.findMany({
    where: { claimedByUserId: user.id, status: "in_progress" },
    orderBy: { claimedAt: "desc" },
    include: {
      machine: { select: { name: true } },
      part: {
        select: {
          code: true,
          name: true,
          assembly: {
            select: {
              code: true,
              project: { select: { code: true, name: true } },
            },
          },
        },
      },
    },
  });

  return (
    <div className="mx-auto max-w-3xl px-4 py-6 space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">Hi, {user.name}</h1>
        <p className="text-slate-500 mt-1 text-sm">
          Scan a QR card with your phone camera to start a step, or continue an active one below.
        </p>
      </div>

      {claims.length === 0 ? (
        <div className="rounded-xl bg-white border border-slate-200 p-6 text-slate-600 text-sm text-center">
          You have no active steps. Scan a traveler QR to begin.
        </div>
      ) : (
        <div className="space-y-3">
          <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wide">
            Active ({claims.length})
          </h2>
          {claims.map((c) => (
            <Link
              key={c.id}
              href={`/op/scan/${c.qrToken}`}
              className="block rounded-xl bg-white border border-slate-200 p-4 hover:border-slate-900 hover:shadow-sm transition"
            >
              <div className="text-xs text-slate-500">
                {c.part.assembly.project.code} · {c.part.assembly.code}
              </div>
              <div className="font-medium mt-0.5">{c.part.name}</div>
              <div className="text-sm text-slate-700 mt-1">
                Step {c.sequence}: {c.name}
              </div>
              <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-x-3">
                <span className="font-mono">{c.part.code}</span>
                {c.machine ? <span>{c.machine.name}</span> : null}
                {c.claimedAt ? <span>since {new Date(c.claimedAt).toLocaleTimeString()}</span> : null}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}