"use client";
import Link from "next/link";
import { useState } from "react";
import { useSnap } from "@/lib/client";

/* The first-run checklist on the dashboard. Six things a new room does once, each read from the
 * records rather than remembered: a tick appears because the staff register has a row in it, not
 * because somebody clicked "done". Every row links to the screen that does it. The panel goes on
 * its own once all six are ticked, or once the room is 60 days old with three or more ticked, and
 * an admin can put it away with Dismiss (Facility.checklistDismissed). Not on the phone app. */
const DAY = 86_400_000;

export default function Checklist({ welcome, onDismissWelcome }: { welcome: boolean; onDismissWelcome: () => void }) {
  const { s, mutate } = useSnap();
  const [hidden, setHidden] = useState(false);
  const admin = s.session.role === "Admin";
  const steps: { label: string; done: boolean; href: string; cta: string }[] = [
    { label: "Add staff, or import the register", done: s.staff.length > 0, href: "/app/settings?tab=data", cta: "Settings › Data" },
    { label: "Add garments", done: s.catalog.length > 0, href: "/app/settings?tab=data", cta: "Settings › Data" },
    { label: "Set reorder levels", done: Object.values(s.stock).some((x) => x.reorder !== null && x.reorder !== undefined), href: "/app/stock", cta: "Inventory" },
    { label: "Record opening stock", done: s.moves.length > 0 || Object.values(s.stock).some((x) => x.opening > 0), href: "/app/stock", cta: "Inventory" },
    { label: "Issue a garment", done: s.issues.length > 0, href: "/app/issue", cta: "Issue stock" },
    { label: "Bind a barcode or print labels", done: Object.keys(s.barcodes).length > 0, href: "/app/stock", cta: "Inventory" },
  ];
  const done = steps.filter((x) => x.done).length;
  const ageDays = Math.floor((Date.now() - new Date(s.createdAt).getTime()) / DAY);
  const finished = done === steps.length || (ageDays >= 60 && done >= 3);
  if (hidden || s.settings.checklistDismissed || (finished && !welcome)) return null;

  async function dismiss() {
    setHidden(true);
    onDismissWelcome();
    if (admin) await mutate("settings.checklist", { dismissed: true });
  }

  return (
    <div className="tc-panel" style={{ marginBottom: "var(--space-6)" }}>
      <div className="tc-panel-head">
        <div>{welcome ? "Welcome to ThreadCount" : "Getting set up"}</div>
        <div className="tc-panel-aside">{done} of {steps.length}</div>
      </div>
      <div className="tc-panel-list">
        {steps.map((st) => (
          <div key={st.label} className="tc-row" style={{ alignItems: "center" }}>
            <div className="tc-row-fig" style={{ width: 32, flex: "none", fontSize: 16, color: st.done ? "var(--color-accent-700)" : "var(--color-neutral-600)" }} aria-label={st.done ? "done" : "to do"}>{st.done ? "✓" : "○"}</div>
            <div className="tc-row-main">
              <div className="tc-row-name" style={{ textDecoration: st.done ? "line-through" : "none", color: st.done ? "var(--color-neutral-700)" : undefined }}>{st.label}</div>
            </div>
            {!st.done && <Link href={st.href} className="btn btn-secondary">{st.cta}</Link>}
          </div>
        ))}
      </div>
      {(admin || welcome) && (
        <div className="tc-panel-body" style={{ display: "flex", justifyContent: "flex-end", paddingTop: 0 }}>
          <button className="btn btn-ghost" onClick={dismiss}>{finished ? "Done" : "Dismiss"}</button>
        </div>
      )}
    </div>
  );
}