// Detail side panel — shows full info for a tool or a department summary

function fmtMoney(n, opts = {}) {
  return "$" + n.toLocaleString(undefined, {
    minimumFractionDigits: opts.cents ? 2 : 0,
    maximumFractionDigits: opts.cents ? 2 : 0,
  });
}

function fmtDate(iso) {
  if (!iso) return null;
  const d = new Date(iso + "T12:00:00");
  return d.toLocaleDateString(undefined, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

function daysUntil(iso) {
  if (!iso) return null;
  const d = new Date(iso + "T12:00:00");
  const now = new Date();
  return Math.round((d - now) / (1000 * 60 * 60 * 24));
}

function ToolDetail({ tool, onClose, onSelectDept }) {
  const secondaries = (tool.connects || []).filter((c) => c !== tool.dept);
  const dexp = daysUntil(tool.expires);
  const expStatus = dexp == null
    ? null
    : dexp < 0
    ? "expired"
    : dexp < 90
    ? "soon"
    : "ok";

  return (
    <aside className="detail-panel" key={tool.name}>
      <button className="detail-close" onClick={onClose} aria-label="Close">
        ×
      </button>

      <div className="detail-hero">
        <LogoTile tool={tool} size={72} />
        <div>
          <div className="detail-eyebrow">TOOL · {tool.dept.toUpperCase()}</div>
          <h2>{tool.name}</h2>
          <div className="detail-usecase">{tool.useCase || "—"}</div>
        </div>
      </div>

      <div className="detail-grid">
        <div className="detail-stat">
          <div className="ds-label">Monthly</div>
          <div className="ds-value">{fmtMoney(tool.monthly, { cents: true })}</div>
        </div>
        <div className="detail-stat">
          <div className="ds-label">Quarterly</div>
          <div className="ds-value">{fmtMoney(tool.qtrly, { cents: true })}</div>
        </div>
        <div className="detail-stat detail-stat-big">
          <div className="ds-label">Annual</div>
          <div className="ds-value">{fmtMoney(tool.annual, { cents: true })}</div>
          <div className="ds-sub">
            {((tool.annual / STATS.totalAnnual) * 100).toFixed(2)}% of total spend
          </div>
        </div>
      </div>

      <section className="detail-section">
        <div className="ds-label">Department</div>
        <button
          className="dept-chip primary"
          style={{
            "--dept-color": deptColor(tool.dept, 0.78, 0.13),
          }}
          onClick={() => onSelectDept(tool.dept)}
        >
          {tool.dept}
        </button>
      </section>

      {secondaries.length > 0 && (
        <section className="detail-section">
          <div className="ds-label">Also serves</div>
          <div className="dept-chip-row">
            {secondaries.map((c) => (
              <button
                key={c}
                className="dept-chip"
                style={{ "--dept-color": deptColor(c, 0.78, 0.13) }}
                onClick={() => onSelectDept(c)}
              >
                {c}
              </button>
            ))}
          </div>
        </section>
      )}

      <section className="detail-section">
        <div className="ds-label">Billing</div>
        <div className="detail-text">{tool.billing || "Monthly"}</div>
      </section>

      {tool.expires && (
        <section className="detail-section">
          <div className="ds-label">Expires</div>
          <div className={`expires-badge ex-${expStatus}`}>
            <span className="ex-date">{fmtDate(tool.expires)}</span>
            <span className="ex-rel">
              {dexp < 0
                ? `${-dexp} days ago`
                : dexp === 0
                ? "today"
                : `in ${dexp} days`}
            </span>
          </div>
        </section>
      )}

      {tool.notes && (
        <section className="detail-section">
          <div className="ds-label">Notes</div>
          <div className="detail-text muted">{tool.notes}</div>
        </section>
      )}
    </aside>
  );
}

function DepartmentDetail({ dept, onClose, onSelectTool }) {
  const tools = TOOLS.filter((t) => t.dept === dept.id);
  const shared = TOOLS.filter(
    (t) => t.dept !== dept.id && (t.connects || []).includes(dept.id)
  );
  const color = deptColor(dept.id, 0.72, 0.13);
  const stats = STATS.byDept[dept.id];

  return (
    <aside className="detail-panel" key={dept.id}>
      <button className="detail-close" onClick={onClose} aria-label="Close">
        ×
      </button>

      <div className="detail-hero">
        <div
          className="dept-hero-tile"
          style={{ background: color }}
        >
          {dept.short}
        </div>
        <div>
          <div className="detail-eyebrow">DEPARTMENT</div>
          <h2>{dept.label}</h2>
          <div className="detail-usecase">
            {stats.count} tools · {fmtMoney(stats.annual)} / year
          </div>
        </div>
      </div>

      <section className="detail-section">
        <div className="ds-label">Owned tools ({tools.length})</div>
        <div className="detail-tool-list">
          {tools.length === 0 && <div className="muted">No tools assigned.</div>}
          {tools
            .sort((a, b) => b.annual - a.annual)
            .map((t) => (
              <button
                key={t.name}
                className="dept-tool-mini"
                onClick={() => onSelectTool(t.name)}
              >
                <LogoTile tool={t} size={32} />
                <span className="dtm-name">{t.name}</span>
                <span className="dtm-cost">{fmtMoney(t.annual)}</span>
              </button>
            ))}
        </div>
      </section>

      {shared.length > 0 && (
        <section className="detail-section">
          <div className="ds-label">Also uses ({shared.length})</div>
          <div className="detail-tool-list">
            {shared.map((t) => (
              <button
                key={t.name}
                className="dept-tool-mini"
                onClick={() => onSelectTool(t.name)}
              >
                <LogoTile tool={t} size={32} />
                <span className="dtm-name">{t.name}</span>
                <span className="dtm-cost dtm-cost-muted">
                  via {t.dept}
                </span>
              </button>
            ))}
          </div>
        </section>
      )}
    </aside>
  );
}

window.ToolDetail = ToolDetail;
window.DepartmentDetail = DepartmentDetail;