"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";

export type ScanOp = {
  id: string;
  sequence: number;
  name: string;
  status: string;
  qcRequired: boolean;
  instructions: string | null;
  materialNotes: string | null;
  settings: string | null;
  plannedMinutes: number | null;
  plannedUnits: number | null;
  claimedByUserId: string | null;
  claimedAt: string | null;
  machine: { id: string; name: string; kind: string } | null;
  part: {
    id: string;
    code: string;
    name: string;
    material: string | null;
    qty: number;
    assembly: {
      id: string;
      code: string;
      name: string;
      project: { id: string; code: string; name: string };
    };
  };
  claimedBy: { id: string; name: string } | null;
};

type Viewer = {
  id: string;
  role: "admin" | "operator";
  claimedByMe: boolean;
};

export default function ScanClient({ initialOp, viewer }: { initialOp: ScanOp; viewer: Viewer }) {
  const router = useRouter();
  const [op, setOp] = useState(initialOp);
  const [claimedByMe, setClaimedByMe] = useState(viewer.claimedByMe);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  // Inline form state for pause/done. We keep one set of fields and let the
  // active button decide which API to hit — the fields (units processed, note)
  // are identical between release and close.
  const [units, setUnits] = useState("");
  const [note, setNote] = useState("");
  const [qcPassed, setQcPassed] = useState<null | boolean>(null);
  const [qcNotes, setQcNotes] = useState("");

  const isOperator = viewer.role === "operator";
  const active = op.status === "in_progress";
  const completed = op.status === "completed";

  async function call(path: string, body?: unknown) {
    setError(null);
    const res = await fetch(path, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: body ? JSON.stringify(body) : undefined,
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      setError(data.error ?? "Request failed");
      return null;
    }
    return data;
  }

  function onClaim() {
    startTransition(async () => {
      const data = await call(`/api/v1/operations/${op.id}/claim`);
      if (data?.operation) {
        setOp({ ...op, ...data.operation });
        setClaimedByMe(true);
      }
    });
  }

  function onRelease() {
    startTransition(async () => {
      const data = await call(`/api/v1/operations/${op.id}/release`, {
        unitsProcessed: units ? Number(units) : undefined,
        note: note || undefined,
      });
      if (data?.operation) {
        setOp({ ...op, ...data.operation });
        setClaimedByMe(false);
        // Bounce back to /op so the operator sees their queue.
        router.push("/op");
      }
    });
  }

  function onClose() {
    if (op.qcRequired && qcPassed === null) {
      setError("This step requires QC — mark pass or fail before completing");
      return;
    }
    startTransition(async () => {
      const data = await call(`/api/v1/operations/${op.id}/close`, {
        unitsProcessed: units ? Number(units) : undefined,
        note: note || undefined,
        qc:
          qcPassed === null
            ? undefined
            : { passed: qcPassed, notes: qcNotes || undefined, measurements: "" },
      });
      if (data?.operation) {
        setOp({ ...op, ...data.operation });
        setClaimedByMe(false);
        router.push("/op");
      }
    });
  }

  return (
    <div className="space-y-4">
      <div className="rounded-2xl bg-white border border-slate-200 p-5 shadow-sm">
        <div className="text-xs text-slate-500">
          {op.part.assembly.project.code} · {op.part.assembly.code}
        </div>
        <h1 className="text-xl font-semibold mt-1">{op.part.name}</h1>
        <div className="text-slate-600 text-sm">
          Part <span className="font-mono">{op.part.code}</span>
          {op.part.material ? ` · ${op.part.material}` : null} · qty {op.part.qty}
        </div>

        <div className="mt-4 flex items-center gap-2">
          <span className="inline-flex items-center rounded-full bg-slate-100 text-slate-700 text-xs px-2 py-1">
            Step {op.sequence}
          </span>
          <span
            className={`inline-flex items-center rounded-full text-xs px-2 py-1 ${
              completed
                ? "bg-emerald-100 text-emerald-800"
                : active
                  ? "bg-amber-100 text-amber-800"
                  : "bg-slate-100 text-slate-700"
            }`}
          >
            {op.status === "in_progress" ? "in progress" : op.status}
          </span>
          {op.qcRequired ? (
            <span className="inline-flex items-center rounded-full bg-purple-100 text-purple-800 text-xs px-2 py-1">
              QC
            </span>
          ) : null}
        </div>

        <div className="mt-3 text-lg">{op.name}</div>
        {op.machine ? (
          <div className="text-sm text-slate-600 mt-1">
            Machine: <span className="font-medium">{op.machine.name}</span>
            <span className="text-slate-400"> ({op.machine.kind})</span>
          </div>
        ) : null}
        {op.plannedMinutes || op.plannedUnits ? (
          <div className="text-sm text-slate-600 mt-1">
            Plan:
            {op.plannedMinutes ? ` ${op.plannedMinutes} min` : ""}
            {op.plannedMinutes && op.plannedUnits ? " ·" : ""}
            {op.plannedUnits ? ` ${op.plannedUnits} units` : ""}
          </div>
        ) : null}
      </div>

      {op.instructions ? (
        <div className="rounded-2xl bg-white border border-slate-200 p-5">
          <h2 className="text-sm font-semibold text-slate-900 mb-1">Instructions</h2>
          <p className="whitespace-pre-wrap text-sm text-slate-700">{op.instructions}</p>
        </div>
      ) : null}

      {op.materialNotes ? (
        <div className="rounded-2xl bg-white border border-slate-200 p-5">
          <h2 className="text-sm font-semibold text-slate-900 mb-1">Material notes</h2>
          <p className="whitespace-pre-wrap text-sm text-slate-700">{op.materialNotes}</p>
        </div>
      ) : null}

      {op.settings ? (
        <div className="rounded-2xl bg-white border border-slate-200 p-5">
          <h2 className="text-sm font-semibold text-slate-900 mb-1">Settings</h2>
          <pre className="text-xs bg-slate-50 border border-slate-200 rounded-md p-3 overflow-auto">
            {op.settings}
          </pre>
        </div>
      ) : null}

      {error ? (
        <div className="rounded-md bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">
          {error}
        </div>
      ) : null}

      {isOperator && !completed ? (
        <div className="rounded-2xl bg-white border border-slate-200 p-5 space-y-4">
          {!claimedByMe && op.claimedBy && op.claimedByUserId !== viewer.id ? (
            <div className="rounded-md bg-amber-50 border border-amber-200 text-amber-900 text-sm px-3 py-2">
              <span className="font-medium">{op.claimedBy.name}</span> is currently on this step.
            </div>
          ) : null}

          {!claimedByMe ? (
            <button
              onClick={onClaim}
              disabled={isPending || (!!op.claimedByUserId && op.claimedByUserId !== viewer.id)}
              className="w-full h-14 rounded-xl bg-slate-900 text-white text-lg font-medium disabled:bg-slate-400"
            >
              {isPending ? "Claiming…" : "Start this step"}
            </button>
          ) : (
            <>
              <div className="grid grid-cols-1 gap-3">
                <label className="block">
                  <span className="text-sm font-medium text-slate-900">Units processed</span>
                  <input
                    type="number"
                    inputMode="numeric"
                    min={0}
                    value={units}
                    onChange={(e) => setUnits(e.target.value)}
                    placeholder={op.plannedUnits?.toString() ?? "0"}
                    className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-base"
                  />
                </label>
                <label className="block">
                  <span className="text-sm font-medium text-slate-900">Note (optional)</span>
                  <textarea
                    value={note}
                    onChange={(e) => setNote(e.target.value)}
                    rows={2}
                    className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
                  />
                </label>
              </div>

              {op.qcRequired ? (
                <div className="rounded-md bg-purple-50 border border-purple-200 p-3 space-y-2">
                  <div className="text-sm font-medium text-purple-900">QC check (required)</div>
                  <div className="flex gap-2">
                    <button
                      type="button"
                      onClick={() => setQcPassed(true)}
                      className={`flex-1 h-10 rounded-md border text-sm font-medium ${
                        qcPassed === true
                          ? "bg-emerald-600 text-white border-emerald-700"
                          : "bg-white text-slate-700 border-slate-300"
                      }`}
                    >
                      Pass
                    </button>
                    <button
                      type="button"
                      onClick={() => setQcPassed(false)}
                      className={`flex-1 h-10 rounded-md border text-sm font-medium ${
                        qcPassed === false
                          ? "bg-red-600 text-white border-red-700"
                          : "bg-white text-slate-700 border-slate-300"
                      }`}
                    >
                      Fail
                    </button>
                  </div>
                  {qcPassed !== null ? (
                    <textarea
                      value={qcNotes}
                      onChange={(e) => setQcNotes(e.target.value)}
                      rows={2}
                      placeholder="QC notes"
                      className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
                    />
                  ) : null}
                </div>
              ) : null}

              <div className="grid grid-cols-2 gap-3">
                <button
                  onClick={onRelease}
                  disabled={isPending}
                  className="h-14 rounded-xl bg-white border border-slate-300 text-slate-900 text-lg font-medium disabled:opacity-60"
                >
                  {isPending ? "…" : "Pause"}
                </button>
                <button
                  onClick={onClose}
                  disabled={isPending}
                  className="h-14 rounded-xl bg-emerald-600 text-white text-lg font-medium disabled:bg-emerald-400"
                >
                  {isPending ? "…" : "Done"}
                </button>
              </div>
            </>
          )}
        </div>
      ) : null}

      {completed ? (
        <div className="rounded-2xl bg-emerald-50 border border-emerald-200 p-5 text-center">
          <div className="text-emerald-900 font-semibold">Step completed</div>
          <div className="text-sm text-emerald-800 mt-1">Scan the next card or head back to your dashboard.</div>
        </div>
      ) : null}
    </div>
  );
}