// ============================================================
// Nami Order Portal — Dashboard / Deal list
// ============================================================

const Dashboard = ({ deals, statusFilter, onStatusFilter, onOpenDeal, onNewDeal }) => {
  const [filters, setFilters] = React.useState({ trim: "all", ae: "all", term: "all", close: "all" });

  const filtered = React.useMemo(() => {
    return deals.filter((d) => {
      // "exceptions" is a virtual filter — any deal with at least one
      // pending Deal Desk request, regardless of status. Used by the
      // manager-only sidebar entry.
      if (statusFilter === "exceptions") {
        if ((d.pendingExceptionCount || 0) === 0) return false;
      } else if (statusFilter && statusFilter !== "all" && d.status !== statusFilter) {
        return false;
      }
      if (filters.trim !== "all" && d.trim !== filters.trim) return false;
      if (filters.ae !== "all" && d.ae !== filters.ae) return false;
      if (filters.term !== "all" && String(d.termYears) !== filters.term) return false;
      return true;
    });
  }, [deals, statusFilter, filters]);

  // stats
  const pipelineTcv = deals.filter((d) => ["draft", "legal", "approved", "review", "sent"].includes(d.status)).reduce((s, d) => s + d.tcv, 0);
  const inFlight = deals.filter((d) => ["draft", "legal", "review", "sent"].includes(d.status)).length;
  const wonQuarter = deals.filter((d) => ["signed", "active"].includes(d.status)).reduce((s, d) => s + d.tcv, 0);
  const renewals = deals.filter((d) => d.status === "renewal").length;

  // sparkline path generator
  const spark = (values, max) => {
    const w = 60, h = 28;
    const step = w / (values.length - 1);
    return values.map((v, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(1)},${(h - (v / max) * h).toFixed(1)}`).join(" ");
  };

  return (
    <div className="main__inner">
      <div className="page-header">
        <div>
          <h1 className="page-header__title">Deals</h1>
          <div className="page-header__subtitle">
            {filtered.length} {filtered.length === 1 ? "deal" : "deals"}
            {statusFilter && statusFilter !== "all" ? ` · ${window.NAMI_DATA.STATUS_LABELS[statusFilter] || statusFilter}` : ""}
          </div>
        </div>
        <button className="btn btn--alloy btn--lg" onClick={onNewDeal}>
          <Icon name="plus" size={16} />
          New deal
        </button>
      </div>

      {(!statusFilter || statusFilter === "all") && (
        <div className="stats-row">
          <div className="stat">
            <div className="stat__label">
              Pipeline TCV
              <Tooltip>
                <strong>Open deals not yet won or lost.</strong>
                Sum of TCV across deals in Draft, Pending Legal, Approved, In review, and Out for signature.
                <span className="formula">Σ TCV where status ∈ {`{`}draft, legal, approved, review, sent{`}`}</span>
              </Tooltip>
            </div>
            <div className="stat__value">{money(pipelineTcv, { compact: true })}</div>
            <div className="stat__sub stat__sub--up">↑ 12% vs. last quarter</div>
            <svg className="stat__chart" viewBox="0 0 60 28">
              <path d={spark([4, 7, 5, 9, 11, 10, 14], 16)} fill="none" stroke="var(--nami-blue)" strokeWidth="1.5" />
            </svg>
          </div>
          <div className="stat">
            <div className="stat__label">
              Deals in flight
              <Tooltip>
                <strong>Deals actively moving.</strong>
                Drafts being built, deals out for review or signature, and anything routed to Legal. Excludes signed and active.
              </Tooltip>
            </div>
            <div className="stat__value">{inFlight}</div>
            <div className="stat__sub">3 awaiting customer signature</div>
            <svg className="stat__chart" viewBox="0 0 60 28">
              <path d={spark([2, 3, 5, 4, 6, 5, 7], 8)} fill="none" stroke="var(--sky)" strokeWidth="1.5" />
            </svg>
          </div>
          <div className="stat">
            <div className="stat__label">
              Won this quarter
              <Tooltip>
                <strong>Signed or active in the current fiscal quarter.</strong>
                Closed-won bookings. Renewals count when the renewal contract is signed.
              </Tooltip>
            </div>
            <div className="stat__value">{money(wonQuarter, { compact: true })}</div>
            <div className="stat__sub stat__sub--up">↑ 28% vs. last quarter</div>
            <svg className="stat__chart" viewBox="0 0 60 28">
              <path d={spark([1, 2, 4, 3, 6, 8, 10], 12)} fill="none" stroke="var(--kelp)" strokeWidth="1.5" />
            </svg>
          </div>
          <div className="stat">
            <div className="stat__label">
              Renewals next 90 days
              <Tooltip>
                <strong>Active deals expiring inside 90 days.</strong>
                Triggered by the 90-day renewal reminder. Inside 60 days highlighted in coral.
              </Tooltip>
            </div>
            <div className="stat__value">{renewals}</div>
            <div className="stat__sub stat__sub--down">2 inside 60 days</div>
            <svg className="stat__chart" viewBox="0 0 60 28">
              <path d={spark([3, 2, 4, 3, 5, 4, 6], 8)} fill="none" stroke="var(--coral)" strokeWidth="1.5" />
            </svg>
          </div>
        </div>
      )}

      <div className="filterbar">
        <button className="filterbar__chip">
          Trim: All <Icon name="chevronDown" size={12} />
        </button>
        <button className="filterbar__chip">
          AE: All <Icon name="chevronDown" size={12} />
        </button>
        <button className="filterbar__chip">
          Term length: All <Icon name="chevronDown" size={12} />
        </button>
        <button className="filterbar__chip">
          Close date: This quarter <Icon name="chevronDown" size={12} />
        </button>
        <div className="filterbar__spacer" />
        <div className="filterbar__sort">
          Sort by: Last updated <Icon name="chevronDown" size={12} />
        </div>
      </div>

      <div className="deals-table">
        <table>
          <thead>
            <tr>
              <th style={{ width: "30%" }}>Deal</th>
              <th>Trim</th>
              <th>Term</th>
              <th>TCV</th>
              <th>Status</th>
              <th>AE</th>
              <th>Updated</th>
              <th style={{ width: 100 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((d) => (
              <tr key={d.id} onClick={() => onOpenDeal(d.id)}>
                <td>
                  <div className="deal-name">
                    <DealLogo deal={d} />
                    <div>
                      <div>{d.name}</div>
                      <div className="deal-meta">{d.customer}</div>
                    </div>
                  </div>
                </td>
                <td><TrimChip trim={d.trim} /></td>
                <td>{d.termYears}yr</td>
                <td className="tcv">{money(d.tcv, { compact: true })}</td>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <StatusBadge status={d.status} />
                    {d.isStale && (
                      <span
                        className="stale-dot"
                        title={`Stale — in legal for ${d.staleDays} day${d.staleDays === 1 ? "" : "s"}`}
                      />
                    )}
                  </div>
                  {d.status === "renewal" && d.renewalDays != null && (
                    <div className="deal-meta" style={{ marginTop: 4 }}>{d.renewalDays} days</div>
                  )}
                  {d.isStale && (
                    <div className="deal-meta" style={{ marginTop: 4, color: "var(--accent-red)" }}>
                      Stale {d.staleDays}d
                    </div>
                  )}
                  {(d.pendingExceptionCount || 0) > 0 && (
                    <div className="deal-meta" style={{ marginTop: 4 }}>
                      <span className="exception-pill">
                        {d.pendingExceptionCount} pending exc.
                      </span>
                    </div>
                  )}
                </td>
                <td>{d.ae}</td>
                <td className="text-dim text-xs">{d.updated}</td>
                <td>
                  <div className="row-actions" onClick={(e) => e.stopPropagation()}>
                    <button title="Open"><Icon name="eye" size={15} /></button>
                    <button title="Duplicate"><Icon name="copy" size={15} /></button>
                    <button title="More"><Icon name="more" size={15} /></button>
                  </div>
                </td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={8} style={{ textAlign: "center", padding: "60px 20px", color: "var(--dark-grey)" }}>No deals match these filters.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;