/* OrchEcomm — Overview: welcome banner, onboarding, KPIs, revenue chart, modules, activity. */
function DashboardScreen({ modules, onToggleModule, onNavigate, onToast }) {
  const I = window.OcIcons;
  const { MetricCard, Card, CardHeader, Badge, StatusDot, Button } = window.OrchEcommDesignSystem_091be6;
  const D = window.OcData;
  const activeCount = modules.filter((m) => m.active).length;
  const warnCount = modules.filter((m) => m.active && m.warning).length;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <WelcomeBanner activeCount={activeCount} warnCount={warnCount} onNavigate={onNavigate} />

      <OnboardingChecklist onNavigate={onNavigate} />

      {/* KPI row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--gap-grid)" }}>
        {D.kpis.map((k) => <MetricCard key={k.id} label={k.label} value={k.value} delta={k.delta} trend={k.trend} icon={React.createElement(I[k.icon], { size: 16 })} footnote={k.foot} />)}
      </div>

      {/* Chart + activity */}
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: "var(--gap-grid)", alignItems: "start" }}>
        <Card padding="lg"><RevenuePanel /></Card>
        <Card padding="lg" style={{ maxHeight: 470, display: "flex", flexDirection: "column" }}>
          <CardHeader title="Recent activity" subtitle="Across all connected modules" action={<Badge tone="success" dot>Live</Badge>} />
          <div style={{ overflowY: "auto", margin: "0 -4px", padding: "0 4px" }}><ActivityFeed /></div>
        </Card>
      </div>

      {/* Module status overview */}
      <Card padding="lg">
        <CardHeader title="Module status" subtitle={`${activeCount} of ${modules.length} modules active`} action={<Button variant="secondary" size="sm" iconLeft={<I.Plus size={15} />} onClick={() => onNavigate("modules")}>Add module</Button>} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
          {modules.map((m) => <ModuleStatusCard key={m.id} m={m} onToggle={() => onToggleModule(m.id)} onOpen={() => onNavigate("module:" + m.id)} />)}
        </div>
      </Card>

      {/* Recent orders */}
      <Card padding="lg">
        <CardHeader title="Recent orders" subtitle="Synced from WooCommerce & Shopify" action={<Button variant="ghost" size="sm" iconRight={<I.ChevronRight size={15} />} onClick={() => onNavigate("orders")}>View all</Button>} />
        {React.createElement(window.OrdersTable, { rows: D.recentOrders.slice(0, 5), expandable: true })}
      </Card>
    </div>
  );
}

function WelcomeBanner({ activeCount, warnCount, onNavigate }) {
  const I = window.OcIcons;
  const { Button } = window.OrchEcommDesignSystem_091be6;
  const alert = warnCount > 0;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 22px", borderRadius: "var(--radius-md)", border: "1px solid " + (alert ? "var(--color-warning)" : "var(--border-default)"), background: alert ? "var(--color-warning-bg)" : "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <h2 style={{ font: "var(--type-section)", color: "var(--text-primary)" }}>Good morning, Cristian 👋</h2>
        <p style={{ font: "var(--type-body)", color: alert ? "var(--color-warning-fg)" : "var(--text-secondary)", marginTop: 4 }}>
          {alert
            ? <React.Fragment><b>{warnCount} integration needs attention</b> · {activeCount} modules active · last sync 2 min ago</React.Fragment>
            : <React.Fragment>{activeCount} modules active · all integrations connected · last sync 2 min ago</React.Fragment>}
        </p>
      </div>
      {alert
        ? <Button variant="secondary" size="sm" iconRight={<I.ArrowUpRight size={15} />} onClick={() => onNavigate("payments")} style={{ borderColor: "var(--color-warning)", color: "var(--color-warning-fg)" }}>Resolve</Button>
        : <Button variant="secondary" size="sm" onClick={() => onNavigate("modules")}>View modules</Button>}
    </div>
  );
}

function OnboardingChecklist({ onNavigate }) {
  const I = window.OcIcons;
  const steps = window.OcData.onboardingSteps;
  const [dismissed, setDismissed] = React.useState(false);
  const done = steps.filter((s) => s.done).length;
  if (dismissed) return null;
  return (
    <div style={{ background: "linear-gradient(120deg, var(--green-800), var(--green-900))", borderRadius: "var(--radius-md)", padding: "18px 22px", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.4, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0)", backgroundSize: "22px 22px" }} />
      <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 16 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ font: "var(--type-section)", color: "#fff" }}>Finish setting up</span>
            <span style={{ font: "var(--type-caption)", color: "var(--green-200)" }}>{done} of {steps.length} done</span>
          </div>
          <div style={{ display: "flex", gap: 18, marginTop: 12, flexWrap: "wrap" }}>
            {steps.map((s, i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 18, height: 18, borderRadius: "50%", border: "1.5px solid " + (s.done ? "var(--green-400)" : "rgba(255,255,255,0.4)"), background: s.done ? "var(--green-500)" : "transparent", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--green-900)" }}>{s.done ? <I.Check size={12} /> : null}</span>
                <span style={{ font: "var(--type-body)", color: s.done ? "var(--green-200)" : "#fff", textDecoration: s.done ? "line-through" : "none" }}>{s.label}</span>
              </span>
            ))}
          </div>
        </div>
        <button onClick={() => onNavigate("settings")} style={{ height: 36, padding: "0 16px", borderRadius: "var(--radius-sm)", border: "none", background: "#fff", color: "var(--green-800)", font: "var(--type-body)", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap" }}>Invite a team member</button>
        <button onClick={() => setDismissed(true)} title="Dismiss" style={{ width: 30, height: 30, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", background: "rgba(255,255,255,0.12)", color: "#fff", borderRadius: "var(--radius-sm)", cursor: "pointer" }}><I.X size={16} /></button>
      </div>
    </div>
  );
}

function ModuleStatusCard({ m, onToggle, onOpen }) {
  const I = window.OcIcons;
  const { Switch, StatusDot } = window.OrchEcommDesignSystem_091be6;
  const Icon = I[m.icon] || I.Puzzle;
  const status = m.active ? (m.warning ? "warning" : "active") : "inactive";
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={onOpen} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", padding: 14, background: "var(--surface-card)", display: "flex", flexDirection: "column", gap: 10, boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-xs)", transform: hover ? "translateY(-1px)" : "none", transition: "box-shadow var(--transition-base), transform var(--transition-base)", cursor: "pointer" }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
        <span style={{ width: 36, height: 36, borderRadius: "var(--radius-sm)", background: m.active ? "var(--green-100)" : "var(--ink-100)", color: m.active ? "var(--green-700)" : "var(--text-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon size={19} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: "var(--type-card-title)", color: "var(--text-primary)" }}>{m.name}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 3 }}>
            <StatusDot status={status} size={7} pulse={status === "active"} />
            <span style={{ fontSize: 11, color: "var(--text-secondary)" }}>{m.active ? (m.warning ? "Needs review" : "Active") : "Not connected"}</span>
          </div>
        </div>
        <div onClick={(e) => e.stopPropagation()}><Switch size="sm" checked={m.active} onChange={onToggle} /></div>
      </div>
      {m.warning && m.issue ? <div style={{ display: "inline-flex", alignItems: "center", gap: 6, alignSelf: "flex-start", fontSize: 11, fontWeight: 600, color: "var(--color-warning-fg)", background: "var(--color-warning-bg)", borderRadius: "var(--radius-full)", padding: "3px 9px" }}><I.Bell size={11} /> {m.issue}</div> : null}
    </div>
  );
}

function ActivityFeed() {
  const I = window.OcIcons;
  const feed = window.OcData.activityFeed;
  const toneBg = { brand: ["var(--green-100)", "var(--green-700)"], neutral: ["var(--ink-100)", "var(--text-secondary)"], warning: ["var(--color-warning-bg)", "var(--color-warning)"], error: ["var(--color-error-bg)", "var(--color-error)"] };
  return (
    <div>
      {Object.entries(feed).map(([day, items]) => (
        <div key={day}>
          <div style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-muted)", padding: "12px 0 6px" }}>{day}</div>
          {items.map((it, i) => {
            const Icon = I[it.icon]; const [bg, fg] = toneBg[it.tone];
            const flagColor = it.flag === "error" ? "var(--color-error)" : it.flag === "warning" ? "var(--color-warning)" : null;
            return (
              <div key={i} style={{ display: "flex", gap: 10, padding: "9px 0 9px " + (flagColor ? "10px" : "0"), borderLeft: flagColor ? `2px solid ${flagColor}` : "none", borderBottom: i < items.length - 1 ? "1px solid var(--border-subtle)" : "none", marginLeft: flagColor ? -2 : 0 }}>
                <span style={{ width: 28, height: 28, borderRadius: "var(--radius-sm)", background: bg, color: fg, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon size={15} /></span>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ font: "var(--type-body)", color: "var(--text-primary)", lineHeight: 1.35 }}>{it.text}</div>
                  <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 2 }}>{it.meta} · {it.time}</div>
                </div>
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

window.DashboardScreen = DashboardScreen;