// ============================================================
// SCREEN: ПРО КАМПАНІЮ
// Загальний опис, лор, гравці, нотатки ДМа
// campaignInfo зберігається per-campaign у PartyKit (c:{id}:info)
// ============================================================

const ScreenCampaign = ({
  campaignInfo, setCampaignInfo,
  isDM, isAdmin,
  campaigns, activeCampaignId,
  members, users, characters,
}) => {
  const { push } = useToast();
  if (!campaignInfo) return null;

  const campaign = (campaigns || []).find(c => c.id === activeCampaignId) || campaigns?.[0];
  const canEdit = isDM || isAdmin;

  // Поточні учасники кампанії
  const campMembers = members?.[activeCampaignId] || {};
  const memberList = Object.entries(campMembers).map(([uid, info]) => {
    const user = (users || []).find(u => u.id === uid);
    const charIds = info.charIds ? info.charIds.split(',').map(s => s.trim()).filter(Boolean) : [];
    const chars = (characters || []).filter(c => charIds.includes(c.id));
    return { uid, user, isDM: info.isDM, chars };
  });

  return (
    <>
      <SectionHeader
        title="Про кампанію"
        eyebrow={`${campaign?.icon || '⚔'} ${campaign?.name || ''}`}
      />

      <div className="icol ig-16">

        {/* ── Опис кампанії ── */}
        <Card title="Опис"
          action={canEdit ? (
            <span className="mono dim" style={{ fontSize: 10 }}>редагується ДМом</span>
          ) : null}>
          {canEdit ? (
            <textarea className="textarea" rows="5"
              placeholder={"Декілька речень про сеттінг, тон та головну мету кампанії…\n\nНаприклад: «Фадлебург — похмуре фентезі у занепадаючому портовому місті. Гравці — найманці, що розплутують змову гільдій.»"}
              value={campaignInfo.description || ''}
              onChange={e => setCampaignInfo(v => ({ ...v, description: e.target.value }))}/>
          ) : (
            <div className="script" style={{ fontSize: 14, color: 'var(--ink-1)', lineHeight: 1.6, whiteSpace: 'pre-wrap', minHeight: 40 }}>
              {campaignInfo.description || <span className="mono dim">Опис ще не додано.</span>}
            </div>
          )}
        </Card>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 16, alignItems: 'start' }}>

          {/* ── Лор та відомості ── */}
          <Card title="Лор та відомості" tag="спільний простір">
            <textarea className="textarea" rows="18"
              placeholder={"# Відомі факти\n\n— ...\n\n## Фракції та організації\n\n## Загадки\n1. ...\n\n## Нотатки\n..."}
              value={campaignInfo.lore || ''}
              onChange={e => setCampaignInfo(v => ({ ...v, lore: e.target.value }))}
              style={{ minHeight: 320 }}/>
          </Card>

          {/* ── Права колонка ── */}
          <div className="icol ig-16">

            {/* Учасники */}
            <Card title="Гравці" tag={`${memberList.length} учасників`}>
              {memberList.length === 0 ? (
                <div className="mono dim" style={{ fontSize: 11, padding: '8px 0' }}>
                  Учасників ще не додано в адмін-панелі.
                </div>
              ) : memberList.map(({ uid, user, isDM: memberIsDM, chars }) => (
                <div key={uid} style={{ padding: '8px 0', borderBottom: '1px solid var(--line-2)' }}>
                  <div className="flex ica ig-8 mb-4">
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                      background: memberIsDM ? 'var(--gold-2)' : 'var(--bg-3)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, fontFamily: 'var(--font-display)', color: memberIsDM ? 'var(--bg-0)' : 'var(--ink-2)',
                    }}>
                      {(user?.name || uid).slice(0, 2).toUpperCase()}
                    </div>
                    <div className="igrow">
                      <div style={{ fontSize: 12, fontWeight: 600 }}>{user?.name || uid}</div>
                      <div className="mono dim" style={{ fontSize: 10 }}>{memberIsDM ? '👑 ДМ' : user?.role || 'Гравець'}</div>
                    </div>
                  </div>
                  {chars.length > 0 && chars.map(c => (
                    <div key={c.id} className="flex ica ig-6" style={{ paddingLeft: 36, marginBottom: 2 }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                        background: 'var(--bg-3)', overflow: 'hidden',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 9, fontFamily: 'var(--font-display)', color: 'var(--ink-2)',
                      }}>
                        {c.portrait
                          ? <img src={c.portrait} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                          : c.name.slice(0, 2).toUpperCase()
                        }
                      </div>
                      <div>
                        <div style={{ fontSize: 11, fontWeight: 500 }}>{c.name}</div>
                        <div className="mono dim" style={{ fontSize: 9 }}>{c.klass} {c.level} · {c.race}</div>
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </Card>

            {/* Нотатки ДМа — тільки ДМ/адмін */}
            {canEdit && (
              <Card title="Нотатки ДМа" tag="тільки для ДМа">
                <textarea className="textarea" rows="8"
                  placeholder={"Приховані нотатки:\n— плани ворогів\n— майбутні сюжетні гаки\n— секрети NPC\n— що гравці ще не знають…"}
                  value={campaignInfo.dmNotes || ''}
                  onChange={e => setCampaignInfo(v => ({ ...v, dmNotes: e.target.value }))}/>
              </Card>
            )}

          </div>
        </div>

      </div>
    </>
  );
};

window.ScreenCampaign = ScreenCampaign;