"use client";

import { useActionState } from "react";
import { lookupStatus } from "./actions";
import { NOT_IN_WORKSHOP, type StatusResult } from "../../lib/workshop";

function formatWhen(iso: string | null): string {
  if (!iso) return "";
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) return "";
  return date.toLocaleString("en-LK", { timeZone: "Asia/Colombo" });
}

export function StatusForm() {
  const [state, action, pending] = useActionState<StatusResult | null, FormData>(lookupStatus, null);

  return (
    <form action={action}>
      <label>
        Phone
        <input name="phone" inputMode="tel" autoComplete="tel" required />
      </label>
      <button type="submit" disabled={pending}>
        Check
      </button>
      {state?.error ? <p className="error">{state.error}</p> : null}
      {state?.message ? <p>{state.message}</p> : null}
      {state && state.bikes.length > 0 ? (
        <ul>
          {state.bikes.map((bike, index) => {
            const when = formatWhen(bike.stageAt);
            return (
              <li key={`${bike.registration}-${index}`}>
                <div>{bike.registration}</div>
                <div>
                  {bike.make} {bike.model}
                </div>
                {bike.inWorkshop ? (
                  <div>
                    {bike.stageLabel}
                    {when ? ` · ${when}` : ""}
                  </div>
                ) : (
                  <div>{NOT_IN_WORKSHOP}</div>
                )}
              </li>
            );
          })}
        </ul>
      ) : null}
    </form>
  );
}