investor-flow/app/src/components/MarketOutlookPanel.tsx

"use client";
import { useMarketOutlookSections, visibleCount } from "@/stores/market-outlook-sections-store";
import { HeavyTruckSalesChart } from "./HeavyTruckSalesChart";
import { ManufacturingPmiChart } from "./ManufacturingPmiChart";
import { MarketRotationPanel } from "./MarketRotationPanel";
import { RotationSignalAlert } from "./RotationSignalAlert";
import { MacroCommentaryPanel } from "./MacroCommentaryPanel";
import { MarketConditionStrip } from "./MarketConditionStrip";
import { SeasonalityPanel } from "./SeasonalityPanel";
import { InfoTooltip } from "./InfoTooltip";
import { SectionCollapse } from "./SectionCollapse";

/**
 * Market Outlook — market condition, relative leadership, seasonality, macro context.
 */
export function MarketOutlookPanel() {
  const open = useMarketOutlookSections((s) => s.open);
  const expandAll = useMarketOutlookSections((s) => s.expandAll);
  const collapseAll = useMarketOutlookSections((s) => s.collapseAll);
  const numVisible = visibleCount(open);

  return (
    <div className="space-y-6">
      <header className="flex items-baseline justify-between gap-4">
        <div>
          <h1 className="text-xl font-bold text-fg">Market Outlook</h1>
          <p className="text-sm text-fg-faint mt-1">
            Market regime, relative sector leadership, seasonal context, and macro indicators.
          </p>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-[11px] text-fg-muted tabular-nums">{numVisible}/5 sections open</span>
          <button
            type="button"
            onClick={numVisible < 5 ? expandAll : collapseAll}
            className="text-[11px] text-link hover:underline"
          >
            {numVisible < 5 ? "Expand all" : "Collapse all"}
          </button>
        </div>
      </header>

      <MarketConditionStrip />

      <SectionCollapse
        id="rotation"
        title="Sector & style leadership"
        info={
          <InfoTooltip>
            <strong>What it is:</strong> Relative performance of sector and style ETFs versus the broad market (SPY).<br />
            <strong>Why it matters:</strong> Shows where strength is concentrating across the market.<br />
            <strong>How to read it:</strong> Positive relative return means outperformance versus SPY; negative means underperformance. Start with the one-month column.
          </InfoTooltip>
        }
      >
        <div className="space-y-4">
          <p className="text-[11px] text-fg-muted">
            Values are relative to the broad market (SPY), not absolute returns and not measured fund flows.
          </p>
          <MarketRotationPanel />
          <div className="border-t border-line pt-3">
            <p className="text-xs font-medium text-fg mb-2">Leadership alerts</p>
            <RotationSignalAlert />
          </div>
        </div>
      </SectionCollapse>

      <SectionCollapse
        id="seasonality"
        title="Seasonality & calendar"
        info={
          <InfoTooltip>
            <strong>What it is:</strong> Historical monthly patterns and recurring high-attention market dates.<br />
            <strong>Why it matters:</strong> Certain windows (Fed decisions, jobs, inflation prints) tend to raise volatility.<br />
            <strong>How to read it:</strong> Historical averages are context only; any given year can diverge.
          </InfoTooltip>
        }
      >
        <SeasonalityPanel />
      </SectionCollapse>

      <SectionCollapse id="peers" title="Macro commentary">
        <div className="space-y-3">
          <p className="text-[11px] text-fg-muted">
            Near-term and structural commentary from public economic data (growth, inflation, labor, rates).
          </p>
          <MacroCommentaryPanel />
        </div>
      </SectionCollapse>

      <SectionCollapse
        id="truck-sales"
        title="Heavy truck sales"
        info={
          <InfoTooltip>
            <strong>What it is:</strong> Monthly US heavy truck sales (FRED HTRUCKSSAAR).<br />
            <strong>Why it matters:</strong> A real-economy activity gauge that often turns before broader slowdowns or recoveries.<br />
            <strong>How to read it:</strong> Focus on multi-month direction rather than a single print.
          </InfoTooltip>
        }
      >
        <div className="space-y-4">
          <p className="text-[11px] text-fg-muted">
            Source: FRED (
            <a href="https://fred.stlouisfed.org/series/HTRUCKSSAAR" target="_blank" rel="noopener noreferrer" className="text-link underline">
              HTRUCKSSAAR
            </a>
            ).
          </p>
          <HeavyTruckSalesChart />
        </div>
      </SectionCollapse>

      <SectionCollapse
        id="manufacturing-pmi"
        title="Manufacturing output"
        info={
          <InfoTooltip>
            <strong>What it is:</strong> Federal Reserve industrial production: manufacturing (IPMAN).<br />
            <strong>Why it matters:</strong> Hard output measure of the goods-producing economy.<br />
            <strong>How to read it:</strong> Multi-month direction indicates expansion or contraction in factory activity.
          </InfoTooltip>
        }
      >
        <div className="space-y-4">
          <p className="text-[11px] text-fg-muted">
            Source: FRED (
            <a href="https://fred.stlouisfed.org/series/IPMAN" target="_blank" rel="noopener noreferrer" className="text-link underline">
              IPMAN
            </a>
            ).
          </p>
          <ManufacturingPmiChart />
        </div>
      </SectionCollapse>

      <footer className="pt-3 border-t border-line">
        <p className="text-[11px] text-fg-muted">
          Educational analysis, not investment advice. Verify the underlying data; you are responsible for your own decisions.
        </p>
      </footer>
    </div>
  );
}