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

// ─────────────── Atomic blocks ───────────────

const BlockHandle = () => (
  <div className="block-handles">
    <button title="Click to add a block"><Icons.Plus /></button>
    <button title="Drag to move" className="drag"><Icons.Drag /></button>
  </div>
);

const Block = ({ children, className = "" }) => (
  <div className={`block ${className}`}>
    <BlockHandle />
    {children}
  </div>
);

const H1 = ({ children }) => <Block><h1 className="h1">{children}</h1></Block>;
const H2 = ({ children }) => <Block><h2 className="h2">{children}</h2></Block>;
const H3 = ({ children }) => <Block><h3 className="h3">{children}</h3></Block>;

const P = ({ children }) => <Block><p className="paragraph">{children}</p></Block>;

const Muted = ({ children }) => <span className="muted">{children}</span>;
const Code = ({ children }) => <code className="inline-code">{children}</code>;

const Bullet = ({ children, mark = "•" }) => (
  <Block><div className="bullet"><span className="mark">{mark}</span><span>{children}</span></div></Block>
);

const Todo = ({ children, done = false }) => {
  const [d, setD] = useState(done);
  return (
    <Block>
      <div className={`todo ${d ? 'done' : ''}`}>
        <span className="box" onClick={() => setD(!d)}>
          <svg viewBox="0 0 12 12" fill="none" stroke="white" strokeWidth="2"><path d="M2.5 6L5 8.5 9.5 3.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
        <span className="label">{children}</span>
      </div>
    </Block>
  );
};

const Divider = () => <Block><hr className="divider" /></Block>;

const Callout = ({ icon = "💡", color = "", children }) => (
  <Block><div className={`callout ${color}`}><span className="ico">{icon}</span><div className="body">{children}</div></div></Block>
);

const Toggle = ({ summary, defaultOpen = false, children }) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <Block>
      <div className={`toggle ${open ? 'open' : ''}`}>
        <div className="toggle-head" onClick={() => setOpen(!open)}>
          <span className="twist"><Icons.Chevron /></span>
          <span>{summary}</span>
        </div>
        <div className="toggle-body">{children}</div>
      </div>
    </Block>
  );
};

const Quote = ({ children }) => <Block><div className="quote">{children}</div></Block>;

const CodeBlock = ({ lang = "python", children }) => (
  <Block><pre className="code-block" data-lang={lang}>{children}</pre></Block>
);

const Columns = ({ cols = 2, children }) => (
  <Block><div className={`columns cols-${cols}`}>{children}</div></Block>
);

const SubpageLink = ({ icon, title, onClick }) => (
  <Block>
    <div className="subpage-link" onClick={onClick}>
      <span className="pico">{icon}</span>
      <span className="title">{title}</span>
    </div>
  </Block>
);

const AddComment = () => (
  <div className="add-comment">
    <span className="ava">S</span>
    <span>Add a comment…</span>
  </div>
);

const SlashHint = () => (
  <div className="slash-hint">Type <span className="kbd">/</span> for commands</div>
);

// ─────────────── Property grid (under page title) ───────────────
const PropertyGrid = ({ rows }) => (
  <div className="prop-grid">
    {rows.map((r, i) => (
      <React.Fragment key={i}>
        <div className="prop-key"><span style={{width: 14, display:'inline-flex'}}>{r.icon}</span>{r.key}</div>
        <div className="prop-val">{r.value}</div>
      </React.Fragment>
    ))}
  </div>
);

const Tag = ({ color = "gray", children }) => (
  <span className={`tag ${color}`}>{children}</span>
);

const StatusPill = ({ color = "gray", children }) => (
  <span className={`status-pill ${color}`}><span className="dot" />{children}</span>
);

// ─────────────── Database — Table ───────────────
const DBTable = ({ title, views = [], activeView = 0, columns, rows, calc }) => (
  <div className="db">
    {title && <div className="db-title">{title}</div>}
    <div className="db-tabs">
      {views.map((v, i) => (
        <div key={i} className={`db-tab ${i === activeView ? 'active' : ''}`}>
          <span style={{display:'inline-flex'}}>{v.icon}</span>
          <span>{v.label}</span>
        </div>
      ))}
      <div className="add-view"><Icons.Plus /></div>
      <div className="right">
        <button><Icons.Filter /> Filter</button>
        <button><Icons.Sort /> Sort</button>
        <button><Icons.Search /></button>
        <button><Icons.Dots /></button>
        <button className="new">New</button>
        <button className="new-drop"><Icons.ChevronD /></button>
      </div>
    </div>
    <table className="db-table">
      <thead>
        <tr>{columns.map((c, i) => (
          <th key={i} style={c.width ? { width: c.width } : undefined}>
            <div className="col">
              <span style={{color:'var(--n-text-faint)', display:'inline-flex'}}>{c.icon}</span>
              <span>{c.label}</span>
            </div>
          </th>
        ))}</tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i}>{columns.map((c, j) => (
            <td key={j}>{c.render ? c.render(r) : r[c.key]}</td>
          ))}</tr>
        ))}
      </tbody>
    </table>
    <div className="db-table">
      <div className="new-row">+ New</div>
    </div>
    {calc && <div className="db-calc"><span>{calc}</span><span>Count {rows.length}</span></div>}
  </div>
);

// ─────────────── Database — Gallery ───────────────
const Gallery = ({ title, views = [], activeView = 0, cards }) => (
  <div className="db">
    {title && <div className="db-title">{title}</div>}
    <div className="db-tabs">
      {views.map((v, i) => (
        <div key={i} className={`db-tab ${i === activeView ? 'active' : ''}`}>
          <span style={{display:'inline-flex'}}>{v.icon}</span>
          <span>{v.label}</span>
        </div>
      ))}
      <div className="add-view"><Icons.Plus /></div>
      <div className="right">
        <button><Icons.Filter /> Filter</button>
        <button><Icons.Sort /> Sort</button>
        <button><Icons.Search /></button>
        <button className="new">New</button>
        <button className="new-drop"><Icons.ChevronD /></button>
      </div>
    </div>
    <div className="gallery">
      {cards.map((c, i) => (
        <div key={i} className="card" onClick={c.onClick}>
          <div className={`preview ${c.preview || ''}`}>
            <div className="gridlines"></div>
            <div className="glyph">{c.glyph}</div>
          </div>
          <div className="body">
            <div className="ctitle"><span className="pico">{c.icon}</span>{c.title}</div>
            {c.subtitle && <div className="csub">{c.subtitle}</div>}
            {c.tags && <div className="ctags">{c.tags.map((t, j) => <Tag key={j} color={t.color}>{t.label}</Tag>)}</div>}
          </div>
        </div>
      ))}
    </div>
  </div>
);

// Expose
Object.assign(window, {
  Block, BlockHandle, H1, H2, H3, P, Muted, Code, Bullet, Todo, Divider,
  Callout, Toggle, Quote, CodeBlock, Columns, SubpageLink, AddComment,
  SlashHint, PropertyGrid, Tag, StatusPill, DBTable, Gallery
});