// Tables / seating screen — find your table
const { useState: useStateTb } = React;

const GUEST_DB = [
  // realistic Turkish guest list, anonymized for the demo
  { name: 'Ayşe Yılmaz', table: 3 },
  { name: 'Mehmet Yılmaz', table: 3 },
  { name: 'Zeynep Kaya', table: 7 },
  { name: 'Selin Demir', table: 2 },
  { name: 'Ali Şahin', table: 5 },
  { name: 'Burak Öztürk', table: 5 },
  { name: 'Esra Aydın', table: 1 },
  { name: 'Hakan Doğan', table: 8 },
  { name: 'Merve Çelik', table: 4 },
  { name: 'Ozan Aksoy', table: 6 },
  { name: 'Pelin Tekin', table: 7 },
  { name: 'Sezen Yıldız', table: 2 },
  { name: 'Tuğçe Polat', table: 1 },
  { name: 'Volkan Erdem', table: 6 },
  { name: 'Yasemin Koç', table: 4 },
  { name: 'Cem İnan', table: 8 },
  { name: 'Deniz Aslan', table: 3 },
];

const TABLE_THEMES = [
  null,
  'Çocukluk sokağı', // 1
  'Lise',            // 2
  'Üniversite',      // 3
  'İlk işyeri',      // 4
  'Beyza ailesi',    // 5
  'Emin ailesi',     // 6
  'Komşular',        // 7
  'Yakın çevre',     // 8
];

function Tables({ onBack }) {
  const [q, setQ] = useStateTb('');
  const [selected, setSelected] = useStateTb(null);

  const norm = (s) => s.toLocaleLowerCase('tr-TR').replace(/[ışiğüöç]/g, c =>
    ({ı:'i','İ':'i',ş:'s',ğ:'g',ü:'u',ö:'o',ç:'c'}[c] || c));
  const matches = q.trim().length >= 2
    ? GUEST_DB.filter(g => norm(g.name).includes(norm(q.trim()))).slice(0, 6)
    : [];

  return (
    <ScreenShell onBack={onBack} kicker="03 · MASA DÜZENİ" title="masan hangisi">
      <p className="body-sm" style={{opacity:0.85, marginBottom:18}}>
        İsmini yaz, hangi masaya oturduğunu hemen görelim.
      </p>

      {/* Search */}
      <div style={tbStyles.searchWrap}>
        <input
          value={q}
          onChange={(e) => { setQ(e.target.value); setSelected(null); }}
          placeholder="adın veya soyadın"
          autoCapitalize="words"
          style={tbStyles.searchInput}
        />
      </div>

      {/* Results */}
      {q.trim().length >= 2 && (
        <div style={{marginTop:14}}>
          {matches.length === 0 ? (
            <div style={tbStyles.empty}>
              <div className="hand" style={{fontSize:24, marginBottom:4}}>hımm</div>
              <div className="body-sm" style={{opacity:0.85}}>
                İsmini bulamadık. Bize Whatsapp'ten yazabilir misin? Liste güncelleniyor olabilir.
              </div>
            </div>
          ) : matches.map(g => (
            <button key={g.name} onClick={() => setSelected(g)} style={tbStyles.result}>
              <div style={{flex:1, textAlign:'left'}}>
                <div className="hand" style={{fontSize:22, lineHeight:1}}>{g.name}</div>
                <div className="label-sm" style={{opacity:0.65, marginTop:4}}>MASA {g.table.toString().padStart(2,'0')} · {TABLE_THEMES[g.table]}</div>
              </div>
              <Icons.Arrow size={16}/>
            </button>
          ))}
        </div>
      )}

      {/* Selected card */}
      {selected && (
        <div style={tbStyles.selectedCard}>
          <div className="label" style={{color:'var(--burgundy)',opacity:0.7}}>SENİN MASAN</div>
          <div className="hand" style={{fontSize:74, color:'var(--burgundy)', lineHeight:0.9, margin:'6px 0 6px'}}>
            {selected.table.toString().padStart(2,'0')}
          </div>
          <div className="label" style={{color:'var(--burgundy)'}}>{TABLE_THEMES[selected.table]}</div>
          <div className="body-sm" style={{color:'var(--burgundy)', opacity:0.85, marginTop:14}}>
            {selected.name}
          </div>
        </div>
      )}

      {/* Floor plan */}
      <div style={{marginTop:30}}>
        <div className="label" style={{opacity:0.7, marginBottom:12}}>YERLEŞİM</div>
        <FloorPlan highlight={selected?.table} />
        <div className="body-sm" style={{opacity:0.7, marginTop:10, textAlign:'center'}}>
          ☼ Sahne karşı tarafta — masa numarası kapı tarafından sayılıyor.
        </div>
      </div>
    </ScreenShell>
  );
}

function FloorPlan({ highlight }) {
  // 8 round tables in two rows, "sahne" at top, "giriş" at bottom
  const tables = [
    [1,2,3,4],
    [5,6,7,8],
  ];
  return (
    <div style={{
      borderRadius:22,
      border:'1.5px solid rgba(255,185,201,0.3)',
      padding:'18px 14px 14px',
      background:'rgba(255,185,201,0.05)',
    }}>
      {/* Sahne */}
      <div style={{
        height:36,borderRadius:10,
        border:'1.5px dashed rgba(255,185,201,0.45)',
        display:'flex',alignItems:'center',justifyContent:'center',
        marginBottom:14,
      }}>
        <span className="label" style={{opacity:0.75}}>Sahne · DJ Booth</span>
      </div>

      {tables.map((row, ri) => (
        <div key={ri} style={{display:'flex',justifyContent:'space-around',marginBottom: ri === 0 ? 12 : 14}}>
          {row.map(n => {
            const on = highlight === n;
            return (
              <div key={n} style={{
                width:54,height:54,borderRadius:999,
                border:`2px solid ${on ? 'var(--pink)' : 'rgba(255,185,201,0.4)'}`,
                background: on ? 'var(--pink)' : 'transparent',
                color: on ? 'var(--burgundy)' : 'var(--pink)',
                display:'flex',alignItems:'center',justifyContent:'center',
                position:'relative',
                fontFamily:"'Permanent Marker',cursive",
                fontSize:22,
                boxShadow: on ? '0 0 0 6px rgba(255,185,201,0.25)' : 'none',
              }}>
                {n}
              </div>
            );
          })}
        </div>
      ))}

      {/* Giriş */}
      <div style={{
        height:32,borderRadius:10,
        border:'1.5px solid rgba(255,185,201,0.25)',
        display:'flex',alignItems:'center',justifyContent:'center',
      }}>
        <span className="label-sm" style={{opacity:0.65}}>GİRİŞ</span>
      </div>
    </div>
  );
}

const tbStyles = {
  searchWrap:{position:'relative'},
  searchInput:{
    width:'100%',
    background:'transparent',
    border:'1.5px solid rgba(255,185,201,0.4)',
    borderRadius:999,
    padding:'14px 20px',
    color:'var(--pink)',
    fontSize:15,
    fontFamily:"'Manrope',sans-serif",
    outline:'none',
    letterSpacing:'0.02em',
  },
  empty:{
    padding:'18px',
    borderRadius:14,
    background:'rgba(255,185,201,0.06)',
    border:'1px dashed rgba(255,185,201,0.3)',
  },
  result:{
    display:'flex',alignItems:'center',gap:10,
    width:'100%', padding:'14px 16px',
    borderRadius:16,
    border:'1px solid rgba(255,185,201,0.25)',
    color:'var(--pink)',
    marginBottom:8,
    background:'rgba(255,185,201,0.04)',
  },
  selectedCard:{
    marginTop:18,
    background:'var(--pink)',
    color:'var(--burgundy)',
    borderRadius:22,
    padding:'22px 22px 26px',
    textAlign:'center',
  },
};

window.Tables = Tables;