import { useEffect, useState } from "react";
import { closeShift, fetchShift, openShift, type ShiftReport } from "./api.js";

// Manned-mode shift control. Start/End are explicit (not time-based — see
// wiki/concepts/shift.md). End Shift signs + prints a Z-report and shows the
// totals. Available to cashier/operator/admin (readonly has no shift).

const money = (m: number, cur: string | null) => `${(m / 100).toFixed(2)} ${cur ?? ""}`.trim();

export function ShiftControl() {
  const [startedAt, setStartedAt] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [report, setReport] = useState<ShiftReport | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    fetchShift()
      .then((s) => setStartedAt(s.open?.startedAt ?? null))
      .catch(() => {
        /* readonly / not permitted — hide control */
      });
  }, []);

  async function start() {
    setBusy(true);
    setErr(null);
    setReport(null);
    try {
      const { startedAt } = await openShift();
      setStartedAt(startedAt);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function end() {
    setBusy(true);
    setErr(null);
    try {
      const z = await closeShift();
      setReport(z);
      setStartedAt(null);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <section style={{ marginTop: "1.5rem", padding: "0.75rem 1rem", border: "1px solid #ddd", borderRadius: 6, maxWidth: 460 }}>
      <strong>Shift:</strong>{" "}
      {startedAt ? (
        <>
          <span style={{ color: "#16a34a" }}>open</span> since {new Date(startedAt).toLocaleString()}{" "}
          <button type="button" onClick={end} disabled={busy}>
            {busy ? "Ending…" : "End shift"}
          </button>
        </>
      ) : (
        <>
          <span style={{ color: "#777" }}>not started</span>{" "}
          <button type="button" onClick={start} disabled={busy}>
            {busy ? "Starting…" : "Start shift"}
          </button>
        </>
      )}
      {err && <p style={{ color: "crimson", margin: "0.5rem 0 0" }}>{err}</p>}
      {report && (
        <div style={{ marginTop: "0.75rem", fontFamily: "ui-monospace, monospace", fontSize: "0.9em" }}>
          <div style={{ fontWeight: 600 }}>Z-REPORT — {report.operator}</div>
          <div>Payments: {report.paymentCount}</div>
          <div>Cash: {money(report.cashTotalMinor, report.currency)}</div>
          <div>Card: {money(report.cardTotalMinor, report.currency)}</div>
          <div style={{ color: report.printed ? "#16a34a" : "#b45309" }}>
            {report.printed ? "Printed to booth receipt." : "Recorded (no printer to print to)."}
          </div>
        </div>
      )}
    </section>
  );
}