import { html, useState, useEffect } from './core.js';

export const Card = ({ title, right, children }) => html`
  <section class="card">
    ${title && html`
      <div class="row spread" style="margin-bottom:12px">
        <h2 style="margin:0">${title}</h2>
        ${right}
      </div>`}
    ${children}
  </section>`;

export const Stat = ({ label, value, sub, tone }) => html`
  <section class="card">
    <h2>${label}</h2>
    <div class="stat" style=${tone ? `color:var(--${tone})` : null}>${value}</div>
    ${sub && html`<div class="stat-sub">${sub}</div>`}
  </section>`;

export const Dot = ({ tone = 'idle', live }) => html`
  <span class=${`dot ${tone}${live && tone === 'ok' ? ' live' : ''}`}></span>`;

export const Pill = ({ tone, children }) => html`<span class=${`pill ${tone || ''}`}>${children}</span>`;

export const Bar = ({ value, max, tone }) => {
  const width = max > 0 ? Math.min(100, (Number(value) / Number(max)) * 100) : 0;
  return html`<div class=${`bar ${tone || ''}`}><span style=${`width:${width}%`}></span></div>`;
};

export const Skeleton = ({ rows = 3 }) => html`
  <div class="grid" style="gap:8px">
    ${Array.from({ length: rows }, (_, i) => html`
      <div key=${i} class="skel" style=${`width:${90 - i * 12}%`}></div>`)}
  </div>`;

export const Empty = ({ children }) => html`<div class="empty">${children}</div>`;

export function Toast({ toast }) {
  const [shown, setShown] = useState(toast);
  useEffect(() => {
    setShown(toast);
    if (!toast) return undefined;
    const timer = setTimeout(() => setShown(null), toast.sticky ? 12000 : 4500);
    return () => clearTimeout(timer);
  }, [toast]);
  if (!shown) return null;
  return html`<div class=${`toast ${shown.tone || ''}`}>${shown.message}</div>`;
}

// Anything that changes production asks twice. The second click is a different
// button label so muscle memory cannot carry you through both.
export function Confirm({ label, confirmLabel, onConfirm, danger, disabled, busy }) {
  const [armed, setArmed] = useState(false);
  useEffect(() => {
    if (!armed) return undefined;
    const timer = setTimeout(() => setArmed(false), 5000);
    return () => clearTimeout(timer);
  }, [armed]);

  if (busy) return html`<button class="sm" disabled>working…</button>`;
  if (!armed) {
    return html`<button class=${`sm ${danger ? 'danger' : ''}`} disabled=${disabled}
      onClick=${() => setArmed(true)}>${label}</button>`;
  }
  return html`
    <span class="row" style="gap:6px">
      <button class=${`sm ${danger ? 'danger' : 'primary'}`}
        onClick=${() => { setArmed(false); onConfirm(); }}>${confirmLabel || 'confirm'}</button>
      <button class="sm" onClick=${() => setArmed(false)}>cancel</button>
    </span>`;
}