// ModelProfileEditorial.jsx
// Editorial 3-column profile per the SAGUO reference:
//   ARTISTS list (left) | name + portrait + scroll cue (center) | FILMOGRAPHY (right)
// Two thin black vertical rules separate the columns. The center column
// holds an oversized brand mark above the portrait — the brand sits on the model.

const editorialStyles = {
  page: {
    background: '#F2F2F2',
    minHeight: 'calc(100vh - 80px)',
  },
  back: {
    maxWidth: 1280, margin: '0 auto', padding: '24px 36px 0',
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#000',
    display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
  },
  shell: {
    maxWidth: 1280, margin: '0 auto',
    display: 'grid', gridTemplateColumns: '220px 1fr 280px',
    minHeight: 'calc(100vh - 140px)',
    paddingTop: 28,
  },

  // Column wrapper — borders are inserted as the column itself
  colLeft: {
    borderRight: '1px solid #000',
    padding: '40px 30px',
    display: 'flex', flexDirection: 'column',
  },
  colCenter: {
    padding: '40px 36px 60px',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center',
    position: 'relative',
  },
  colRight: {
    borderLeft: '1px solid #000',
    padding: '40px 30px',
    display: 'flex', flexDirection: 'column',
  },

  // ── Column headers — uppercase eyebrow tracked
  colTitle: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000', textAlign: 'center', marginBottom: 80,
  },

  // ── Artists list
  artistList: {
    display: 'flex', flexDirection: 'column', gap: 30,
    marginTop: 60,
  },
  artistItem: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 16,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000', textAlign: 'center', cursor: 'pointer',
    transition: 'opacity .2s, font-weight .2s',
    background: 'transparent', border: 'none', padding: 0,
    width: '100%',
  },
  artistItemActive: { fontWeight: 700 },
  artistItemDim: { opacity: 0.45 },

  // ── Center: brand mark + portrait + scroll cue
  brandMark: {
    fontFamily: "'Pretendard'", fontWeight: 700,
    fontSize: 48, letterSpacing: '-0.03em',
    color: '#000', marginBottom: 28,
    display: 'flex', alignItems: 'center', gap: 8,
  },
  brandDot: { width: 8, height: 8, background: '#000', borderRadius: '50%' },
  portraitWrap: {
    width: '100%', maxWidth: 460,
    aspectRatio: '4 / 5',
    background: '#E8E5E1',
    overflow: 'hidden',
    border: '1px solid #000',
  },
  portrait: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
  scrollCue: {
    marginTop: 36, fontFamily: "'Pretendard'", fontSize: 14,
    color: '#000',
  },

  // ── Filmography (right column)
  rightHead: {
    textAlign: 'center', paddingBottom: 18,
    borderBottom: '1px solid #000',
    marginBottom: 14,
  },
  bigName: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 20,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    color: '#000',
  },
  nameKoRight: {
    marginTop: 4,
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 13,
    letterSpacing: '-0.03em', color: '#555',
  },
  tierBadge: {
    display: 'inline-block', marginTop: 10,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    background: '#000', color: '#F2F2F2', padding: '3px 8px',
  },
  instagramLink: {
    display: 'block', marginTop: 8,
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
    letterSpacing: '-0.03em', color: '#555', textDecoration: 'none',
  },
  specsTable: {
    marginTop: 16, paddingTop: 14, paddingBottom: 14,
    borderTop: '1px solid #000', borderBottom: '1px solid #000',
    display: 'flex', flexDirection: 'column', gap: 6,
  },
  specRow: {
    display: 'grid', gridTemplateColumns: '70px 1fr', gap: 8, alignItems: 'baseline',
  },
  specLabel: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
  },
  specVal: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000',
  },
  categoryTag: {
    marginTop: 14,
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
  },

  filmGroup: { marginTop: 16, display: 'flex', flexDirection: 'column', gap: 4 },
  filmHeading: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000',
    marginBottom: 6, marginTop: 4,
  },
  filmRow: {
    display: 'grid', gridTemplateColumns: '40px 1fr', gap: 8,
    alignItems: 'baseline',
    paddingBottom: 3,
  },
  filmYear: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000', textAlign: 'left',
  },
  filmTitle: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000', lineHeight: 1.55,
  },

  adBlock: { marginTop: 16 },
  adLabel: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000', marginBottom: 6,
  },
  adList: {
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 11,
    letterSpacing: '-0.03em', color: '#000', lineHeight: 1.7,
  },
};

function ModelProfileEditorial({ models, current, onSelect, onBack }) {
  const m = current;
  if (!m) return null;
  return (
    <section style={editorialStyles.page}>
      <button style={editorialStyles.back} onClick={onBack}>
        <span style={{ width: 6, height: 6, background: '#000', borderRadius: '50%', display: 'inline-block' }}></span>
        Back to roster
      </button>

      <div style={editorialStyles.shell}>
        {/* ── LEFT — Artists ───────────────────────── */}
        <aside style={editorialStyles.colLeft}>
          <div style={editorialStyles.colTitle}>ARTISTS</div>
          <div style={editorialStyles.artistList}>
            {models.map(a => {
              const isActive = a.id === m.id;
              return (
                <button key={a.id}
                        onClick={() => onSelect && onSelect(a)}
                        style={{
                          ...editorialStyles.artistItem,
                          ...(isActive ? editorialStyles.artistItemActive : editorialStyles.artistItemDim),
                        }}>
                  {a.name}
                </button>
              );
            })}
          </div>
        </aside>

        {/* ── CENTER — Mark + portrait ─────────────── */}
        <main style={editorialStyles.colCenter}>
          <div style={editorialStyles.brandMark}>
            SAGUO
          </div>
          <div style={editorialStyles.portraitWrap}>
            {m.image
              ? <img src={m.image} alt={m.name} style={editorialStyles.portrait} />
              : <div style={{ ...editorialStyles.portrait, background: m._tone || 'linear-gradient(160deg, #c8c1b3 0%, #88837a 60%, #5d594f 100%)' }} />
            }
          </div>
          <div style={editorialStyles.scrollCue}>↓</div>
        </main>

        {/* ── RIGHT — Filmography ──────────────────── */}
        <aside style={editorialStyles.colRight}>
          <div style={editorialStyles.colTitle}>FILMOGRAPHY</div>

          <div style={editorialStyles.rightHead}>
            <div style={editorialStyles.bigName}>{m.name}</div>
            {m.nameKo && <div style={editorialStyles.nameKoRight}>{m.nameKo}</div>}
            {m.tier && <span style={editorialStyles.tierBadge}>{m.tier}</span>}
            {m.instagram && (
              <a
                href={`https://instagram.com/${m.instagram.replace('@','')}`}
                target="_blank"
                rel="noopener noreferrer"
                style={editorialStyles.instagramLink}
              >
                {m.instagram}
              </a>
            )}
          </div>

          {/* Specs */}
          <div style={editorialStyles.specsTable}>
            {m.height && (
              <div style={editorialStyles.specRow}>
                <span style={editorialStyles.specLabel}>Height</span>
                <span style={editorialStyles.specVal}>{m.height}</span>
              </div>
            )}
            {m.weight && (
              <div style={editorialStyles.specRow}>
                <span style={editorialStyles.specLabel}>Weight</span>
                <span style={editorialStyles.specVal}>{m.weight}</span>
              </div>
            )}
            {m.shoes && (
              <div style={editorialStyles.specRow}>
                <span style={editorialStyles.specLabel}>Shoes</span>
                <span style={editorialStyles.specVal}>{m.shoes}</span>
              </div>
            )}
          </div>
          {m.category && <div style={editorialStyles.categoryTag}>{m.category}</div>}

          {/* Drama / Film section */}
          {m.drama && m.drama.length > 0 && (
            <div style={editorialStyles.filmGroup}>
              <div style={editorialStyles.filmHeading}>Drama · Film</div>
              {m.drama.map((d, i) => (
                <div key={i} style={editorialStyles.filmRow}>
                  <div style={editorialStyles.filmYear}>{d.year || ''}</div>
                  <div style={editorialStyles.filmTitle}>{d.title}</div>
                </div>
              ))}
            </div>
          )}

          {/* Ad / Portfolio list */}
          {m.ads && m.ads.length > 0 && (
            <div style={editorialStyles.adBlock}>
              <div style={editorialStyles.adLabel}>Portfolio</div>
              <div style={editorialStyles.adList}>{m.ads.join(', ')}</div>
            </div>
          )}
        </aside>
      </div>
    </section>
  );
}

window.ModelProfileEditorial = ModelProfileEditorial;