// App — arranges the three table-card variations inside a design canvas.
// Each variation gets its own artboard showing a 4×2 mini-grid of mixed statuses
// so you can see how they read together, plus a separate artboard showing
// hover/pressed states.

const { DesignCanvas, DCSection, DCArtboard } = window;
const { TableCardV1, TableCardV2, TableCardV3 } = window;

// Shared dataset — same across all variations so they compare fairly
const TABLES = [
  { name: 'A1', status: 'occupied', amount: 84.50, occupiedMins: 42,  waiters: ['Marco Riva'],                                  flags: [] },
  { name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'],                                 flags: ['VIP'] },
  { name: 'A3', status: 'open',     amount: null,   occupiedMins: null, waiters: [],                                            flags: [] },
  { name: 'A4', status: 'alert',    amount: 56.00,  occupiedMins: 73, waiters: ['Luca Bianchi'],                                flags: ['Allergy'] },
  { name: 'B1', status: 'reserved', amount: null,   occupiedMins: null, waiters: ['Elena Costa'],                               flags: ['Birthday'] },
  { name: 'B2', status: 'occupied', amount: 212.80, occupiedMins: 115,waiters: ['Marco Riva', 'Sofia Greco', 'Luca Bianchi', 'Elena Costa'], flags: ['VIP'] },
  { name: 'B3', status: 'dirty',    amount: null,   occupiedMins: null, waiters: [],                                            flags: [] },
  { name: 'B4', status: 'occupied', amount: 38.00,  occupiedMins: 14, waiters: ['Luca Bianchi', 'Elena Costa'],                 flags: [] },
];

// Interaction states preview — shows the SAME card in 4 states side by side
const STATE_CARD = { name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'], flags: ['VIP'] };

function TableGrid({ Card }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 260px)',
      gap: 16,
      padding: 28,
      background: 'var(--bg)',
    }}>
      {TABLES.map((t, i) => <Card key={i} {...t} />)}
    </div>
  );
}

function StatesStrip({ Card, label }) {
  // Render four copies with simulated states by forcing CSS
  return (
    <div style={{ padding: 28, background: 'var(--bg)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 260px)', gap: 24,
      }}>
        {['Default', 'Hover', 'Pressed', 'Selected'].map((state) => (
          <div key={state} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{
              fontSize: 12, fontWeight: 600, color: 'var(--ink-500)',
              textTransform: 'uppercase', letterSpacing: 0.8,
            }}>{state}</div>
            <div className={`state-${state.toLowerCase()}`} style={{ position: 'relative' }}>
              <Card {...STATE_CARD} />
              {state === 'Selected' && (
                <div style={{
                  position: 'absolute', inset: -3,
                  borderRadius: 17,
                  boxShadow: '0 0 0 3px var(--occ-500)',
                  pointerEvents: 'none',
                }} />
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Style overrides to force hover/pressed on the middle two */}
      <style>{`
        .state-hover > button {
          box-shadow: var(--shadow-2) !important;
          transform: translateY(-2px) !important;
        }
        .state-pressed > button {
          box-shadow: inset 0 2px 4px rgba(16,20,24,0.08) !important;
          transform: translateY(1px) !important;
        }
      `}</style>
    </div>
  );
}

function App() {
  return (
    <DesignCanvas title="Table Card — Variations">
      <DCSection id="v1" title="Variation 1 — Left accent, stacked layout">
        <DCArtboard id="v1-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
          <TableGrid Card={TableCardV1} />
        </DCArtboard>
        <DCArtboard id="v1-states" label="Interactive states" width={1160} height={260}>
          <StatesStrip Card={TableCardV1} label="V1" />
        </DCArtboard>
      </DCSection>

      <DCSection id="v2" title="Variation 2 — Top stripe, big name">
        <DCArtboard id="v2-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
          <TableGrid Card={TableCardV2} />
        </DCArtboard>
        <DCArtboard id="v2-states" label="Interactive states" width={1160} height={260}>
          <StatesStrip Card={TableCardV2} label="V2" />
        </DCArtboard>
      </DCSection>

      <DCSection id="v3" title="Variation 3 — Plaque badge">
        <DCArtboard id="v3-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
          <TableGrid Card={TableCardV3} />
        </DCArtboard>
        <DCArtboard id="v3-states" label="Interactive states" width={1160} height={260}>
          <StatesStrip Card={TableCardV3} label="V3" />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);