/* Mini-mockups réalistes des 3 types de board, fidèles au design system H-Board */
const { useState: useStateM } = React;

// ─────────────────────────────────────────────────────────────
// CANVAS mockup — sticky notes, shapes, connectors
// ─────────────────────────────────────────────────────────────
function CanvasMockup({ scale = 1, compact = false }) {
  return (
    <div className="hb-mock hb-mock-canvas" style={{ transform: `scale(${scale})` }}>
      {/* Dot grid */}
      <div className="hb-mock-canvas__grid" />

      {/* Floating toolbar */}
      <div className="hb-mock-canvas__toolbar">
        {['mouse-pointer-2', 'sticky-note', 'square', 'circle', 'pen-tool', 'type', 'image'].map((n, i) => (
          <button key={n} className={`hb-mock-canvas__tool ${i === 1 ? 'is-active' : ''}`}>
            <i data-lucide={n} />
          </button>
        ))}
      </div>

      {/* Canvas chrome — top bar */}
      <div className="hb-mock-canvas__topbar">
        <div className="hb-mock-canvas__crumb">
          <span className="hb-mock-canvas__grad hb-mock-canvas__grad--blue"><i data-lucide="layout-grid" /></span>
          <span>Roadmap Q2</span>
        </div>
        <div className="hb-mock-canvas__avatars">
          <span style={{ background: '#60A5FA' }}>SA</span>
          <span style={{ background: '#A78BFA' }}>JL</span>
          <span style={{ background: '#34D399' }}>MT</span>
        </div>
      </div>

      {/* Elements */}
      <div className="hb-mock-canvas__note hb-mock-canvas__note--yellow" style={{ top: '22%', left: '18%' }}>
        <span className="hb-mock-canvas__note-tag" /> Onboarding
        <span className="hb-mock-canvas__note-sub">Refonte flow signup</span>
      </div>
      <div className="hb-mock-canvas__note hb-mock-canvas__note--pink" style={{ top: '26%', left: '50%' }}>
        <span className="hb-mock-canvas__note-tag" /> Recherche
        <span className="hb-mock-canvas__note-sub">5 entretiens utilisateurs</span>
      </div>
      <div className="hb-mock-canvas__note hb-mock-canvas__note--blue" style={{ top: '58%', left: '30%' }}>
        <span className="hb-mock-canvas__note-tag" /> Design
        <span className="hb-mock-canvas__note-sub">Wireframes v2</span>
      </div>
      <div className="hb-mock-canvas__shape" style={{ top: '56%', left: '62%' }}>
        <i data-lucide="rocket" />
      </div>

      {/* Connectors */}
      <svg className="hb-mock-canvas__lines" viewBox="0 0 400 240" preserveAspectRatio="none">
        <path d="M 110 75 C 160 75, 180 90, 230 90" stroke="#3B82F6" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
        <path d="M 150 160 C 200 160, 230 150, 270 150" stroke="#8B5CF6" strokeWidth="1.5" fill="none" />
      </svg>

      {/* Cursor */}
      <div className="hb-mock-canvas__cursor" style={{ top: '40%', left: '45%' }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="#3B82F6"><path d="M4 2 L20 12 L12 13 L9 22 Z" /></svg>
        <span>Salma</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// KANBAN mockup
// ─────────────────────────────────────────────────────────────
function KanbanMockup({ scale = 1 }) {
  const cols = [
    { title: 'À faire', color: '#60A5FA', cards: [
      { title: 'Écrire la landing page', prio: 'medium', tag: 'Marketing' },
      { title: 'Audit accessibilité', prio: 'low', tag: 'QA' },
    ]},
    { title: 'En cours', color: '#FBBF24', cards: [
      { title: 'Intégration Stripe', prio: 'high', tag: 'Backend', due: '18 avr.' },
      { title: 'Refonte dashboard', prio: 'medium', tag: 'Design' },
      { title: 'Hook useBoard', prio: 'low', tag: 'Frontend' },
    ]},
    { title: 'Terminé', color: '#34D399', cards: [
      { title: 'Auth SSO Google', prio: 'medium', tag: 'Backend' },
    ]},
  ];
  return (
    <div className="hb-mock hb-mock-kanban" style={{ transform: `scale(${scale})` }}>
      <div className="hb-mock-kanban__head">
        <div className="hb-mock-canvas__crumb">
          <span className="hb-mock-canvas__grad hb-mock-canvas__grad--purple"><i data-lucide="columns-3" /></span>
          <span>Sprint 14</span>
        </div>
        <div className="hb-mock-kanban__filter"><i data-lucide="filter" /> Filtrer</div>
      </div>
      <div className="hb-mock-kanban__cols">
        {cols.map(col => (
          <div key={col.title} className="hb-mock-kanban__col" style={{ borderTop: `3px solid ${col.color}` }}>
            <div className="hb-mock-kanban__colhead">
              <span className="hb-mock-kanban__dot" style={{ background: col.color }} />
              <span className="hb-mock-kanban__title">{col.title}</span>
              <span className="hb-mock-kanban__count">{col.cards.length}</span>
            </div>
            {col.cards.map((c, i) => (
              <div key={i} className="hb-mock-kanban__card">
                <div className="hb-mock-kanban__tags">
                  <span className={`hb-mock-kanban__prio is-${c.prio}`}>{c.prio === 'high' ? '●' : c.prio === 'medium' ? '◐' : '○'}</span>
                  <span className="hb-mock-kanban__chip">{c.tag}</span>
                </div>
                <div className="hb-mock-kanban__cardtitle">{c.title}</div>
                {c.due && <div className="hb-mock-kanban__meta"><i data-lucide="calendar" /> {c.due}</div>}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DATABASE mockup
// ─────────────────────────────────────────────────────────────
function DatabaseMockup({ scale = 1 }) {
  const rows = [
    { name: 'Refonte navigation', status: 'En cours', assign: 'SA', prio: 'Urgent', date: '22 avr.' },
    { name: 'API webhooks v2', status: 'Revue', assign: 'JL', prio: 'Haute', date: '25 avr.' },
    { name: 'Documentation SDK', status: 'À faire', assign: 'MT', prio: 'Moyenne', date: '30 avr.' },
    { name: 'Tests e2e Cypress', status: 'En cours', assign: 'SA', prio: 'Basse', date: '02 mai' },
    { name: 'Export CSV', status: 'Terminé', assign: 'EK', prio: 'Moyenne', date: '15 avr.' },
  ];
  const colors = {
    'En cours': { bg: 'rgba(59,130,246,.18)', fg: '#60A5FA' },
    'Revue': { bg: 'rgba(139,92,246,.18)', fg: '#A78BFA' },
    'À faire': { bg: 'rgba(107,114,128,.18)', fg: '#9CA3AF' },
    'Terminé': { bg: 'rgba(16,185,129,.18)', fg: '#34D399' },
  };
  const prios = {
    'Urgent': '#EF4444', 'Haute': '#F97316', 'Moyenne': '#EAB308', 'Basse': '#6B7280',
  };
  return (
    <div className="hb-mock hb-mock-db">
      <div className="hb-mock-kanban__head">
        <div className="hb-mock-canvas__crumb">
          <span className="hb-mock-canvas__grad hb-mock-canvas__grad--emerald"><i data-lucide="table-2" /></span>
          <span>Backlog produit</span>
        </div>
        <div className="hb-mock-db__toolbar">
          <span><i data-lucide="list-filter" /> 3 filtres</span>
          <span><i data-lucide="arrow-down-up" /> Trier</span>
        </div>
      </div>
      <div className="hb-mock-db__table">
        <div className="hb-mock-db__row hb-mock-db__row--head">
          <span><i data-lucide="text" /> Nom</span>
          <span><i data-lucide="tag" /> Statut</span>
          <span><i data-lucide="user" /> Assigné</span>
          <span><i data-lucide="flag" /> Priorité</span>
          <span><i data-lucide="calendar" /> Échéance</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="hb-mock-db__row">
            <span className="hb-mock-db__name"><i data-lucide="file-text" /> {r.name}</span>
            <span><em style={{ background: colors[r.status].bg, color: colors[r.status].fg }}>{r.status}</em></span>
            <span><b className="hb-mock-db__av">{r.assign}</b></span>
            <span><i className="hb-mock-db__dot" style={{ background: prios[r.prio] }} /> {r.prio}</span>
            <span className="hb-mock-db__date">{r.date}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CanvasMockup, KanbanMockup, DatabaseMockup });