// Faithful mocks of the OnCatch admin app.
// Modeled directly on apps/admin/src/app/dashboard, /submissions, /submissions/[id].
// These are static; they intentionally use the admin's own visual language
// (system fonts, dense, utilitarian) — not the marketing palette.

const adminSubmissions = [
  { id: 1, ref: "OC-7F2K-91A", title: "Checkout fails when promo code is applied",          domain: "app.acme.io",     when: "12 min ago",  status: "new",       email: "ada@acme.io" },
  { id: 2, ref: "OC-7F2K-90M", title: "Filter dropdown is cut off on Safari iPad",          domain: "app.acme.io",     when: "38 min ago",  status: "new",       email: "rohan@figg.co" },
  { id: 3, ref: "OC-7F2K-89C", title: "Drag-and-drop in board view drops to wrong column",   domain: "boards.acme.io",  when: "1 h ago",     status: "triaged",   email: null },
  { id: 4, ref: "OC-7F2K-88B", title: "Avatar upload progress bar overflows on slow links",  domain: "app.acme.io",     when: "2 h ago",     status: "triaged",   email: "sara@nimbus.dev" },
  { id: 5, ref: "OC-7F2K-87Y", title: "Empty-state copy on /reports is wrong locale",        domain: "app.acme.io",     when: "4 h ago",     status: "forwarded", email: null },
  { id: 6, ref: "OC-7F2K-86Q", title: "Modal trap-focus broken when Esc is rebound",         domain: "boards.acme.io",  when: "Yesterday",   status: "forwarded", email: "kira@acme.io" },
  { id: 7, ref: "OC-7F2K-85R", title: "Webhook delivery failed twice this morning",          domain: "app.acme.io",     when: "Yesterday",   status: "closed",    email: null },
  { id: 8, ref: "OC-7F2K-84P", title: "Date picker resets to today after blur on Firefox",   domain: "app.acme.io",     when: "2 days ago",  status: "closed",    email: "leo@acme.io" },
];

const Pill = ({ status }) => (
  <span className={`adm-pill pill-${status}`}>{status}</span>
);

// --- Macbook-style window frame ---------------------------------
// The contents of Window are illustrative admin-app mockups, not real interactive
// content. We mark the whole tree inert + aria-hidden so that screen readers and
// keyboard users don't engage with the fake links / buttons. The outer <figure>
// carries an aria-label describing what the visual represents.
const Window = ({ url, children, height, label }) => (
  <figure
    className="win"
    role="img"
    aria-label={label || `Mockup of the OnCatch admin at ${url}`}
    style={{ margin: 0 }}
  >
    <div className="win-inner" aria-hidden="true" inert="">
      <div className="win-chrome">
        <div className="win-dots"><span /><span /><span /></div>
        <div className="win-url">{url}</div>
        <div style={{ width: 56 }} />
      </div>
      <div className="win-body" style={height ? { height } : undefined}>
        {children}
      </div>
    </div>
  </figure>
);

// --- Dashboard ---------------------------------------------------
const AdminDashboard = () => (
  <div className="admin">
    <div className="adm-header-row">
      <div>
        <h1 className="adm-title">Acme Quality</h1>
        <p className="adm-sub">team@acme.io</p>
      </div>
      <a style={{ color: "#6b7280", fontSize: 14 }}>Sign out</a>
    </div>

    <section className="adm-section">
      <h2 className="adm-h2">Domains</h2>
      <div className="adm-list">
        {[
          { origin: "https://app.acme.io",     notify: "team@acme.io",          installed: true  },
          { origin: "https://boards.acme.io",  notify: "boards-bugs@acme.io",   installed: true  },
          { origin: "https://staging.acme.io", notify: "no notification email", installed: false },
        ].map((d) => (
          <div className="adm-row" key={d.origin}>
            <div>
              <div className="adm-row-title">{d.origin}</div>
              <div className="adm-row-meta adm-row-meta-text">{d.notify}</div>
            </div>
            <span className={`adm-pill ${d.installed ? "pill-installed" : "pill-pending"}`}>
              {d.installed ? "● Installed" : "○ Not yet verified"}
            </span>
          </div>
        ))}
      </div>
    </section>

    <section className="adm-section">
      <h2 className="adm-h2" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span>Recent submissions <span style={{ color: "#6b7280", fontWeight: 400, fontSize: 14, marginLeft: 8 }}>(last 10)</span></span>
        <a style={{ color: "#be2a2a", fontSize: 14, fontWeight: 500 }}>View all →</a>
      </h2>
      <div className="adm-list">
        {adminSubmissions.slice(0, 6).map((s) => (
          <div className="adm-row adm-row-link" key={s.id}>
            <div>
              <div className="adm-row-title">{s.title}</div>
              <div className="adm-row-meta">{s.ref} · {s.when}</div>
            </div>
            <Pill status={s.status} />
          </div>
        ))}
      </div>
    </section>
  </div>
);

// --- Submissions index ------------------------------------------
const AdminSubmissionsIndex = () => {
  const total = 187;
  return (
    <div className="admin">
      <div className="adm-back">← Dashboard</div>
      <div className="adm-section">
        <h1 className="adm-title">Submissions</h1>
        <p className="adm-sub">{total} total reports</p>
      </div>
      <div className="adm-filters">
        <button className="adm-filter-btn active">All</button>
        <button className="adm-filter-btn">New (12)</button>
        <button className="adm-filter-btn">Triaged (28)</button>
        <button className="adm-filter-btn">Forwarded (54)</button>
        <button className="adm-filter-btn">Closed (93)</button>
        <span style={{ width: 16 }} />
        <button className="adm-filter-btn">All domains ▾</button>
      </div>

      <div className="adm-list">
        {adminSubmissions.map((s) => (
          <div className="adm-row adm-row-link" key={s.id}>
            <div>
              <div className="adm-row-title">{s.title}</div>
              <div className="adm-row-meta">
                <span className="ref">{s.ref}</span>
                <span className="adm-row-meta-text">{" · "}{s.domain}{" · "}{s.when}{s.email ? ` · ${s.email}` : ""}</span>
              </div>
            </div>
            <Pill status={s.status} />
          </div>
        ))}
      </div>

      <div className="adm-pagination">
        <span>Page 1 of 8</span>
        <span>
          <a>← Previous</a>
          <a>Next →</a>
        </span>
      </div>
    </div>
  );
};

// --- Submission detail ------------------------------------------
const AdminSubmissionDetail = () => (
  <div className="admin">
    <div className="adm-back">← Submissions</div>
    <div className="adm-detail-head">
      <div>
        <div className="adm-detail-meta">
          <span className="ref">OC-7F2K-91A</span> · app.acme.io · 4/27/2026, 2:14:08 PM
        </div>
        <h1 className="adm-detail-title">Checkout fails when promo code is applied</h1>
      </div>
      <div className="adm-triage">
        <button>new</button>
        <button className="active">triaged</button>
        <button>forwarded</button>
        <button>closed</button>
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Details</div>
      <div className="adm-card-body" style={{ whiteSpace: "pre-wrap", lineHeight: 1.6 }}>
{`I clicked "Apply" with a valid promo code (FALL2026-15) and the spinner runs forever. After about 30 seconds the page becomes unresponsive — couldn't even open the cart drawer. Refreshing fixes it temporarily but the same thing happens once I re-apply the code.

Browser: Chrome 134 on macOS Sonoma. Reproduces consistently.`}
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Reporter</div>
      <div className="adm-card-body">
        <div>Ada Lovelace</div>
        <div style={{ color: "#6b7280" }}>
          <a style={{ color: "#be2a2a" }}>ada@acme.io</a>
        </div>
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Attachments (3)</div>
      <div className="adm-card-body">
        <div className="adm-attachment-grid">
          <Attachment kind="screenshot" name="checkout-error.png" size="142 KB" idx={1} />
          <Attachment kind="screenshot" name="cart-drawer-frozen.png" size="98 KB" idx={2} />
          <Attachment kind="recording" name="repro.webm" duration="0:42" />
        </div>
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Browser metadata</div>
      <div className="adm-card-body no-pad">
        <pre className="adm-pre" style={{ borderRadius: 0, border: "none" }}>
{`{
  `}<span className="json-key">"url"</span>{`: `}<span className="json-str">"https://app.acme.io/checkout?cart=ck_8x2k"</span>{`,
  `}<span className="json-key">"referer"</span>{`: `}<span className="json-str">"https://app.acme.io/cart"</span>{`,
  `}<span className="json-key">"viewport"</span>{`: { `}<span className="json-key">"w"</span>{`: `}<span className="json-num">1440</span>{`, `}<span className="json-key">"h"</span>{`: `}<span className="json-num">900</span>{` },
  `}<span className="json-key">"screen"</span>{`: { `}<span className="json-key">"w"</span>{`: `}<span className="json-num">2560</span>{`, `}<span className="json-key">"h"</span>{`: `}<span className="json-num">1440</span>{` },
  `}<span className="json-key">"userAgent"</span>{`: `}<span className="json-str">"Mozilla/5.0 (Macintosh; Intel Mac OS X 14_4) Chrome/134.0"</span>{`,
  `}<span className="json-key">"timezone"</span>{`: `}<span className="json-str">"America/New_York"</span>{`,
  `}<span className="json-key">"timestamp"</span>{`: `}<span className="json-str">"2026-04-27T18:14:08.420Z"</span>{`
}`}
        </pre>
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Console log (8)</div>
      <div className="adm-card-body no-pad">
        <div className="adm-console">
          {[
            { ts: "18:13:54", lvl: "info",  msg: "[checkout] mount" },
            { ts: "18:13:54", lvl: "debug", msg: "[cart] hydrate cart=ck_8x2k items=3" },
            { ts: "18:14:02", lvl: "info",  msg: "[promo] applying code=FALL2026-15" },
            { ts: "18:14:03", lvl: "warn",  msg: "[promo] discount-svc 503 — retry 1/3" },
            { ts: "18:14:08", lvl: "warn",  msg: "[promo] discount-svc 503 — retry 2/3" },
            { ts: "18:14:13", lvl: "error", msg: "[promo] failed: timeout after 10s — fallback path missing" },
            { ts: "18:14:13", lvl: "error", msg: "Uncaught (in promise) TypeError: cannot read 'amount' of undefined" },
            { ts: "18:14:33", lvl: "info",  msg: "[oncatch] feedback widget opened" },
          ].map((e, i) => (
            <div className="adm-console-row" key={i}>
              <span className="ts">{e.ts}</span>
              <span className={`lvl-${e.lvl}`}>{e.lvl}</span>
              <span>{e.msg}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    <div className="adm-card">
      <div className="adm-card-head">Network errors (2)</div>
      <div className="adm-card-body no-pad">
        <pre className="adm-pre" style={{ borderRadius: 0, border: "none" }}>
{`[
  {
    `}<span className="json-key">"url"</span>{`: `}<span className="json-str">"https://api.acme.io/promo/apply?code=[REDACTED]"</span>{`,
    `}<span className="json-key">"status"</span>{`: `}<span className="json-num">503</span>{`,
    `}<span className="json-key">"duration_ms"</span>{`: `}<span className="json-num">10024</span>{`,
    `}<span className="json-key">"method"</span>{`: `}<span className="json-str">"POST"</span>{`
  },
  {
    `}<span className="json-key">"url"</span>{`: `}<span className="json-str">"https://api.acme.io/promo/apply?code=[REDACTED]"</span>{`,
    `}<span className="json-key">"status"</span>{`: `}<span className="json-num">503</span>{`,
    `}<span className="json-key">"duration_ms"</span>{`: `}<span className="json-num">10018</span>{`,
    `}<span className="json-key">"method"</span>{`: `}<span className="json-str">"POST"</span>{`
  }
]`}
        </pre>
      </div>
    </div>
  </div>
);

// --- Attachment placeholder ------------------------------------
const Attachment = ({ kind, name, size, duration, idx = 1 }) => {
  if (kind === "recording") {
    return (
      <div className="adm-attachment">
        <div className="ah">
          <span>{name}</span>
          <span>{duration}</span>
        </div>
        <div className="ab">
          <div className="placeholder-recording">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <circle cx="24" cy="24" r="22" stroke="white" strokeWidth="2" />
              <path d="M 19 17 L 32 24 L 19 31 Z" fill="white" />
            </svg>
            <div style={{ marginLeft: 12 }}>{duration} · webm</div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="adm-attachment">
      <div className="ah">
        <span>{name}</span>
        <span>{size}</span>
      </div>
      <div className="ab">
        <div className="placeholder-screenshot">
          <ScreenshotMock idx={idx} />
        </div>
      </div>
    </div>
  );
};

// Stylised "screenshot" content — looks like a real app frame with the bug visible.
const ScreenshotMock = ({ idx = 1 }) => (
  <svg viewBox="0 0 320 200" style={{ width: "100%", height: "100%" }}>
    <rect x="0" y="0" width="320" height="200" fill="white" />
    {/* top bar */}
    <rect x="0" y="0" width="320" height="22" fill="#FAF7F2" />
    <rect x="0" y="22" width="320" height="1" fill="#E5E7EB" />
    <circle cx="12" cy="11" r="3" fill="#C2410C" />
    <text x="22" y="14" fill="#1B1A17" style={{ fontSize: 8, fontWeight: 600 }}>Acme</text>
    <text x="60" y="14" fill="#6b7280" style={{ fontSize: 7 }}>Cart</text>
    <text x="82" y="14" fill="#1B1A17" style={{ fontSize: 7, fontWeight: 600 }}>Checkout</text>
    <rect x="284" y="6" width="28" height="11" rx="5" fill="#1B1A17" />
    <text x="298" y="14" textAnchor="middle" fill="white" style={{ fontSize: 6 }}>Pay</text>

    {/* main area */}
    <rect x="14" y="32" width="180" height="14" rx="2" fill="#F2EDE4" />
    <text x="20" y="42" fill="#1B1A17" style={{ fontSize: 8, fontWeight: 700 }}>Order summary</text>
    {[0, 1, 2].map((i) => (
      <g key={i}>
        <rect x="14" y={54 + i * 22} width="180" height="18" rx="3" fill="#FAF7F2" />
        <rect x="20" y={58 + i * 22} width="40" height="10" rx="2" fill="#E8E1D3" />
        <rect x="64" y={58 + i * 22} width="80" height="4" rx="1" fill="#E8E1D3" />
        <rect x="64" y={64 + i * 22} width="60" height="4" rx="1" fill="#E8E1D3" />
        <rect x="170" y={59 + i * 22} width="20" height="8" rx="1" fill="#E8E1D3" />
      </g>
    ))}
    {/* promo code area — error state */}
    <rect x="14" y="124" width="180" height="40" rx="3" fill={idx === 2 ? "#FEE2E2" : "#FAF7F2"} stroke={idx === 2 ? "#C2410C" : "#E8E1D3"} />
    <text x="20" y="138" fill="#1B1A17" style={{ fontSize: 7, fontWeight: 600 }}>Promo code</text>
    <rect x="20" y="142" width="120" height="14" rx="2" fill="white" stroke="#E8E1D3" />
    <text x="26" y="152" fill="#1B1A17" style={{ fontSize: 7 }}>FALL2026-15</text>
    <rect x="146" y="142" width="42" height="14" rx="2" fill="#1B1A17" />
    <text x="167" y="152" textAnchor="middle" fill="white" style={{ fontSize: 7 }}>{idx === 1 ? "Apply…" : "Apply"}</text>

    {/* spinner / error */}
    {idx === 1 && (
      <g transform="translate(176, 150)">
        <circle cx="0" cy="0" r="3" fill="none" stroke="white" strokeWidth="1" strokeDasharray="6 6" />
      </g>
    )}
    {idx === 2 && (
      <g>
        <text x="20" y="173" fill="#9A330A" style={{ fontSize: 7, fontWeight: 600 }}>⚠ Couldn't apply promo code · timed out</text>
      </g>
    )}

    {/* right side total */}
    <rect x="206" y="32" width="100" height="156" rx="3" fill="#FAF7F2" stroke="#E8E1D3" />
    <text x="214" y="48" fill="#1B1A17" style={{ fontSize: 8, fontWeight: 700 }}>Total</text>
    <text x="214" y="68" fill="#6b7280" style={{ fontSize: 7 }}>Subtotal</text>
    <text x="298" y="68" textAnchor="end" fill="#1B1A17" style={{ fontSize: 7 }}>$182.00</text>
    <text x="214" y="82" fill="#6b7280" style={{ fontSize: 7 }}>Discount</text>
    <text x="298" y="82" textAnchor="end" fill={idx === 2 ? "#9A330A" : "#1B1A17"} style={{ fontSize: 7 }}>{idx === 2 ? "—" : "$27.30"}</text>
    <text x="214" y="96" fill="#6b7280" style={{ fontSize: 7 }}>Tax</text>
    <text x="298" y="96" textAnchor="end" fill="#1B1A17" style={{ fontSize: 7 }}>$14.74</text>
    <line x1="214" y1="104" x2="298" y2="104" stroke="#E8E1D3" />
    <text x="214" y="118" fill="#1B1A17" style={{ fontSize: 9, fontWeight: 700 }}>Charged</text>
    <text x="298" y="118" textAnchor="end" fill="#1B1A17" style={{ fontSize: 9, fontWeight: 700 }}>$169.44</text>

    <rect x="214" y="160" width="84" height="22" rx="3" fill="#1B1A17" />
    <text x="256" y="174" textAnchor="end" fill="white" style={{ fontSize: 8, fontWeight: 600 }}>Place order</text>
    <text x="218" y="173" fill="white" style={{ fontSize: 8, fontWeight: 600 }}>$</text>

    {/* widget icon at bottom right */}
    <circle cx="304" cy="190" r="8" fill="#C2410C" />
    <text x="304" y="193" textAnchor="middle" fill="white" style={{ fontSize: 9, fontWeight: 700 }}>!</text>
  </svg>
);

Object.assign(window, {
  AdminDashboard, AdminSubmissionsIndex, AdminSubmissionDetail, Window,
});