// Cedar Hills · Meadow collection · sign components
// Direction D — modern garden. Serif uppercase names with a delicate
// script "and" between, generous breathing room, sage default palette.
//
// Shared utilities (PALETTES, E, Removable, signVars, useGuestList,
// useTableNumber, QRUploader) live in collection-shell.jsx + seating.jsx.

const { useState } = React;

// ─────────── Small helper — script "and" with em-rules ───────────
function AmpScript({ word = 'and' }) {
  return (
    <span className="sign-d__amp">
      <span className="sign-d__amp-rule" aria-hidden="true" />
      <span className="sign-d__amp-script">{word}</span>
      <span className="sign-d__amp-rule" aria-hidden="true" />
    </span>
  );
}

// ─────────── WELCOME · 18×24″ poster ───────────
function WelcomeSign({ p, w = 540, h = 720 }) {
  const [shown, setShown] = useState({ eyebrow: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--d sign--m-welcome" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>WELCOME</E></div>
              <div><E>TO THE WEDDING OF</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__name-stack">
          <div className="sign-d__big-name"><E>MARGARET</E></div>
          <AmpScript />
          <div className="sign-d__big-name"><E>DANIEL</E></div>
        </div>
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-d__date">
              <E>MAY 16, 2026</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── BAR · 18×24″ poster ───────────
const DEFAULT_BAR_ITEMS = [
  { id: 'm', name: 'THE MARGARET', desc: 'gin · cucumber · elderflower · mint' },
  { id: 'd', name: 'THE DANIEL',   desc: 'rye · maple · orange bitters' },
  { id: 'w', name: 'WINE & BUBBLY', desc: 'cabernet · sauvignon blanc · prosecco' },
  { id: 'b', name: 'BEER & SOFT',   desc: 'pilsner · IPA · seltzer · lemonade' },
];

function BarSign({ p, w = 540, h = 720 }) {
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const [items, setItems] = useState(DEFAULT_BAR_ITEMS);
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));
  const removeItem = (id) => setItems((arr) => arr.filter((it) => it.id !== id));
  const addItem = () => setItems((arr) => [
    ...arr,
    { id: 'x' + Date.now(), name: 'NEW POUR', desc: 'ingredients here' },
  ]);

  return (
    <div className="sign sign--d sign--m-bar" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>FROM THE BAR</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__welcome"><E>CHEERS</E></div>
        <div className="bar-menu bar-menu--meadow">
          {items.map((it) => (
            <div key={it.id} className="bar-item">
              <div className="bar-item__name"><E>{it.name}</E></div>
              <div className="bar-item__desc"><E>{it.desc}</E></div>
              <button type="button" className="bar-item__x" onClick={() => removeItem(it.id)} aria-label="Remove this drink" title="Remove this drink">
                <span aria-hidden="true">×</span>
              </button>
            </div>
          ))}
          <button type="button" className="bar-menu__add" onClick={addItem}>+ Add a drink</button>
        </div>
      </div>
    </div>
  );
}

// ─────────── CARDS & GIFTS · 8×10″ framed ───────────
function CardsSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--d sign--m-small sign--m-cards" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>WITH GRATITUDE</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__stacked-titles">
          <div className="sign-d__big-name sign-d__big-name--sm"><E>CARDS</E></div>
          <AmpScript />
          <div className="sign-d__big-name sign-d__big-name--sm"><E>GIFTS</E></div>
        </div>
        {shown.foot && (
          <Removable onRemove={() => hide('foot')}>
            <div className="sign-d__date sign-d__date--sm">
              <E>LEAVE YOUR WELL-WISHES HERE</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── UNPLUGGED · 8×10″ framed ───────────
function UnpluggedSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--d sign--m-small sign--m-unplugged" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>A QUIET MOMENT</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__welcome sign-d__welcome--sm"><E>UNPLUGGED</E></div>
        <div className="sign-d__body">
          <E>We invite you to be</E><br />
          <span className="sign-d__body-it">fully present with us.</span><br /><br />
          <E>Please silence and put away</E><br />
          <E>phones until vows are said.</E>
        </div>
        {shown.foot && (
          <Removable onRemove={() => hide('foot')}>
            <div className="sign-d__date sign-d__date--sm">
              <E>PHOTOGRAPHS TO FOLLOW</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── IN LOVING MEMORY · 8×10″ framed ───────────
const DEFAULT_MEMORY_NAMES = [
  { id: 'n1', name: 'Eleanor Whitfield' },
  { id: 'n2', name: 'James Patrick Hayes' },
  { id: 'n3', name: 'Rose Margaret Aldridge' },
];

function MemorySign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const [names, setNames] = useState(DEFAULT_MEMORY_NAMES);
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));
  const removeName = (id) => setNames((arr) => arr.filter((n) => n.id !== id));
  const addName = () => setNames((arr) => [...arr, { id: 'x' + Date.now(), name: 'Their Name Here' }]);

  return (
    <div className="sign sign--d sign--m-small sign--m-memory" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>FOREVER WITH US</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__stacked-titles">
          <div className="sign-d__big-name sign-d__big-name--sm"><E>IN</E></div>
          <span className="sign-d__amp"><span className="sign-d__amp-rule" aria-hidden="true" /><span className="sign-d__amp-script">loving</span><span className="sign-d__amp-rule" aria-hidden="true" /></span>
          <div className="sign-d__big-name sign-d__big-name--sm"><E>MEMORY</E></div>
        </div>
        <div className="memory-list">
          {names.map((n) => (
            <div key={n.id} className="memory-item">
              <div className="memory-item__name"><E>{n.name}</E></div>
              <button type="button" className="memory-item__x" onClick={() => removeName(n.id)} aria-label="Remove this name" title="Remove this name">
                <span aria-hidden="true">×</span>
              </button>
            </div>
          ))}
          <button type="button" className="memory-list__add" onClick={addName}>+ Add a name</button>
        </div>
      </div>
    </div>
  );
}

// ─────────── TABLE NUMBER · 4×6″ tented frame ───────────
function TableNumberSign({ p, w = 360, h = 540 }) {
  const tn = useTableNumber('meadow-table');
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--d sign--m-small sign--m-tablenum" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-d__eyebrow">
                <div><E>TABLE</E></div>
              </div>
            </Removable>
          )}
          <div className="table-number">
            <div className="table-number__digits">{tn.n}</div>
          </div>
        </div>
      </div>
      <TableNumberStepper tn={tn} />
    </>
  );
}

// ─────────── PHOTO ALBUM (QR) · 8×10″ framed ───────────
function AlbumSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, caption: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--d sign--m-small sign--m-album" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-d__eyebrow">
              <div><E>SHARE THE DAY</E></div>
            </div>
          </Removable>
        )}
        <div className="sign-d__welcome sign-d__welcome--sm"><E>OUR ALBUM</E></div>
        <div className="sign-d__qr-wrap">
          <QRUploader id="meadow-album" size={170} placeholder="Drop QR code" />
        </div>
        {shown.caption && (
          <Removable onRemove={() => hide('caption')}>
            <div className="sign-d__body sign-d__body--qr">
              <span className="sign-d__body-it">Scan to add your photos to our wedding album.</span>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── SEATING CHART · 18×24″ poster ───────────
function SeatingChart({ p, w = 540, h = 720 }) {
  const gl = useGuestList('meadow-seating');
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--d sign--m-seating" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-d__eyebrow">
                <div><E>PLEASE FIND YOUR SEAT</E></div>
              </div>
            </Removable>
          )}
          <div className="sign-d__welcome"><E>SEATING</E></div>

          <div className="seating-list seating-list--meadow" style={seatingListStyle(gl.count)}>
            {gl.sortedGuests.map((g) => (
              <div key={g.id} className="seating-row">
                <span className="seating-row__name">{g.last}, {g.first}</span>
                <span className="seating-row__dots" aria-hidden="true" />
                <span className="seating-row__table">{g.table}</span>
              </div>
            ))}
          </div>

        </div>
      </div>
      <GuestEditor gl={gl} />
    </>
  );
}

Object.assign(window, { WelcomeSign, BarSign, CardsSign, UnpluggedSign, AlbumSign, MemorySign, TableNumberSign, SeatingChart });
window.CollectionWelcomes = window.CollectionWelcomes || {};
window.CollectionWelcomes.meadow = WelcomeSign;