/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ============== Workflow templates ============== */
const TEMPLATES = {
  support: {
    name: "Support Ticket Triage",
    blurb: "Inbound email → classify intent → fetch context → draft reply → human review → send.",
    inputLabel: "Incoming email",
    sampleInputs: [
      { from: "siti@retailco.my", subject: "Order #4821 — wrong size", body: "Hi, I received my order today but the shirt is XL not L. Could I get a swap?" },
      { from: "ravi@startup.io", subject: "API rate limits?", body: "We're hitting 429s on /v1/agents. What are the per-minute limits on our plan?" },
      { from: "linda@fnb.com", subject: "Invoice for May", body: "Could you resend the May invoice? Accounts couldn't find it in our inbox." },
    ],
    nodes: [
      { id: "in",     label: "Email Inbox",      sub: "Gmail · IMAP",        x: 30,  y: 110, kind: "trigger" },
      { id: "cls",    label: "Classify Intent",  sub: "GPT-4o · few-shot",   x: 250, y: 50,  kind: "ai" },
      { id: "rag",    label: "Retrieve Context", sub: "Vector DB · top-k",   x: 250, y: 200, kind: "tool" },
      { id: "draft",  label: "Draft Reply",      sub: "GPT-4o · template",   x: 470, y: 110, kind: "ai" },
      { id: "review", label: "Human Review",     sub: "Slack · #ops-inbox",  x: 690, y: 50,  kind: "human" },
      { id: "send",   label: "Send Reply",       sub: "Gmail · API",         x: 690, y: 200, kind: "action" },
      { id: "log",    label: "Audit Log",        sub: "Postgres",            x: 910, y: 110, kind: "store" },
    ],
    edges: [
      ["in","cls"], ["in","rag"], ["cls","draft"], ["rag","draft"],
      ["draft","review"], ["draft","send"], ["review","send"], ["send","log"]
    ],
    steps: [
      { node: "in",     log: (i) => `Received: "${i.subject}" from ${i.from}` },
      { node: "cls",    log: () => `Classified intent → category, confidence 0.94` },
      { node: "rag",    log: () => `Retrieved 3 relevant docs from knowledge base (12 ms)` },
      { node: "draft",  log: () => `Drafted reply (147 tokens) — tone: friendly, concise` },
      { node: "review", log: () => `Posted to #ops-inbox · auto-approved (high confidence)` },
      { node: "send",   log: (i) => `Reply sent to ${i.from}` },
      { node: "log",    log: () => `Audit row written · trace_id=tk_8f3a2c` },
    ],
    output: (i) => `Hi ${i.from.split("@")[0]},\n\nThanks for reaching out — sorted. Reply scheduled to send in 3s.\n\n— AI Agency support`,
  },
  leads: {
    name: "Lead Enrichment",
    blurb: "New form submission → enrich firmographics → score → route to AE → notify Slack.",
    inputLabel: "Form submission",
    sampleInputs: [
      { from: "marcus@axesoft.my", subject: "Demo request — Axesoft", body: "Hi, we'd like to see your AI automation in action. ~120 staff, KL-based logistics SaaS." },
      { from: "yuki@bento.co",   subject: "Pricing question",       body: "Asking on behalf of our COO. Series A fintech, 40 staff, looking at process automation." },
    ],
    nodes: [
      { id: "in",   label: "Form",             sub: "Webhook",              x: 30,  y: 110, kind: "trigger" },
      { id: "enr",  label: "Enrich",           sub: "Clearbit + LinkedIn",  x: 250, y: 50,  kind: "tool" },
      { id: "geo",  label: "Geo & Sector",     sub: "Lookup",               x: 250, y: 200, kind: "tool" },
      { id: "score",label: "ICP Score",        sub: "GPT-4o",               x: 470, y: 110, kind: "ai" },
      { id: "route",label: "Route to AE",      sub: "Round-robin",          x: 690, y: 50,  kind: "action" },
      { id: "slack",label: "Slack Notify",     sub: "#sales-pipeline",      x: 690, y: 200, kind: "action" },
      { id: "crm",  label: "Write to CRM",     sub: "HubSpot",              x: 910, y: 110, kind: "store" },
    ],
    edges: [
      ["in","enr"], ["in","geo"], ["enr","score"], ["geo","score"],
      ["score","route"], ["score","slack"], ["route","crm"], ["slack","crm"]
    ],
    steps: [
      { node: "in",    log: (i) => `Form submitted by ${i.from}` },
      { node: "enr",   log: () => `Enriched: company size, funding, tech stack` },
      { node: "geo",   log: () => `Resolved: APAC · SEA · Logistics SaaS` },
      { node: "score", log: () => `ICP score: 8.4 / 10 — strong fit` },
      { node: "route", log: () => `Assigned to AE: Hana Y. (next in rotation)` },
      { node: "slack", log: () => `Posted to #sales-pipeline with full context` },
      { node: "crm",   log: () => `Contact + deal created in HubSpot` },
    ],
    output: (i) => `New lead from ${i.from} routed to Hana — ICP 8.4 / 10. CRM record opened.`,
  },
  invoice: {
    name: "Invoice Processing",
    blurb: "Inbox watcher → OCR PDF → match PO → validate totals → approve → post to ledger.",
    inputLabel: "Vendor invoice",
    sampleInputs: [
      { from: "billing@vendor.co", subject: "Invoice INV-2049 — May", body: "PDF attached, total RM 12,840.00 due in 30 days." },
      { from: "ar@logistico.my",   subject: "Invoice 8821",          body: "Monthly fulfilment charges, RM 4,210.00." },
    ],
    nodes: [
      { id: "in",  label: "Vendor Inbox",   sub: "IMAP watcher",      x: 30,  y: 110, kind: "trigger" },
      { id: "ocr", label: "OCR Extract",    sub: "Vision model",      x: 250, y: 110, kind: "ai" },
      { id: "po",  label: "Match PO",       sub: "ERP lookup",        x: 470, y: 50,  kind: "tool" },
      { id: "val", label: "Validate Totals",sub: "Rules engine",      x: 470, y: 200, kind: "tool" },
      { id: "ap",  label: "AP Approval",    sub: "Slack approval",    x: 690, y: 110, kind: "human" },
      { id: "post",label: "Post to Ledger", sub: "Xero · API",        x: 910, y: 110, kind: "store" },
    ],
    edges: [
      ["in","ocr"], ["ocr","po"], ["ocr","val"],
      ["po","ap"], ["val","ap"], ["ap","post"]
    ],
    steps: [
      { node: "in",   log: (i) => `Detected: ${i.subject} from ${i.from}` },
      { node: "ocr",  log: () => `Extracted line items + totals (1.2 s)` },
      { node: "po",   log: () => `Matched PO #PO-7741 — vendor authorised` },
      { node: "val",  log: () => `Totals reconcile · tax computed correctly` },
      { node: "ap",   log: () => `Auto-approved (under RM 20k threshold)` },
      { node: "post", log: () => `Posted to Xero ledger · ref AP-2049` },
    ],
    output: () => `Invoice approved and posted. Vendor notified of ETA payment date.`,
  },
};

/* ============== Visualization ============== */
function nodeColor(kind, accent) {
  const map = {
    trigger: accent,
    ai: "#8b5cf6",
    tool: "#0891b2",
    human: "#f59e0b",
    action: "#16a34a",
    store: "#64748b",
  };
  return map[kind] || accent;
}
function nodeIcon(kind) {
  const stroke = { stroke: "currentColor", fill: "none", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "trigger": return <svg viewBox="0 0 24 24" {...stroke}><polyline points="13 3 4 14 11 14 11 21 20 10 13 10 13 3" fill="currentColor" stroke="none"/></svg>;
    case "ai":      return <svg viewBox="0 0 24 24" {...stroke}><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>;
    case "tool":    return <svg viewBox="0 0 24 24" {...stroke}><path d="M14 6l4 4-9 9H5v-4z"/><path d="M16 4l4 4"/></svg>;
    case "human":   return <svg viewBox="0 0 24 24" {...stroke}><circle cx="12" cy="8" r="3.5"/><path d="M5 21c1-4 4-6 7-6s6 2 7 6"/></svg>;
    case "action":  return <svg viewBox="0 0 24 24" {...stroke}><polyline points="5 12 10 17 19 7"/></svg>;
    case "store":   return <svg viewBox="0 0 24 24" {...stroke}><ellipse cx="12" cy="6" rx="7" ry="2.5"/><path d="M5 6v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6M5 12v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/></svg>;
    default: return null;
  }
}

function pathFor(a, b) {
  // smooth cubic curve from right edge of a to left edge of b
  const x1 = a.x + 170, y1 = a.y + 34;
  const x2 = b.x, y2 = b.y + 34;
  const dx = (x2 - x1) * 0.5;
  return `M ${x1} ${y1} C ${x1+dx} ${y1}, ${x2-dx} ${y2}, ${x2} ${y2}`;
}

function WorkflowGraph({ template, activeNodes, activeEdges, accent }) {
  const W = 1100, H = 320;
  const nodes = template.nodes;
  const edges = template.edges;
  const nodeMap = useMemo(() => Object.fromEntries(nodes.map(n => [n.id, n])), [nodes]);
  return (
    <div className="wf-graph">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" style={{width:"100%", height:"100%"}}>
        <defs>
          <linearGradient id="edge-grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor={accent} stopOpacity="0.0"/>
            <stop offset="50%" stopColor={accent} stopOpacity="1"/>
            <stop offset="100%" stopColor={accent} stopOpacity="0.0"/>
          </linearGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="2.5" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* edges */}
        {edges.map(([from, to], i) => {
          const a = nodeMap[from], b = nodeMap[to];
          if (!a || !b) return null;
          const d = pathFor(a, b);
          const isActive = activeEdges.has(`${from}->${to}`);
          return (
            <g key={i}>
              <path d={d} className="edge-base" fill="none" />
              <path
                d={d}
                className={"edge-flow" + (isActive ? " active" : "")}
                fill="none"
                stroke={accent}
              />
              {isActive && (
                <circle r="4.5" fill={accent} filter="url(#glow)">
                  <animateMotion dur="0.9s" repeatCount="1" path={d} />
                </circle>
              )}
            </g>
          );
        })}

        {/* nodes */}
        {nodes.map(n => {
          const isActive = activeNodes.has(n.id);
          const wasActive = activeNodes.get && activeNodes.get(n.id) === "done";
          const c = nodeColor(n.kind, accent);
          return (
            <g key={n.id} transform={`translate(${n.x}, ${n.y})`} className={"wf-node" + (isActive ? " active" : "") + (wasActive ? " done" : "")}>
              <rect width="170" height="68" rx="14" className="node-bg" />
              <rect width="170" height="68" rx="14" className="node-ring" stroke={c} />
              {isActive && <rect width="170" height="68" rx="14" className="node-pulse" stroke={c} />}
              <foreignObject x="12" y="14" width="40" height="40">
                <div className="node-ico" style={{color: c}}>{nodeIcon(n.kind)}</div>
              </foreignObject>
              <text x="58" y="30" className="node-label">{n.label}</text>
              <text x="58" y="48" className="node-sub">{n.sub}</text>
              <circle cx="158" cy="14" r="3.5" className="status-dot" />
            </g>
          );
        })}
      </svg>
    </div>
  );
}

/* ============== Demo Page ============== */
function DemoPage({ navigate }) {
  const [templateId, setTemplateId] = useState("support");
  const template = TEMPLATES[templateId];
  const [inputIdx, setInputIdx] = useState(0);
  const input = template.sampleInputs[inputIdx % template.sampleInputs.length];

  const [running, setRunning] = useState(false);
  const [stepIdx, setStepIdx] = useState(-1);   // -1 idle, 0..steps.length running, steps.length done
  const [logs, setLogs] = useState([]);
  const [activeNodes, setActiveNodes] = useState(new Map());
  const [activeEdges, setActiveEdges] = useState(new Set());
  const [accent, setAccent] = useState(() => getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#3b82f6");
  const timerRef = useRef([]);

  // observe accent changes
  useEffect(() => {
    const mo = new MutationObserver(() => {
      setAccent(getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#3b82f6");
    });
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
    return () => mo.disconnect();
  }, []);

  function clearTimers() {
    timerRef.current.forEach(t => clearTimeout(t));
    timerRef.current = [];
  }

  function reset() {
    clearTimers();
    setRunning(false);
    setStepIdx(-1);
    setLogs([]);
    setActiveNodes(new Map());
    setActiveEdges(new Set());
  }

  function run() {
    reset();
    setRunning(true);
    const stepDur = 1100;
    setLogs([{ t: now(), msg: `Started workflow: ${template.name}`, kind: "info" }]);
    template.steps.forEach((s, i) => {
      const t1 = setTimeout(() => {
        setStepIdx(i);
        setActiveNodes(prev => {
          const next = new Map(prev);
          next.set(s.node, "active");
          return next;
        });
        // edges into this node
        const incoming = template.edges.filter(([_, b]) => b === s.node);
        setActiveEdges(prev => {
          const next = new Set(prev);
          incoming.forEach(([a,b]) => next.add(`${a}->${b}`));
          return next;
        });
        setLogs(prev => [...prev, { t: now(), msg: s.log(input), kind: "step", node: s.node }]);
      }, i * stepDur);
      const t2 = setTimeout(() => {
        setActiveNodes(prev => {
          const next = new Map(prev);
          next.set(s.node, "done");
          return next;
        });
      }, i * stepDur + 800);
      timerRef.current.push(t1, t2);
    });
    const tEnd = setTimeout(() => {
      setRunning(false);
      setStepIdx(template.steps.length);
      setLogs(prev => [...prev, { t: now(), msg: `Workflow completed in ${(template.steps.length * stepDur / 1000).toFixed(1)}s`, kind: "success" }]);
    }, template.steps.length * stepDur + 200);
    timerRef.current.push(tEnd);
  }

  useEffect(() => () => clearTimers(), []);
  useEffect(() => { reset(); }, [templateId, inputIdx]);

  function now() {
    const d = new Date();
    return d.toTimeString().split(" ")[0] + "." + String(d.getMilliseconds()).padStart(3,"0");
  }

  const progress = stepIdx < 0 ? 0 : Math.min(1, (stepIdx + 1) / template.steps.length);

  return (
    <div className="page page-enter">
      <section className="container hero" style={{paddingBottom: 24}}>
        <span className="eyebrow reveal">Live demo</span>
        <h1 className="reveal" style={{marginTop: 14}}>
          See an automation <span className="accent-line">run, end-to-end.</span>
        </h1>
        <p className="lead reveal" style={{marginTop: 22}}>
          Pick a workflow, hit run, and watch each node fire. The logs on the right are what your team would see in production.
        </p>
      </section>

      <section className="container block" style={{paddingTop: 16}}>
        <div className="demo-shell reveal">
          {/* Template tabs */}
          <div className="demo-tabs">
            {Object.entries(TEMPLATES).map(([id, t]) => (
              <button key={id} onClick={()=>setTemplateId(id)} className={"demo-tab" + (templateId === id ? " active" : "")}>
                <div className="t-name">{t.name}</div>
                <div className="t-blurb">{t.blurb}</div>
              </button>
            ))}
          </div>

          {/* Stage */}
          <div className="demo-stage">
            <div className="demo-stage-head">
              <div>
                <div className="mono" style={{fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-faint)"}}>Workflow</div>
                <div style={{fontFamily: "var(--font-display)", fontSize: 28, marginTop: 4}}>{template.name}</div>
              </div>
              <div className="demo-controls">
                <button className="btn btn-ghost" onClick={reset} disabled={running}>Reset</button>
                <button className="btn btn-accent" onClick={run} disabled={running}>
                  {running ? <><span className="spin"></span> Running…</> : <>▶ Run workflow</>}
                </button>
              </div>
            </div>
            <div className="progress-track"><div className="progress-fill" style={{width: (progress*100)+"%"}}></div></div>
            <WorkflowGraph
              template={template}
              activeNodes={activeNodes}
              activeEdges={activeEdges}
              accent={accent}
            />
          </div>

          {/* Bottom panes */}
          <div className="demo-panes">
            <div className="pane">
              <div className="pane-head">
                <div className="pane-title">{template.inputLabel}</div>
                <button className="link-btn" onClick={()=>setInputIdx(i => (i+1) % template.sampleInputs.length)} disabled={running}>
                  ↻ Next sample
                </button>
              </div>
              <div className="email-card">
                <div className="email-row"><span className="k">From</span><span className="v">{input.from}</span></div>
                <div className="email-row"><span className="k">Subject</span><span className="v"><strong>{input.subject}</strong></span></div>
                <div className="email-body">{input.body}</div>
              </div>
            </div>

            <div className="pane">
              <div className="pane-head">
                <div className="pane-title">Live log</div>
                <span className="mono" style={{fontSize: 10, color: "var(--text-faint)", letterSpacing: ".14em", textTransform: "uppercase"}}>
                  {running ? "● running" : stepIdx >= template.steps.length ? "✓ complete" : "○ idle"}
                </span>
              </div>
              <div className="log-stream">
                {logs.length === 0 && (
                  <div className="log-empty">Press <kbd>▶ Run</kbd> to start the workflow.</div>
                )}
                {logs.map((l, i) => (
                  <div key={i} className={"log-line " + l.kind}>
                    <span className="log-t">{l.t}</span>
                    <span className="log-msg">{l.msg}</span>
                  </div>
                ))}
                {stepIdx >= template.steps.length && (
                  <div className="log-output">
                    <div className="output-label">Output</div>
                    <pre>{template.output(input)}</pre>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container">
        <div className="cta-banner reveal">
          <div>
            <h2>Want one of these wired into your stack?</h2>
            <p className="lead" style={{marginTop: 12}}>We scope, prototype and ship workflows like this in 2-4 weeks.</p>
          </div>
          <div className="actions">
            <a href="#/contact" onClick={(e)=>{e.preventDefault(); navigate("contact");}} className="btn btn-accent">
              Book a call <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.DemoPage = DemoPage;
