// City Report Card Page

const { useState: useStateR, useEffect: useEffectR, useMemo: useMemoR } = React;

function ReportPage({ onNav, onCarrier, cityId = "los-angeles" }) {
  const { LA_REPORT, SHIPPING_CATEGORIES, METRICS, scoreToLetter } = window.SI_DATA;
  const [activeCat, setActiveCat] = useStateR("small");
  const [expanded, setExpanded] = useStateR(null);
  const [sortKey, setSortKey] = useStateR("score");
  const [sortDir, setSortDir] = useStateR("desc");
  const [compareMode, setCompareMode] = useStateR(false);
  const [compareIds, setCompareIds] = useStateR([]);

  const r = LA_REPORT;
  const carriers = r.carriers[activeCat] || [];

  const sortedCarriers = useMemoR(() => {
    const arr = [...carriers];
    arr.sort((a, b) => {
      let av, bv;
      if (sortKey === "score") { av = a.score; bv = b.score; }
      else if (sortKey === "name") { av = a.name; bv = b.name; }
      else if (sortKey === "shipments") {
        av = parseFloat(a.shipments); bv = parseFloat(b.shipments);
      } else if (sortKey === "trend") { av = a.trend; bv = b.trend; }
      else { av = a.scores[sortKey]; bv = b.scores[sortKey]; }
      if (typeof av === "string") return sortDir === "asc" ? av.localeCompare(bv) : bv.localeCompare(av);
      return sortDir === "asc" ? av - bv : bv - av;
    });
    return arr;
  }, [carriers, sortKey, sortDir]);

  const toggleSort = (k) => {
    if (sortKey === k) setSortDir(sortDir === "asc" ? "desc" : "asc");
    else { setSortKey(k); setSortDir(k === "name" ? "asc" : "desc"); }
  };

  const toggleCompare = (id) => {
    setCompareIds(prev => {
      if (prev.includes(id)) return prev.filter(i => i !== id);
      if (prev.length >= 2) return [prev[1], id];
      return [...prev, id];
    });
  };

  const overallScore = r.overall[activeCat];
  const activeCatLabel = SHIPPING_CATEGORIES.find(c => c.id === activeCat)?.label;

  return (
    <div className="page-report">
      {/* Hero band */}
      <section className="report-hero">
        <div className="report-hero-inner">
          <div className="report-breadcrumb">
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }}>Home</a>
            <span>/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }}>City reports</a>
            <span>/</span>
            <span className="current">Los Angeles, CA</span>
          </div>

          <div className="report-hero-grid">
            <div>
              <div className="report-eyebrow">{r.reportPeriod} Report Card · Updated {r.lastUpdated}</div>
              <h1 className="report-title">
                <span style={{ fontStyle: "italic" }}>Los Angeles,</span> CA
              </h1>
              <p className="report-sub">
                {r.metroPop} metro population · {r.zips} ZIP codes tracked · {r.shipmentsTracked} shipments analyzed
              </p>
              <div className="report-tldr">
                <span className="tldr-label">TL;DR</span>
                <p>UPS edges out FedEx for small-package supremacy; <strong>Old Dominion</strong> dominates LTL with a near-flawless damage record. USPS continues to slip on tracking and service. Saia is the carrier to watch — quietly climbing every quarter.</p>
              </div>
            </div>
            <div className="report-overall-card">
              <div className="report-overall-label">{activeCatLabel} · Metro Average</div>
              <CircleScore score={overallScore} size={180} />
              <div className="report-overall-foot">
                Across {carriers.length} carriers tracked
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Category tabs */}
      <section className="cat-tabs">
        <div className="cat-tabs-inner">
          {SHIPPING_CATEGORIES.map(c => (
            <button
              key={c.id}
              className={`cat-tab ${activeCat === c.id ? "active" : ""}`}
              onClick={() => { setActiveCat(c.id); setExpanded(null); setCompareIds([]); }}
            >
              <span className="cat-tab-label">{c.label}</span>
              <span className="cat-tab-grade">
                <LetterBadge score={r.overall[c.id]} size="sm" />
              </span>
            </button>
          ))}
        </div>
      </section>

      {/* Toolbar */}
      <section className="report-toolbar">
        <div className="report-toolbar-inner">
          <div className="toolbar-left">
            <h2 className="toolbar-h">{activeCatLabel} carriers — ranked</h2>
            <span className="toolbar-meta">{carriers.length} tracked · sorted by {sortKey === "score" ? "Clarity Score" : sortKey}</span>
          </div>
          <div className="toolbar-right">
            <button
              className={`btn-toggle ${compareMode ? "on" : ""}`}
              onClick={() => { setCompareMode(!compareMode); setCompareIds([]); }}
            >
              {compareMode ? `Comparing (${compareIds.length}/2)` : "Compare carriers"}
            </button>
          </div>
        </div>
      </section>

      {/* Table */}
      <section className="carrier-table-section">
        <div className="carrier-table-inner">
          <div className="carrier-table">
            <div className="carrier-table-head">
              <div className="ct-col ct-rank">#</div>
              <div className="ct-col ct-name sortable" onClick={() => toggleSort("name")}>
                Carrier <SortInd active={sortKey==="name"} dir={sortDir} />
              </div>
              <div className="ct-col ct-score sortable" onClick={() => toggleSort("score")}>
                Clarity Score <SortInd active={sortKey==="score"} dir={sortDir} />
              </div>
              <div className="ct-col ct-grade">Grade</div>
              <div className="ct-col ct-trend sortable" onClick={() => toggleSort("trend")}>
                QoQ <SortInd active={sortKey==="trend"} dir={sortDir} />
              </div>
              <div className="ct-col ct-ontime sortable" onClick={() => toggleSort("ontime")}>
                On-Time <SortInd active={sortKey==="ontime"} dir={sortDir} />
              </div>
              <div className="ct-col ct-damage sortable" onClick={() => toggleSort("damage")}>
                Damage <SortInd active={sortKey==="damage"} dir={sortDir} />
              </div>
              <div className="ct-col ct-volume sortable" onClick={() => toggleSort("shipments")}>
                Volume <SortInd active={sortKey==="shipments"} dir={sortDir} />
              </div>
              <div className="ct-col ct-action"></div>
            </div>

            {sortedCarriers.map((c, i) => (
              <CarrierRow
                key={c.id} c={c} rank={i + 1}
                expanded={expanded === c.id}
                onExpand={() => setExpanded(expanded === c.id ? null : c.id)}
                compareMode={compareMode}
                compared={compareIds.includes(c.id)}
                onCompare={() => toggleCompare(c.id)}
                onCarrier={onCarrier}
              />
            ))}
          </div>

          {compareMode && compareIds.length === 2 && (
            <CompareDrawer
              carriers={compareIds.map(id => carriers.find(c => c.id === id))}
              metrics={METRICS}
              onClose={() => { setCompareMode(false); setCompareIds([]); }}
            />
          )}
        </div>
      </section>

      {/* Methodology footer */}
      <section className="report-method">
        <div className="report-method-inner">
          <div>
            <div className="section-eyebrow">Methodology</div>
            <h2 className="section-title">How we graded LA.</h2>
            <p className="report-method-p">
              Grades are derived from {r.shipmentsTracked} tracked shipments across {r.zips} LA-area ZIP codes during {r.reportPeriod}. We weight 8 metrics — on-time delivery, damage rate, customer service responsiveness, tracking accuracy, transit vs. promise, pricing competitiveness, pickup reliability, and driver professionalism — and produce a 0–100 Insight Score per carrier per category. Sponsored placements are clearly labeled and never affect grades.
            </p>
            <button className="btn-ghost" style={{ marginTop: 16 }}>Read full methodology →</button>
          </div>
          <div className="metric-weights">
            <div className="metric-weights-h">Metric weights</div>
            {METRICS.map(m => (
              <div key={m.id} className="metric-weight-row">
                <span className="mw-label">{m.label}</span>
                <span className="mw-bar"><span className="mw-fill" style={{ width: `${m.weight*100*5}%` }}/></span>
                <span className="mw-val">{Math.round(m.weight*100)}%</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function SortInd({ active, dir }) {
  if (!active) return <span style={{ opacity: 0.3, fontFamily: "var(--font-mono)", fontSize: 10 }}>↕</span>;
  return <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--red)" }}>{dir === "asc" ? "↑" : "↓"}</span>;
}

function CarrierRow({ c, rank, expanded, onExpand, compareMode, compared, onCompare, onCarrier }) {
  return (
    <div className={`ct-row-wrap ${expanded ? "expanded" : ""}`}>
      <div className="ct-row" onClick={compareMode ? onCompare : onExpand}>
        <div className="ct-col ct-rank">
          <span className="rank-num">{String(rank).padStart(2, "0")}</span>
        </div>
        <div className="ct-col ct-name">
          <div className="carrier-name-row">
            <span className="carrier-logo-dot" style={{ background: carrierColor(c.id) }}>{c.name[0]}</span>
            <div>
              <div className="carrier-name">{c.name} {c.sponsored && <SponsoredTag />}</div>
              <div className="carrier-sub">{c.shipments} shipments · {c.complaints} complaints</div>
            </div>
          </div>
        </div>
        <div className="ct-col ct-score">
          <div className="score-cell">
            <span className="score-num">{c.score}</span>
            <span className="score-bar"><span className="score-bar-fill" style={{ width: `${c.score}%`, background: scoreColor(c.score) }} /></span>
          </div>
        </div>
        <div className="ct-col ct-grade"><LetterBadge score={c.score} size="md" /></div>
        <div className="ct-col ct-trend"><TrendArrow trend={c.trend} /></div>
        <div className="ct-col ct-ontime"><span style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{c.scores.ontime}</span></div>
        <div className="ct-col ct-damage"><span style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{c.scores.damage}</span></div>
        <div className="ct-col ct-volume"><span style={{ fontFamily: "var(--font-mono)", fontSize: 14 }}>{c.shipments}</span></div>
        <div className="ct-col ct-action">
          {compareMode ? (
            <span className={`compare-check ${compared ? "checked" : ""}`}>
              {compared ? "✓" : ""}
            </span>
          ) : (
            <span className="expand-arrow" style={{ transform: expanded ? "rotate(180deg)" : "" }}>▾</span>
          )}
        </div>
      </div>

      {expanded && !compareMode && (
        <div className="ct-detail">
          <div className="ct-detail-grid">
            <div className="ct-detail-verdict">
              <div className="detail-eyebrow">Our verdict</div>
              <p className="detail-verdict-p">{c.verdict}</p>
              <div className="strengths-weak">
                <div>
                  <div className="sw-h sw-h-good">What works</div>
                  <ul className="sw-list">
                    {c.strengths.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
                <div>
                  <div className="sw-h sw-h-bad">What doesn't</div>
                  <ul className="sw-list">
                    {c.weaknesses.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
              </div>
              <button className="btn-ghost" onClick={() => onCarrier(c.id)} style={{ marginTop: 18 }}>
                Full {c.name} profile →
              </button>
            </div>
            <div className="ct-detail-metrics">
              <div className="detail-eyebrow">Metric breakdown</div>
              {window.SI_DATA.METRICS.map((m, i) => (
                <MetricBar key={m.id} label={m.label} score={c.scores[m.id]} delay={i * 45} />
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CompareDrawer({ carriers, metrics, onClose }) {
  const [a, b] = carriers;
  return (
    <div className="compare-drawer">
      <div className="compare-head">
        <div className="compare-h">Head-to-head</div>
        <button className="compare-close" onClick={onClose}>×</button>
      </div>
      <div className="compare-grid">
        <div className="compare-col">
          <div className="compare-name">{a.name}</div>
          <CircleScore score={a.score} size={120} />
        </div>
        <div className="compare-vs">VS</div>
        <div className="compare-col">
          <div className="compare-name">{b.name}</div>
          <CircleScore score={b.score} size={120} />
        </div>
      </div>
      <div className="compare-metrics">
        {metrics.map(m => {
          const av = a.scores[m.id], bv = b.scores[m.id];
          const aWin = av > bv, bWin = bv > av;
          return (
            <div key={m.id} className="compare-metric-row">
              <span className={`cmr-val ${aWin ? "win" : ""}`} style={{ textAlign: "right" }}>{av}</span>
              <span className="cmr-bar-wrap">
                <span className="cmr-bar cmr-bar-a" style={{ width: `${av/2}%` }} />
                <span className="cmr-bar cmr-bar-b" style={{ width: `${bv/2}%` }} />
              </span>
              <span className={`cmr-val ${bWin ? "win" : ""}`}>{bv}</span>
              <span className="cmr-label">{m.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function carrierColor(id) {
  const map = {
    ups: "#8B5A1A", fedex: "#5A2C8C", usps: "#1E3A8A", amazon: "#E8A33D",
    ontrac: "#C53030", dhl: "#D4A017",
    "old-dominion": "#1A4D2E", saia: "#2563EB", estes: "#7C2D12", xpo: "#DC2626", abf: "#374151",
    "knight-swift": "#B45309", schneider: "#EA580C", "jb-hunt": "#7C2D12", werner: "#1F2937",
    "uber-freight": "#111827", "doordash-drive": "#DC2626", roadie: "#7C3AED", "courier-express": "#374151",
    "dhl-express": "#D4A017", "fedex-intl": "#5A2C8C", "ups-intl": "#8B5A1A", "usps-intl": "#1E3A8A",
  };
  return map[id] || "var(--ink)";
}

function scoreColor(s) {
  if (s >= 85) return "var(--green)";
  if (s >= 70) return "var(--ink)";
  if (s >= 55) return "var(--amber)";
  return "var(--red)";
}

window.ReportPage = ReportPage;
window.carrierColor = carrierColor;
window.scoreColor = scoreColor;