// Cedar Hills · Editorial collection · sign components
// Direction A — type-led editorial layout.
//
// Shared utilities (PALETTES, E, Removable, signVars) live in
// collection-shell.jsx, loaded before this file.

const { useState } = React;

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

  return (
    <div className="sign sign--a sign--welcome" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>EST · TWENTY TWENTY-SIX</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome"><E>Welcome</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>TO THE WEDDING OF</E></div>
          </Removable>
        )}
        <div className="sign-a__name-stack">
          <div className="sign-a__big-name"><E>MARGARET</E></div>
          <div className="sign-a__amp-big"><E>&amp;</E></div>
          <div className="sign-a__big-name"><E>DANIEL</E></div>
        </div>
        <div className="sign-a__sep" />
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-a__date">
              <E>SATURDAY</E><i>·</i>
              <E>MAY SIXTEENTH</E><i>·</i>
              <E>MMXXVI</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 · iced tea' },
];

function BarSign({ p, w = 540, h = 720 }) {
  const [shown, setShown] = useState({ eyebrow: true, pretitle: true, date: 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 · go · here' },
  ]);

  return (
    <div className="sign sign--a sign--bar" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>FROM THE BAR · WITH LOVE</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome sign-a__welcome--md"><E>Cheers</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>PLEASE HELP YOURSELF</E></div>
          </Removable>
        )}
        <div className="bar-menu">
          {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 className="sign-a__sep sign-a__sep--small" />
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-a__date">
              <E>MARGARET &amp; DANIEL</E><i>·</i>
              <E>MMXXVI</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

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

  return (
    <div className="sign sign--a sign--small sign--cards" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>WITH GRATITUDE</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome sign-a__welcome--sm"><E>Cards &amp; Gifts</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>FROM OUR FAMILY TO YOURS</E></div>
          </Removable>
        )}
        <div className="sign-a__body">
          <E>Leave your kind words</E><br />
          <E>and well-wishes here.</E>
        </div>
        <div className="sign-a__sep sign-a__sep--small" />
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-a__date">
              <E>MARGARET &amp; DANIEL</E><i>·</i>
              <E>MMXXVI</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

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

  return (
    <div className="sign sign--a sign--small sign--unplugged" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>A QUIET MOMENT</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome sign-a__welcome--sm"><E>Unplugged</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>AN INTENTIONAL CEREMONY</E></div>
          </Removable>
        )}
        <div className="sign-a__body">
          <E>We invite you to be</E><br />
          <E>fully present with us.</E><br /><br />
          <E>Please silence and put away</E><br />
          <E>phones until vows are said.</E>
        </div>
        <div className="sign-a__sep sign-a__sep--small" />
        {shown.foot && (
          <Removable onRemove={() => hide('foot')}>
            <div className="sign-a__date">
              <E>PHOTOGRAPHS TO FOLLOW</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── PHOTO ALBUM (QR) · 8×10″ framed ───────────
// A square QR slot in the center. Couple drops their album-upload QR; the
// printed/PDF version has the QR baked in. Same editorial type system as
// the other sign A pieces.
function AlbumSign({ p, w = 400, h = 500 }) {
  const [shown, setShown] = useState({ eyebrow: true, pretitle: true, caption: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <div className="sign sign--a sign--small sign--album" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>SHARE THE NIGHT</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome sign-a__welcome--xs"><E>Capture</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>OUR WEDDING ALBUM</E></div>
          </Removable>
        )}
        <div className="sign-a__qr-wrap">
          <QRUploader id="editorial-album" size={180} placeholder="Drop QR code" />
        </div>
        {shown.caption && (
          <Removable onRemove={() => hide('caption')}>
            <div className="sign-a__qr-caption">
              <E>Scan to add your photos to our wedding album.</E>
            </div>
          </Removable>
        )}
        <div className="sign-a__sep sign-a__sep--small" />
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-a__date">
              <E>MARGARET &amp; DANIEL</E><i>·</i>
              <E>MMXXVI</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── IN LOVING MEMORY · 8×10″ framed ───────────
const DEFAULT_MEMORY_NAMES_A = [
  { 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, pretitle: true, date: true });
  const [names, setNames] = useState(DEFAULT_MEMORY_NAMES_A);
  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--a sign--small sign--memory" style={signVars(p, w, h)}>
      <div className="sign__inner">
        {shown.eyebrow && (
          <Removable onRemove={() => hide('eyebrow')}>
            <div className="sign-a__eyebrow"><E>FOREVER WITH US</E></div>
          </Removable>
        )}
        <div className="sign-a__welcome sign-a__welcome--sm"><E>In Loving Memory</E></div>
        <div className="sign-a__rule" />
        {shown.pretitle && (
          <Removable onRemove={() => hide('pretitle')}>
            <div className="sign-a__pretitle"><E>THOSE WHO WALK WITH US TODAY</E></div>
          </Removable>
        )}
        <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 className="sign-a__sep sign-a__sep--small" />
        {shown.date && (
          <Removable onRemove={() => hide('date')}>
            <div className="sign-a__date">
              <E>MARGARET &amp; DANIEL</E><i>·</i>
              <E>MMXXVI</E>
            </div>
          </Removable>
        )}
      </div>
    </div>
  );
}

// ─────────── TABLE NUMBER · 4×6″ tented frame ───────────
// Single editable card. Couple uses the sibling stepper to advance
// through tables 1..N and prints/saves PDF for each one.
function TableNumberSign({ p, w = 360, h = 540 }) {
  const tn = useTableNumber('editorial-table');
  const [shown, setShown] = useState({ eyebrow: true, foot: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--a sign--small sign--tablenum" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-a__eyebrow"><E>TABLE</E></div>
            </Removable>
          )}
          <div className="sign-a__rule" />
          <div className="table-number">
            <div className="table-number__digits">{tn.n}</div>
          </div>
          <div className="sign-a__sep sign-a__sep--small" />
          {shown.foot && (
            <Removable onRemove={() => hide('foot')}>
              <div className="sign-a__date">
                <E>MARGARET &amp; DANIEL</E><i>·</i>
                <E>MMXXVI</E>
              </div>
            </Removable>
          )}
        </div>
      </div>
      <TableNumberStepper tn={tn} />
    </>
  );
}

// ─────────── SEATING CHART · 18×24″ poster ───────────
// Renders the guest list alphabetically by last name in a multi-column
// layout. The editable controls live OUTSIDE the .sign element (as a sibling)
// so html2canvas and print only see the sign itself.
function SeatingChart({ p, w = 540, h = 720 }) {
  const gl = useGuestList('editorial-seating');
  const [shown, setShown] = useState({ eyebrow: true, pretitle: true, date: true });
  const hide = (k) => setShown((s) => ({ ...s, [k]: false }));

  return (
    <>
      <div className="sign sign--a sign--seating" style={signVars(p, w, h)}>
        <div className="sign__inner">
          {shown.eyebrow && (
            <Removable onRemove={() => hide('eyebrow')}>
              <div className="sign-a__eyebrow"><E>PLEASE FIND YOUR SEAT</E></div>
            </Removable>
          )}
          <div className="sign-a__welcome sign-a__welcome--seating"><E>Seating</E></div>
          <div className="sign-a__rule" />
          {shown.pretitle && (
            <Removable onRemove={() => hide('pretitle')}>
              <div className="sign-a__pretitle"><E>BY LAST NAME · BY TABLE</E></div>
            </Removable>
          )}

          <div className="seating-list seating-list--editorial" 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 className="sign-a__sep sign-a__sep--small" />
          {shown.date && (
            <Removable onRemove={() => hide('date')}>
              <div className="sign-a__date">
                <E>MARGARET &amp; DANIEL</E><i>·</i>
                <E>MMXXVI</E>
              </div>
            </Removable>
          )}
        </div>
      </div>
      <GuestEditor gl={gl} />
    </>
  );
}

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