/* global React */
const { useState } = React;

// Simple inline icons (kept abstract / geometric, no brand glyphs)
const Icon = ({ name }) => {
  const paths = {
    home: <><path d="M3 11L12 4l9 7" /><path d="M5 10v10h14V10" /></>,
    folder: <><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" /></>,
    spark: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l4 4M14 14l4 4M6 18l4-4M14 10l4-4" /></>,
    chart: <><path d="M4 20V8M10 20V4M16 20v-7M22 20H2" /></>,
    inbox: <><path d="M3 13l3-8h12l3 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z" /><path d="M3 13h5l1 2h6l1-2h5" /></>,
    cog: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1A1.7 1.7 0 0 0 15 4.6a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></>,
  };
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" className="svg-stroke">
      {paths[name]}
    </svg>
  );
};

const CampaignsView = () => {
  const cols = [
    { name: "Backlog", count: 4, tasks: [
      { t: "Q3 brand refresh — moodboard", client: "Halden Studio", chip: "Brand", avs: [1, 2] },
      { t: "Newsletter rework — outline", client: "Foundry & Co", chip: "Content", avs: [3] },
      { t: "Audit landing page copy", client: "Northwind Labs", chip: "Copy", avs: [2] },
      { t: "Influencer brief draft", client: "Halden Studio", chip: "Social", avs: [1, 4] },
    ]},
    { name: "In progress", count: 3, tasks: [
      { t: "Performance campaign — creative", client: "Foundry & Co", chip: "Ads", avs: [2, 3] },
      { t: "Onboarding email sequence", client: "Greypath", chip: "Email", avs: [4] },
      { t: "SEO content cluster", client: "Northwind Labs", chip: "SEO", avs: [1, 2, 3] },
    ]},
    { name: "Review", count: 2, tasks: [
      { t: "Launch video — final cut", client: "Halden Studio", chip: "Video", avs: [1] },
      { t: "Press release v3", client: "Atlas&Co", chip: "PR", avs: [3, 4] },
    ]},
    { name: "Shipped", count: 3, tasks: [
      { t: "Q2 retrospective deck", client: "Greypath", chip: "Strategy", avs: [4] },
      { t: "Webinar landing page", client: "Foundry & Co", chip: "Web", avs: [2] },
      { t: "Spring campaign visuals", client: "Atlas&Co", chip: "Brand", avs: [1, 3] },
    ]},
  ];
  return (
    <div className="kanban">
      {cols.map((c) => (
        <div className="kanban-col" key={c.name}>
          <div className="kanban-col-h">
            <span>{c.name}</span>
            <span className="count">{c.count}</span>
          </div>
          {c.tasks.map((t, i) => (
            <div className="task" key={i}>
              <div className="task-title">{t.t}</div>
              <div className="task-meta">
                <span className="chip client">{t.client}</span>
                <span className="chip">{t.chip}</span>
                <span className="avatar-stack">
                  {t.avs.map((a) => (
                    <span key={a} className={`avatar av-${a}`}>
                      {["AM", "JT", "RS", "KP"][a - 1]}
                    </span>
                  ))}
                </span>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

const ClientsView = () => {
  const clients = [
    { name: "Halden Studio", type: "Brand · Retainer", mk: 1, status: "active", initials: "HS" },
    { name: "Foundry & Co", type: "Performance · Retainer", mk: 2, status: "active", initials: "FC" },
    { name: "Northwind Labs", type: "Content · Project", mk: 3, status: "review", initials: "NL" },
    { name: "Greypath", type: "Strategy · Project", mk: 4, status: "active", initials: "GP" },
    { name: "Atlas&Co", type: "Social · Retainer", mk: 5, status: "active", initials: "AC" },
    { name: "Pinewood Group", type: "PR · Project", mk: 6, status: "paused", initials: "PG" },
  ];
  const statusLabel = { active: "Active", review: "In review", paused: "Paused" };
  return (
    <div className="clients-grid">
      {clients.map((c) => (
        <div className="client-card" key={c.name}>
          <div className="client-row">
            <div className={`client-mark cm-${c.mk}`}>{c.initials}</div>
            <div>
              <div className="client-name">{c.name}</div>
              <div className="client-meta">{c.type}</div>
            </div>
          </div>
          <div style={{ marginTop: "auto", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 10, borderTop: "1px dashed var(--hairline)" }}>
            <span className="client-meta" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span className={`status-dot status-${c.status}`} />
              {statusLabel[c.status]}
            </span>
            <span className="client-meta">Open →</span>
          </div>
        </div>
      ))}
    </div>
  );
};

const ReportsView = () => {
  // Pure visual chart bars — abstract shape, not implying real metrics
  const bars = [42, 58, 50, 72, 64, 80, 76, 92, 84, 100, 90, 96];
  const bars2 = [30, 38, 36, 50, 44, 58, 60, 64, 72, 78, 86, 90];
  const max = 100;
  return (
    <div className="reports">
      <div className="report-card">
        <h4>Campaign output</h4>
        <div className="mono">Weekly shipped vs. drafted · last quarter</div>
        <div className="chart">
          <svg viewBox="0 0 600 200" preserveAspectRatio="none" width="100%" height="100%">
            <defs>
              <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
              </linearGradient>
            </defs>
            {/* gridlines */}
            {[0, 1, 2, 3].map((i) => (
              <line key={i} x1="0" x2="600" y1={50 * i + 10} y2={50 * i + 10} stroke="var(--hairline)" strokeDasharray="3 4" />
            ))}
            {/* area under line 1 */}
            <path
              d={`M0,${200 - (bars[0] / max) * 180} ${bars.map((b, i) => `L${(i / (bars.length - 1)) * 600},${200 - (b / max) * 180}`).join(" ")} L600,200 L0,200 Z`}
              fill="url(#g1)"
            />
            {/* line 1 */}
            <path
              d={`M0,${200 - (bars[0] / max) * 180} ${bars.map((b, i) => `L${(i / (bars.length - 1)) * 600},${200 - (b / max) * 180}`).join(" ")}`}
              fill="none"
              stroke="var(--ink)"
              strokeWidth="2"
            />
            {/* line 2 — dashed */}
            <path
              d={`M0,${200 - (bars2[0] / max) * 180} ${bars2.map((b, i) => `L${(i / (bars2.length - 1)) * 600},${200 - (b / max) * 180}`).join(" ")}`}
              fill="none"
              stroke="var(--ink-mute)"
              strokeWidth="1.5"
              strokeDasharray="4 4"
            />
          </svg>
        </div>
        <div className="legend">
          <span><span className="legend-dot" style={{ background: "var(--ink)" }} /> Shipped</span>
          <span><span className="legend-dot" style={{ background: "var(--ink-mute)" }} /> Drafted</span>
        </div>
      </div>

      <div className="report-card">
        <h4>By client</h4>
        <div className="mono">This quarter's load distribution</div>
        <div style={{ marginTop: 16 }}>
          {[
            { name: "Halden Studio", val: 86, mk: 1 },
            { name: "Foundry & Co", val: 72, mk: 2 },
            { name: "Greypath", val: 58, mk: 4 },
            { name: "Northwind Labs", val: 44, mk: 3 },
            { name: "Atlas&Co", val: 36, mk: 5 },
          ].map((r) => (
            <div className="list-row" key={r.name}>
              <span className="name">
                <span className={`client-mark cm-${r.mk}`} style={{ width: 22, height: 22, fontSize: 10, borderRadius: 5 }}>
                  {r.name[0]}
                </span>
                {r.name}
              </span>
              <span className="bar"><i style={{ width: `${r.val}%` }} /></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const ProductMock = () => {
  const [view, setView] = useState("campaigns");
  const views = {
    campaigns: { title: "Campaigns", sub: "Every active workstream across your clients, on one board.", view: <CampaignsView /> },
    clients: { title: "Clients", sub: "A workspace per client — briefs, files, conversations, billing.", view: <ClientsView /> },
    reports: { title: "Reports", sub: "Auto-generated overviews. White-label them in one click.", view: <ReportsView /> },
  };
  const current = views[view];

  return (
    <div className="product-frame reveal">
      <div className="pm-topbar">
        <div className="pm-dots"><span /><span /><span /></div>
        <div className="pm-url">app.conyvex.com / workspace</div>
        <div style={{ width: 40 }} />
      </div>
      <div className="pm-body">
        <aside className="pm-sidebar">
          <div className="pm-side-h">Workspace</div>
          <nav className="pm-nav">
            <div className="pm-nav-item"><span className="pm-icon"><Icon name="home" /></span> Home</div>
            <div
              className={`pm-nav-item ${view === "campaigns" ? "active" : ""}`}
              onClick={() => setView("campaigns")}
            >
              <span className="pm-icon"><Icon name="spark" /></span> Campaigns
              <span className="pm-badge">12</span>
            </div>
            <div
              className={`pm-nav-item ${view === "clients" ? "active" : ""}`}
              onClick={() => setView("clients")}
            >
              <span className="pm-icon"><Icon name="folder" /></span> Clients
              <span className="pm-badge">6</span>
            </div>
            <div className="pm-nav-item"><span className="pm-icon"><Icon name="inbox" /></span> Inbox</div>
            <div
              className={`pm-nav-item ${view === "reports" ? "active" : ""}`}
              onClick={() => setView("reports")}
            >
              <span className="pm-icon"><Icon name="chart" /></span> Reports
            </div>
          </nav>
          <div className="pm-side-h" style={{ marginTop: 18 }}>Pinned</div>
          <nav className="pm-nav">
            <div className="pm-nav-item"><span className="pm-icon"><span style={{width:8,height:8,borderRadius:2,background:"oklch(0.88 0.14 60)",display:"inline-block"}}/></span> Halden Studio</div>
            <div className="pm-nav-item"><span className="pm-icon"><span style={{width:8,height:8,borderRadius:2,background:"oklch(0.88 0.14 200)",display:"inline-block"}}/></span> Foundry & Co</div>
            <div className="pm-nav-item"><span className="pm-icon"><span style={{width:8,height:8,borderRadius:2,background:"oklch(0.88 0.14 140)",display:"inline-block"}}/></span> Greypath</div>
          </nav>
        </aside>
        <main className="pm-main">
          <div className="pm-main-head">
            <div>
              <h3 className="pm-title">{current.title}</h3>
              <div className="pm-sub">{current.sub}</div>
            </div>
            <div className="pm-tabs">
              {Object.keys(views).map((k) => (
                <span
                  key={k}
                  className={`pm-tab ${view === k ? "active" : ""}`}
                  onClick={() => setView(k)}
                >
                  {views[k].title}
                </span>
              ))}
            </div>
          </div>
          {current.view}
        </main>
      </div>
    </div>
  );
};

window.ProductMock = ProductMock;