// ============================================================
// Maverick chrome — sidebar, top bar
// Plaid/Mercury-style warm light neutral, dense data-grid feel.
// ============================================================

const PartnerMark = ({ partnerName, accent }) => {
  // Show a clean text-based mark. If partner is generic "Your Brand", show neutral.
  const initial = partnerName.charAt(0).toUpperCase();
  return (
    <div className="mv-brand">
      <div className="mv-brand-mark" style={{ background: "var(--mv-ink)" }}>{initial}</div>
      <div>
        <div className="mv-brand-name">{partnerName} <span>Payments</span></div>
      </div>
    </div>);

};

const NavItem = ({ icon, label, active, badge, onClick, disabled }) =>
<div
    className={"mv-nav-item" + (active ? " active" : "") + (disabled ? " disabled" : "")}
    onClick={disabled ? undefined : onClick}
    title={disabled ? "Placeholder — not part of this demo" : undefined}>
    <Icon name={icon} size={15} strokeWidth={1.8} className="ic" />
    <span>{label}</span>
    {badge && <span className="badge">{badge}</span>}
  </div>;


const Sidebar = ({ activeSection, onNavigate, partnerName, hasOffer }) => {
  return (
    <aside className="mv-side">
      <PartnerMark partnerName={partnerName} />

      <div className="mv-merchant">
        <div className="mv-merchant-mark">AC</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mv-merchant-name">Acme Coffee Roasters</div>
          <div className="mv-merchant-role">MID 8245·0931 · Active</div>
        </div>
        <Icon name="chevrons-up-down" size={14} className="mv-merchant-chev" />
      </div>

      <div className="mv-nav-section">Main</div>
      <NavItem icon="layout-dashboard" label="Dashboard" disabled />
      <NavItem icon="credit-card" label="Payments" disabled />
      <NavItem icon="arrow-left-right" label="Transactions" disabled />
      <NavItem icon="users" label="Customers" disabled />
      <NavItem icon="shield-alert" label="Disputes" disabled />
      <NavItem icon="bar-chart-3" label="Reports" disabled />

      <div className="mv-nav-section">Grow</div>
      <NavItem
        icon="banknote"
        label="Capital"
        active={activeSection === "capital"}
        badge={hasOffer ? "Offer" : null}
        onClick={() => onNavigate("capital")} />
      

      <div className="mv-nav-section">Setup</div>
      <NavItem icon="settings" label="Settings" disabled />

      <div className="mv-side-foot">
        <div className="mv-avatar">SC</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mv-side-foot-name">Sarah Chen</div>
          <div className="mv-side-foot-email">sarah@acmecoffee.co</div>
        </div>
        <Icon name="settings-2" size={14} color="var(--mv-ink-3)" />
      </div>
    </aside>);

};

const TopBar = ({ section, partnerName, onHome }) => {
  const crumbs = {
    dashboard: "Dashboard",
    payments: "Payments",
    transactions: "Transactions",
    customers: "Customers",
    disputes: "Disputes",
    reports: "Reports",
    capital: "Capital",
    settings: "Settings"
  };
  return (
    <div className="mv-top">
      <div className="mv-top-left">
        <button className="mv-home-btn" onClick={onHome} title="Back to demo home">
          <Icon name="home" size={14} />
          <span>Back to home</span>
        </button>
        <div className="mv-crumb">
          Acme Coffee Roasters
          <Icon name="chevron-right" size={11} />
          <b>{crumbs[section] || "Dashboard"}</b>
        </div>
      </div>

      <div className="mv-top-actions">
        <div className="mv-search-wrap">
          <Icon name="search" size={14} className="ic" />
          <input className="mv-search" placeholder="Search transactions, customers, payouts…" />
        </div>
        <button className="mv-icon-btn" title="Reports"><Icon name="download" size={15} /></button>
        <button className="mv-icon-btn" title="Notifications">
          <Icon name="bell" size={15} />
          <span className="dot" />
        </button>
        <button className="mv-icon-btn" title="Help"><Icon name="circle-help" size={15} /></button>
      </div>
    </div>);

};

// Placeholder pages for non-Capital sidebar items — these aren't the focus
// but they must look real-ish so reps can click around without breaking the illusion.
const PlaceholderSection = ({ section, partnerName }) => {
  const meta = {
    dashboard: {
      title: "Today",
      sub: "Your business at a glance.",
      tiles: [
      { label: "Gross volume", value: "$3,418.24", delta: "+18.2%", deltaPos: true, sub: "vs. yesterday" },
      { label: "Net volume", value: "$3,278.51", delta: "+17.9%", deltaPos: true, sub: "vs. yesterday" },
      { label: "Successful payments", value: "84", delta: "+12", deltaPos: true, sub: "vs. yesterday" },
      { label: "Authorization rate", value: "97.3%", delta: "-0.4pp", deltaPos: false, sub: "rolling 7-day" }]

    },
    payments: {
      title: "Payments", sub: "Process, refund, and reconcile.",
      tiles: [
      { label: "Today's volume", value: "$3,418.24", delta: "+18.2%", deltaPos: true, sub: "84 successful" },
      { label: "Pending settlement", value: "$1,204.10", delta: "T+1", deltaPos: true, sub: "Arrives tomorrow" },
      { label: "Refunds (30d)", value: "$184.00", delta: "-22%", deltaPos: true, sub: "4 refunds" },
      { label: "Avg. ticket", value: "$40.69", delta: "+$1.20", deltaPos: true, sub: "vs. last 30" }]

    },
    transactions: {
      title: "Transactions", sub: "Search every payment, refund, and dispute.",
      tiles: [
      { label: "Visa", value: "62%", delta: "", sub: "of 30-day volume" },
      { label: "Mastercard", value: "24%", delta: "", sub: "of 30-day volume" },
      { label: "Amex", value: "9%", delta: "", sub: "of 30-day volume" },
      { label: "Other", value: "5%", delta: "", sub: "Discover, ACH, …" }]

    },
    customers: { title: "Customers", sub: "Returning buyers across your storefront.", tiles: [] },
    disputes: { title: "Disputes", sub: "Open chargebacks and inquiries.", tiles: [] },
    reports: { title: "Reports", sub: "Build and schedule exports.", tiles: [] },
    settings: { title: "Settings", sub: "Account, team, and processing.", tiles: [] }
  };
  const m = meta[section] || meta.dashboard;

  return (
    <div style={{ padding: "28px 32px" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24 }}>
        <div>
          <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", margin: 0, color: "var(--mv-ink)" }}>{m.title}</h1>
          <p style={{ margin: "4px 0 0", fontSize: 13, color: "var(--mv-ink-2)" }}>{m.sub}</p>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button className="mv-icon-btn" style={{ paddingRight: 12, paddingLeft: 12, width: "auto", fontSize: 12, fontWeight: 500, gap: 6, color: "var(--mv-ink-2)" }}>
            <Icon name="calendar" size={13} /> Last 7 days
          </button>
          <button style={{
            background: "var(--mv-ink)", color: "#fff", border: "none",
            padding: "7px 14px", borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: "pointer",
            display: "flex", alignItems: "center", gap: 6, fontFamily: "inherit"
          }}>
            <Icon name="download" size={13} /> Export
          </button>
        </div>
      </div>

      {m.tiles.length > 0 &&
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--mv-line)", border: "1px solid var(--mv-line)", borderRadius: 8, overflow: "hidden", marginBottom: 24 }}>
          {m.tiles.map((t, i) =>
        <div key={i} style={{ background: "var(--mv-surface)", padding: "18px 20px" }}>
              <div style={{ fontSize: 11, color: "var(--mv-ink-3)", fontWeight: 500, marginBottom: 8 }}>{t.label}</div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", fontVariantNumeric: "tabular-nums", color: "var(--mv-ink)" }}>{t.value}</div>
              <div style={{ fontSize: 11, marginTop: 6, display: "flex", gap: 6, alignItems: "center" }}>
                {t.delta && <span style={{ color: t.deltaPos ? "var(--mv-positive)" : "var(--mv-negative)", fontWeight: 600 }}>{t.delta}</span>}
                <span style={{ color: "var(--mv-ink-3)" }}>{t.sub}</span>
              </div>
            </div>
        )}
        </div>
      }

      {/* Fake data table */}
      <div style={{ background: "var(--mv-surface)", border: "1px solid var(--mv-line)", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--mv-line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--mv-ink)" }}>Recent activity</div>
          <div style={{ display: "flex", gap: 6 }}>
            {["All", "Today", "Failed", "Refunded"].map((f, i) =>
            <button key={f} style={{
              background: i === 0 ? "var(--mv-bg)" : "transparent",
              border: i === 0 ? "1px solid var(--mv-line)" : "1px solid transparent",
              padding: "4px 10px", borderRadius: 999, fontSize: 11.5, fontWeight: 500,
              color: i === 0 ? "var(--mv-ink)" : "var(--mv-ink-2)", cursor: "pointer", fontFamily: "inherit"
            }}>{f}</button>
            )}
          </div>
        </div>
        {[
        { card: "•••• 4242", amount: 42.15, status: "Succeeded", time: "2 min ago", brand: "Visa" },
        { card: "•••• 0005", amount: 18.40, status: "Succeeded", time: "9 min ago", brand: "Mastercard" },
        { card: "•••• 8210", amount: 56.00, status: "Succeeded", time: "14 min ago", brand: "Visa" },
        { card: "•••• 1117", amount: 24.85, status: "Succeeded", time: "22 min ago", brand: "Amex" },
        { card: "•••• 9942", amount: 89.50, status: "Refunded", time: "44 min ago", brand: "Visa" },
        { card: "•••• 0144", amount: 12.20, status: "Succeeded", time: "1 hr ago", brand: "Mastercard" },
        { card: "•••• 4242", amount: 38.00, status: "Succeeded", time: "1 hr ago", brand: "Visa" },
        { card: "•••• 7321", amount: 102.30, status: "Failed", time: "2 hr ago", brand: "Visa" }].
        map((r, i) =>
        <div key={i} style={{
          padding: "11px 20px", borderTop: i === 0 ? "none" : "1px solid var(--mv-line-2)",
          display: "grid", gridTemplateColumns: "100px 80px 120px 1fr 100px", alignItems: "center", gap: 16, fontSize: 12.5
        }}>
            <span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>${r.amount.toFixed(2)}</span>
            <span style={{ color: "var(--mv-ink-2)" }}>USD</span>
            <span style={{
            fontSize: 10.5, fontWeight: 600, padding: "2px 7px", borderRadius: 999,
            background: r.status === "Succeeded" ? "#E5F4ED" : r.status === "Refunded" ? "#FEF1E0" : "#FCE7EB",
            color: r.status === "Succeeded" ? "var(--mv-positive)" : r.status === "Refunded" ? "#7A4310" : "var(--mv-negative)",
            justifySelf: "start"
          }}>{r.status}</span>
            <span style={{ color: "var(--mv-ink-2)" }}>{r.brand} {r.card}</span>
            <span style={{ color: "var(--mv-ink-3)", textAlign: "right", fontSize: 11.5 }}>{r.time}</span>
          </div>
        )}
      </div>

      <div style={{ marginTop: 32, padding: "20px 24px", background: "#FFF7ED", border: "1px solid #FCD9B4", borderRadius: 10, display: "flex", gap: 14, alignItems: "center" }}>
        <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--mv-accent)", color: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}>
          <Icon name="banknote" size={18} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--mv-ink)" }}>You're pre-approved for up to $75,000 in working capital</div>
          <div style={{ fontSize: 12, color: "var(--mv-ink-2)", marginTop: 2 }}>Based on your last 90 days of {partnerName} processing. See your offer in the Capital tab.</div>
        </div>
      </div>
    </div>);

};

Object.assign(window, { Sidebar, TopBar, PlaceholderSection });