/* QuoteBoard — the rep-facing quote tracking table with metrics + filters. */

const { Card, Eyebrow, StatusBadge, Button, Select } = window.Ds1Threshold_e046d3;

function MetricTile({ label, value, icon, tone }) {
  return (
    <Card padding="md" style={{ flex: 1 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Eyebrow size="2xs">{label}</Eyebrow>
        <div style={{ width: 30, height: 30, borderRadius: "var(--radius-md)", background: tone || "var(--color-primary-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)" }}>
          <Icon name={icon} size={16} />
        </div>
      </div>
      <div style={{ fontSize: "var(--text-3xl)", fontWeight: 700, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", marginTop: 8, color: "var(--text-primary)" }}>{value}</div>
    </Card>
  );
}

function QuoteBoard({ quotes, onOpen, onNew, onPresent, onContract, onMarkSold, onMarkInstalled }) {
  const [filter, setFilter] = React.useState("all");
  const [sort, setSort] = React.useState({ key: "id", dir: "desc" });
  const all = (quotes || []).filter(Boolean);
  const filtered = filter === "all" ? all : all.filter((q) => q.status === filter);
  const getters = { customer: (q) => q.customer, rep: (q) => repName(q.rep), id: (q) => q.id, total: (q) => q.total, status: (q) => q.status };
  const rows = sortList(filtered, sort.key, sort.dir, getters[sort.key]);

  const sold = all.filter((q) => q.status === "sold");
  const soldTotal = sold.reduce((s, q) => s + q.total, 0);
  const closeRate = all.length ? Math.round((sold.length / all.length) * 100) : 0;

  return (
    <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: "var(--text-2xl)", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>Quote Board</h1>
          <p style={{ margin: "4px 0 0", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>Track all rep quotes and sales activity</p>
        </div>
        <Button variant="primary" onClick={onNew}><Icon name="Plus" size={16} />New Quote</Button>
      </div>

      {/* Metrics */}
      <div style={{ display: "flex", gap: 16, marginBottom: 22 }}>
        <MetricTile label="Pipeline" value={fmt(all.reduce((s, q) => s + q.total, 0))} icon="TrendingUp" />
        <MetricTile label="Sold (MTD)" value={fmt(soldTotal)} icon="CircleDollarSign" tone="var(--status-sold-bg)" />
        <MetricTile label="Close Rate" value={closeRate + "%"} icon="Target" />
        <MetricTile label="Open Quotes" value={all.filter((q) => q.status === "pending").length} icon="FileClock" tone="var(--status-pending-bg)" />
      </div>

      {/* Filters */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        {["all", "pending", "sold", "lost"].map((s) => (
          <button key={s} onClick={() => setFilter(s)}
            style={{
              padding: "7px 16px", borderRadius: "var(--radius-full)", cursor: "pointer",
              fontSize: "var(--text-xs)", fontWeight: 600, textTransform: "capitalize",
              fontFamily: "var(--font-sans)",
              border: `1px solid ${filter === s ? "var(--color-primary)" : "var(--border-default)"}`,
              background: filter === s ? "var(--color-primary)" : "var(--surface-card)",
              color: filter === s ? "#fff" : "var(--text-muted)",
              transition: "all var(--duration-fast) var(--ease-standard)",
            }}>
            {s === "all" ? "All Status" : s}
          </button>
        ))}
        <div style={{ marginLeft: "auto", width: 160 }}>
          <Select options={["All Reps", ...REPS.map((r) => r.name)]} />
        </div>
      </div>

      {/* Table */}
      <Card padding="none" style={{ overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 0.7fr 1fr 0.9fr 1.4fr", gap: 16, padding: "11px 22px", background: "var(--surface-sunken)", borderBottom: "1px solid var(--border-subtle)" }}>
          <SortHeader label="Customer" k="customer" sort={sort} setSort={setSort} />
          <SortHeader label="Rep" k="rep" sort={sort} setSort={setSort} />
          <SortHeader label="Date" k="id" sort={sort} setSort={setSort} />
          <SortHeader label="Total" k="total" sort={sort} setSort={setSort} />
          <SortHeader label="Status" k="status" sort={sort} setSort={setSort} />
          <Eyebrow size="2xs"></Eyebrow>
        </div>
        {rows.length === 0 && <div style={{ padding: "32px", textAlign: "center", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No quotes yet. Click <strong>New Quote</strong> to build one.</div>}
        {rows.map((q) => (
          <div key={q.id} onClick={() => onOpen && onOpen(q)} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 0.7fr 1fr 0.9fr 1.4fr", gap: 16, padding: "14px 22px", alignItems: "center", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer" }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--surface-sunken)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}>
            <div>
              <div style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-primary)" }}>{q.customer}</div>
              <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", marginTop: 2 }}>{q.id} · {q.address}</div>
            </div>
            <div style={{ fontSize: "var(--text-sm)", color: "var(--text-secondary)" }}>{repName(q.rep)}</div>
            <div style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>{q.date}</div>
            <div style={{ fontSize: "var(--text-sm)", fontWeight: 700, color: "var(--text-primary)", fontVariantNumeric: "tabular-nums" }}>{fmt(q.total)}</div>
            <div><StatusBadge status={q.status} /></div>
            <div style={{ textAlign: "right", display: "flex", gap: 12, justifyContent: "flex-end" }} onClick={(e) => e.stopPropagation()}>
              {q.status === "pending" && onMarkSold && (
                <button onClick={() => onMarkSold(q)} title="Mark as sold" style={{ display: "inline-flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", color: "var(--status-sold-fg)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600 }}>
                  <Icon name="CircleCheck" size={14} />Mark Sold
                </button>
              )}
              {q.status !== "lost" && (
                <button onClick={() => onPresent && onPresent(q)} style={{ display: "inline-flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", color: "var(--color-primary-deep)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600 }}>
                  <Icon name="MonitorPlay" size={14} />Present
                </button>
              )}
              {q.status === "sold" && !q.installed && onMarkInstalled && (
                <button onClick={() => onMarkInstalled(q)} title="Mark as installed" style={{ display: "inline-flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600 }}>
                  <Icon name="Hammer" size={14} />Installed
                </button>
              )}
              {q.status === "sold" && (
                <button onClick={() => onContract && onContract(q)} style={{ display: "inline-flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600 }}>
                  <Icon name="FileSignature" size={14} />Contract
                </button>
              )}
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
}

window.QuoteBoard = QuoteBoard;
window.MetricTile = MetricTile;