/* Detailed macOS-window mockup of the HuginnDB app */

const mockupStyles = `
.hg-window {
  background: oklch(0.13 0.012 250);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-sans);
  color: oklch(0.92 0.005 250);
  font-size: 13px;
  height: 640px;
  display: flex;
  flex-direction: column;
  border: 1px solid oklch(0.22 0.012 250);
}
.hg-titlebar {
  height: 36px;
  background: oklch(0.16 0.012 250);
  border-bottom: 1px solid oklch(0.22 0.012 250);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  flex-shrink: 0;
}
.hg-traffic { display: flex; gap: 8px; margin-right: 8px; }
.hg-traffic span {
  width: 12px; height: 12px; border-radius: 50%;
  display: block;
}
.hg-traffic .c { background: oklch(0.62 0.18 25); }
.hg-traffic .y { background: oklch(0.78 0.16 80); }
.hg-traffic .g { background: oklch(0.70 0.16 145); }
.hg-titlebar-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.55 0.012 250);
  letter-spacing: 0.04em;
}
.hg-body { flex: 1; display: flex; min-height: 0; }

/* ─ Sidebar ─ */
.hg-sidebar {
  width: 220px;
  background: oklch(0.145 0.012 250);
  border-right: 1px solid oklch(0.22 0.012 250);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.hg-sidebar-head {
  padding: 14px 14px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(0.50 0.012 250);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hg-sidebar-head .plus {
  color: oklch(0.65 0.012 250);
  font-size: 13px;
  cursor: pointer;
}
.hg-conn {
  padding: 6px 14px 6px 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  cursor: pointer;
  position: relative;
}
.hg-conn::before {
  content: "";
  position: absolute;
  left: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(0.45 0.012 250);
}
.hg-conn.connected::before { background: oklch(0.70 0.14 155); box-shadow: 0 0 6px oklch(0.70 0.14 155); }
.hg-conn.active { background: oklch(0.20 0.014 250); color: oklch(0.96 0.005 250); }
.hg-conn .drv {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: oklch(0.50 0.012 250);
  padding: 1px 5px;
  border: 1px solid oklch(0.28 0.012 250);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hg-tree {
  flex: 1;
  border-top: 1px solid oklch(0.22 0.012 250);
  margin-top: 8px;
  padding: 10px 0;
  overflow: hidden;
}
.hg-tree-node {
  padding: 4px 14px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: oklch(0.85 0.005 250);
}
.hg-tree-node.depth-1 { padding-left: 24px; }
.hg-tree-node.depth-2 { padding-left: 38px; color: oklch(0.78 0.008 250); }
.hg-tree-node.active { background: oklch(0.20 0.014 250); color: oklch(0.96 0.005 250); }
.hg-tree-node .ico {
  width: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: oklch(0.50 0.012 250);
}
.hg-tree-node .pk {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  padding: 0 4px;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 2px;
  margin-left: auto;
}
.hg-tree-node .typ {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: oklch(0.50 0.012 250);
}

/* ─ Main ─ */
.hg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hg-tabs {
  height: 34px;
  background: oklch(0.145 0.012 250);
  border-bottom: 1px solid oklch(0.22 0.012 250);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.hg-tab {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: oklch(0.60 0.012 250);
  border-right: 1px solid oklch(0.22 0.012 250);
  cursor: pointer;
  font-family: var(--font-mono);
}
.hg-tab.active {
  background: oklch(0.13 0.012 250);
  color: oklch(0.95 0.005 250);
  position: relative;
}
.hg-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
}
.hg-tab .x { color: oklch(0.45 0.012 250); }
.hg-tab.new { color: oklch(0.45 0.012 250); }

/* ─ SQL Editor ─ */
.hg-sql {
  background: oklch(0.13 0.012 250);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  border-bottom: 1px solid oklch(0.22 0.012 250);
  height: 220px;
  overflow: hidden;
  position: relative;
}
.hg-sql .line { display: flex; gap: 16px; }
.hg-sql .ln {
  color: oklch(0.40 0.012 250);
  width: 16px;
  text-align: right;
  user-select: none;
  flex-shrink: 0;
  font-size: 11.5px;
}
.hg-sql .code { white-space: pre; }
.tk-kw { color: oklch(0.72 0.15 290); }     /* keyword: violet */
.tk-fn { color: oklch(0.78 0.13 80); }      /* function: amber */
.tk-str { color: oklch(0.74 0.13 145); }    /* string: green */
.tk-num { color: oklch(0.78 0.13 35); }     /* number: orange */
.tk-id { color: oklch(0.78 0.12 220); }     /* identifier: light blue */
.tk-cm { color: oklch(0.48 0.012 250); font-style: italic; }
.tk-op { color: oklch(0.70 0.005 250); }
.tk-tbl { color: oklch(0.92 0.005 250); }

.hg-sql .cursor {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1.2s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hg-runbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26px;
  background: oklch(0.16 0.012 250);
  border-top: 1px solid oklch(0.22 0.012 250);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: oklch(0.55 0.012 250);
}
.hg-runbar .run {
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ─ Results grid ─ */
.hg-results { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hg-results-head {
  display: flex;
  border-bottom: 1px solid oklch(0.22 0.012 250);
  background: oklch(0.145 0.012 250);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(0.55 0.012 250);
  flex-shrink: 0;
}
.hg-results-head .col {
  padding: 8px 12px;
  border-right: 1px solid oklch(0.22 0.012 250);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hg-results-head .col.idx { width: 38px; padding: 8px 0; justify-content: center; }
.hg-results-row {
  display: flex;
  border-bottom: 1px solid oklch(0.20 0.012 250);
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(0.88 0.005 250);
}
.hg-results-row .col {
  padding: 8px 12px;
  border-right: 1px solid oklch(0.20 0.012 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-results-row .col.idx { width: 38px; padding: 8px 0; text-align: center; color: oklch(0.45 0.012 250); }
.hg-results-row.selected { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.hg-results-row .num { color: oklch(0.78 0.13 35); }
.hg-results-row .null { color: oklch(0.48 0.012 250); font-style: italic; }

.hg-statusbar {
  height: 26px;
  background: oklch(0.16 0.012 250);
  border-top: 1px solid oklch(0.22 0.012 250);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: oklch(0.55 0.012 250);
  gap: 16px;
  flex-shrink: 0;
}
.hg-statusbar .ok { color: oklch(0.72 0.14 155); }
.hg-statusbar .accent { color: var(--accent); }
.hg-statusbar .pull-right { margin-left: auto; }

/* Cell-editor floating popout */
.hg-celleditor {
  position: absolute;
  right: 24px;
  bottom: 60px;
  width: 320px;
  height: 220px;
  background: oklch(0.155 0.012 250);
  border: 1px solid oklch(0.30 0.012 250);
  border-radius: 8px;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 5;
}
.hg-celleditor-head {
  padding: 8px 12px;
  border-bottom: 1px solid oklch(0.24 0.012 250);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: oklch(0.60 0.012 250);
  background: oklch(0.17 0.012 250);
}
.hg-celleditor-head .lang {
  margin-left: auto;
  background: oklch(0.20 0.014 250);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hg-celleditor-body {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  overflow: hidden;
  white-space: pre;
}
.hg-celleditor-foot {
  padding: 6px 12px;
  border-top: 1px solid oklch(0.24 0.012 250);
  font-family: var(--font-mono);
  font-size: 10px;
  color: oklch(0.50 0.012 250);
  display: flex;
  gap: 14px;
}
.hg-celleditor-foot .key {
  background: oklch(0.22 0.012 250);
  padding: 1px 5px;
  border-radius: 2px;
  color: oklch(0.75 0.012 250);
}

@media (max-width: 880px) {
  .hg-window { height: 480px; font-size: 11px; }
  .hg-sidebar { width: 140px; }
  .hg-celleditor { display: none; }
}
@media (max-width: 600px) {
  .hg-sidebar { display: none; }
  .hg-sql { height: 160px; }
}
`;

const HuginnMockup = () => {
  return (
    <React.Fragment>
      <style>{mockupStyles}</style>
      <div className="hg-window">
        {/* Title bar */}
        <div className="hg-titlebar">
          <div className="hg-traffic">
            <span className="c"></span>
            <span className="y"></span>
            <span className="g"></span>
          </div>
          <div className="hg-titlebar-title">huginn · chinook.db · sqlite</div>
        </div>

        <div className="hg-body">
          {/* Sidebar */}
          <div className="hg-sidebar">
            <div className="hg-sidebar-head">
              Connections <span className="plus">+</span>
            </div>
            <div className="hg-conn">
              prod-warehouse <span className="drv">pg</span>
            </div>
            <div className="hg-conn connected active">
              chinook <span className="drv">sql</span>
            </div>
            <div className="hg-conn">
              analytics <span className="drv">my</span>
            </div>
            <div className="hg-conn">
              local-dev <span className="drv">pg</span>
            </div>

            <div className="hg-tree">
              <div className="hg-tree-node">
                <span className="ico">▾</span> chinook.db
              </div>
              <div className="hg-tree-node depth-1">
                <span className="ico">▾</span> tables
              </div>
              <div className="hg-tree-node depth-2"><span className="ico">▦</span> Album <span className="typ">347</span></div>
              <div className="hg-tree-node depth-2"><span className="ico">▦</span> Artist <span className="typ">275</span></div>
              <div className="hg-tree-node depth-2 active"><span className="ico">▦</span> Invoice <span className="typ">412</span></div>
              <div className="hg-tree-node depth-2"><span className="ico">▦</span> InvoiceLine</div>
              <div className="hg-tree-node depth-2"><span className="ico">▦</span> Track</div>
              <div className="hg-tree-node depth-2"><span className="ico">▦</span> Customer</div>
              <div className="hg-tree-node depth-1">
                <span className="ico">▸</span> views
              </div>
              <div className="hg-tree-node depth-1">
                <span className="ico">▸</span> indexes
              </div>
            </div>
          </div>

          {/* Main */}
          <div className="hg-main">
            {/* Tabs */}
            <div className="hg-tabs">
              <div className="hg-tab active">query.sql <span className="x">×</span></div>
              <div className="hg-tab">top-artists.sql <span className="x">×</span></div>
              <div className="hg-tab">Invoice <span className="x">×</span></div>
              <div className="hg-tab new">+</div>
            </div>

            {/* SQL editor */}
            <div className="hg-sql">
              <div className="line">
                <span className="ln">1</span>
                <span className="code">
                  <span className="tk-cm">-- top customers by total spend</span>
                </span>
              </div>
              <div className="line">
                <span className="ln">2</span>
                <span className="code">
                  <span className="tk-kw">SELECT</span> c.<span className="tk-id">FirstName</span> <span className="tk-op">||</span> <span className="tk-str">' '</span> <span className="tk-op">||</span> c.<span className="tk-id">LastName</span> <span className="tk-kw">AS</span> <span className="tk-id">customer</span>,
                </span>
              </div>
              <div className="line">
                <span className="ln">3</span>
                <span className="code">
                  {"       "}<span className="tk-fn">SUM</span>(i.<span className="tk-id">Total</span>) <span className="tk-kw">AS</span> <span className="tk-id">lifetime_spend</span>,
                </span>
              </div>
              <div className="line">
                <span className="ln">4</span>
                <span className="code">
                  {"       "}<span className="tk-fn">COUNT</span>(<span className="tk-op">*</span>) <span className="tk-kw">AS</span> <span className="tk-id">invoices</span>
                </span>
              </div>
              <div className="line">
                <span className="ln">5</span>
                <span className="code">
                  <span className="tk-kw">FROM</span> <span className="tk-tbl">Customer</span> c
                </span>
              </div>
              <div className="line">
                <span className="ln">6</span>
                <span className="code">
                  <span className="tk-kw">JOIN</span> <span className="tk-tbl">Invoice</span> i <span className="tk-kw">ON</span> i.<span className="tk-id">CustomerId</span> <span className="tk-op">=</span> c.<span className="tk-id">CustomerId</span>
                </span>
              </div>
              <div className="line">
                <span className="ln">7</span>
                <span className="code">
                  <span className="tk-kw">GROUP BY</span> c.<span className="tk-id">CustomerId</span>
                </span>
              </div>
              <div className="line">
                <span className="ln">8</span>
                <span className="code">
                  <span className="tk-kw">ORDER BY</span> <span className="tk-id">lifetime_spend</span> <span className="tk-kw">DESC</span>
                </span>
              </div>
              <div className="line">
                <span className="ln">9</span>
                <span className="code">
                  <span className="tk-kw">LIMIT</span> <span className="tk-num">10</span>;<span className="cursor"></span>
                </span>
              </div>

              <div className="hg-runbar">
                <span className="run">⌃ Ctrl + Enter · Run</span>
                <span>chinook.db</span>
                <span>9 lines · 287 chars</span>
                <span style={{ marginLeft: "auto" }}>sql · utf-8</span>
              </div>
            </div>

            {/* Results */}
            <div className="hg-results">
              <div className="hg-results-head">
                <div className="col idx">#</div>
                <div className="col" style={{ flex: 1.4 }}>customer <span style={{ color: "var(--accent)", opacity: 0.7 }}>↑</span></div>
                <div className="col" style={{ flex: 1 }}>lifetime_spend</div>
                <div className="col" style={{ flex: 0.7 }}>invoices</div>
                <div className="col" style={{ flex: 1 }}>last_seen</div>
                <div className="col" style={{ flex: 1.3 }}>metadata</div>
              </div>

              <div className="hg-results-row">
                <div className="col idx">1</div>
                <div className="col" style={{ flex: 1.4 }}>Helena Holý</div>
                <div className="col num" style={{ flex: 1 }}>49.62</div>
                <div className="col num" style={{ flex: 0.7 }}>7</div>
                <div className="col" style={{ flex: 1 }}>2026‑03‑11</div>
                <div className="col" style={{ flex: 1.3 }}>{`{"tier":"gold"}`}</div>
              </div>
              <div className="hg-results-row selected">
                <div className="col idx">2</div>
                <div className="col" style={{ flex: 1.4 }}>Richard Cunningham</div>
                <div className="col num" style={{ flex: 1 }}>47.62</div>
                <div className="col num" style={{ flex: 0.7 }}>7</div>
                <div className="col" style={{ flex: 1 }}>2026‑02‑28</div>
                <div className="col" style={{ flex: 1.3 }}>{`{"tier":"gold","co…`}</div>
              </div>
              <div className="hg-results-row">
                <div className="col idx">3</div>
                <div className="col" style={{ flex: 1.4 }}>Luís Gonçalves</div>
                <div className="col num" style={{ flex: 1 }}>45.62</div>
                <div className="col num" style={{ flex: 0.7 }}>7</div>
                <div className="col" style={{ flex: 1 }}>2026‑03‑02</div>
                <div className="col" style={{ flex: 1.3 }}><span className="null">NULL</span></div>
              </div>
              <div className="hg-results-row">
                <div className="col idx">4</div>
                <div className="col" style={{ flex: 1.4 }}>Hugh O'Reilly</div>
                <div className="col num" style={{ flex: 1 }}>43.62</div>
                <div className="col num" style={{ flex: 0.7 }}>7</div>
                <div className="col" style={{ flex: 1 }}>2026‑01‑19</div>
                <div className="col" style={{ flex: 1.3 }}>{`{"tier":"silver"}`}</div>
              </div>
              <div className="hg-results-row">
                <div className="col idx">5</div>
                <div className="col" style={{ flex: 1.4 }}>Frank Ralston</div>
                <div className="col num" style={{ flex: 1 }}>43.62</div>
                <div className="col num" style={{ flex: 0.7 }}>6</div>
                <div className="col" style={{ flex: 1 }}>2026‑02‑08</div>
                <div className="col" style={{ flex: 1.3 }}>{`{"tier":"silver"}`}</div>
              </div>
              <div className="hg-results-row">
                <div className="col idx">6</div>
                <div className="col" style={{ flex: 1.4 }}>Victor Stevens</div>
                <div className="col num" style={{ flex: 1 }}>42.62</div>
                <div className="col num" style={{ flex: 0.7 }}>6</div>
                <div className="col" style={{ flex: 1 }}>2026‑02‑22</div>
                <div className="col" style={{ flex: 1.3 }}>{`{"tier":"silver"}`}</div>
              </div>
            </div>

            {/* Floating cell editor (Monaco-style) */}
            <div className="hg-celleditor">
              <div className="hg-celleditor-head">
                <span>cell · metadata</span>
                <span className="lang">json</span>
              </div>
              <div className="hg-celleditor-body">{`{
  "tier": "gold",
  "country": "CZ",
  "since": "2024-08-12",
  "tags": [
    "high-value",
    "newsletter"
  ],
  "ltv": 47.62
}`}</div>
              <div className="hg-celleditor-foot">
                <span><span className="key">F11</span> fullscreen</span>
                <span><span className="key">⌘ S</span> save</span>
                <span><span className="key">esc</span> close</span>
              </div>
            </div>

            {/* Status bar */}
            <div className="hg-statusbar">
              <span className="ok">● connected</span>
              <span>10 rows</span>
              <span>·</span>
              <span>executed in <span className="accent">12 ms</span></span>
              <span className="pull-right">utf‑8 · sqlite 3.45 · history: 247</span>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

window.HuginnMockup = HuginnMockup;