// ── TribeTab ──────────────────────────────────────────────────────────────
// Oat-realm org concept. Intentionally minimal — name, leader, members, notes.
// Per the design conversation, mechanics (clans, totems, hunts, standing) are
// reserved for a later iteration; don't pre-build UI for things we haven't
// agreed on. Mirrors the *interaction shape* of GuildTab (auto-bootstrap on
// first DM visit, dialog-confirmed deletes) without copying its data model.
const TribeTab = ({ campaign, isDM }) => {
  const [tribe, setTribe] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [modal, setModal] = React.useState(null);
  const [memberForm, setMemberForm] = React.useState({ name:'', role:'Member', playerId:'' });
  const [editForm, setEditForm] = React.useState(null);

  const reload = React.useCallback(async () => {
    setLoading(true);
    try {
      const t = await api.tribes.get(campaign.id).catch(err => err.status === 404 ? null : Promise.reject(err));
      setTribe(t);
      setError(null);
    } catch (err) {
      setError(err.message || 'Failed to load tribe.');
    } finally {
      setLoading(false);
    }
  }, [campaign.id]);

  React.useEffect(() => { reload(); }, [reload]);

  const create = async () => {
    if (!isDM) return;
    await api.tribes.create(campaign.id, {
      name: campaign.name + ' Tribe',
      leaderName: '', notes: '',
    });
    await reload();
  };

  const save = async (patch) => {
    if (!isDM || !tribe) return;
    await api.tribes.update(campaign.id, patch);
    await reload();
  };

  const addMember = async () => {
    if (!memberForm.name.trim()) return;
    await api.tribes.members.add(campaign.id, {
      name: memberForm.name.trim(),
      role: memberForm.role,
      playerId: memberForm.playerId || null,
    });
    setMemberForm({ name:'', role:'Member', playerId:'' });
    setModal(null);
    await reload();
  };

  const updateMember = async () => {
    if (!editForm) return;
    await api.tribes.members.update(campaign.id, editForm.id, {
      name: editForm.name, role: editForm.role,
      playerId: editForm.playerId || null,
    });
    setEditForm(null);
    await reload();
  };

  const removeMember = async (m) => {
    const ok = await window.dialog.confirm({
      title: 'Remove member?',
      message: `Remove ${m.name} from the tribe?`,
      danger: true,
      confirmLabel: 'Remove',
    });
    if (!ok) return;
    await api.tribes.members.delete(campaign.id, m.id);
    await reload();
  };

  if (loading) return <div style={{color:'#9a9793', padding:24}}>Loading tribe…</div>;
  if (error)   return <div style={{color:'#c53030', padding:24}}>{error}</div>;

  if (!tribe) {
    return (
      <div style={{padding:32, textAlign:'center', color:'#9a9793'}}>
        <div style={{fontSize:48, marginBottom:12}}>🏞</div>
        <div style={{fontSize:18, color:'#e8e6e3', marginBottom:6}}>No tribe yet</div>
        <div style={{fontSize:13, marginBottom:20}}>This realm uses a Tribe instead of a Guild.</div>
        {isDM && (
          <button onClick={create} style={{...cvStyles.addBtn, background:'rgba(201,162,39,0.15)', borderColor:'#c9a227', color:'#c9a227'}}>
            + Found Tribe
          </button>
        )}
      </div>
    );
  }

  return (
    <div>
      {/* Header */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:20, flexWrap:'wrap', gap:12}}>
        <div>
          <h2 style={{margin:'0 0 4px', color:'#e8e6e3', fontFamily:"'Cinzel', serif"}}>{tribe.name}</h2>
          <div style={{fontSize:13, color:'#9a9793'}}>
            Leader: <strong style={{color:'#e8e6e3'}}>{tribe.leaderName || '—'}</strong>
            <span style={{color:'#4a4a52', margin:'0 8px'}}>·</span>
            {tribe.members.length} {tribe.members.length === 1 ? 'member' : 'members'}
          </div>
        </div>
        {isDM && (
          <div style={{display:'flex', gap:8}}>
            <button style={cvStyles.addBtn} onClick={()=>setModal('edit')}>Edit Tribe</button>
            <button style={{...cvStyles.addBtn, background:'rgba(201,162,39,0.12)', borderColor:'#c9a227', color:'#c9a227'}} onClick={()=>setModal('addMember')}>+ Add Member</button>
          </div>
        )}
      </div>

      {/* Members */}
      <div style={{background:'#16161b', border:'1px solid #2a2a32', borderRadius:8, padding:16, marginBottom:16}}>
        <div style={{fontSize:12, color:'#6b6966', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:10}}>Members</div>
        {tribe.members.length === 0 ? (
          <div style={{color:'#6b6966', fontSize:13, padding:'12px 0'}}>No members yet.</div>
        ) : (
          <table style={{width:'100%', borderCollapse:'collapse'}}>
            <thead>
              <tr style={{textAlign:'left', borderBottom:'1px solid #2a2a32'}}>
                <th style={tribeStyles.th}>Name</th>
                <th style={tribeStyles.th}>Role</th>
                {isDM && <th style={{...tribeStyles.th, width:80}}></th>}
              </tr>
            </thead>
            <tbody>
              {tribe.members.map(m => (
                <tr key={m.id} style={{borderBottom:'1px solid #1a1a20'}}>
                  <td style={tribeStyles.td}>{m.name}</td>
                  <td style={tribeStyles.td}>{m.role}</td>
                  {isDM && (
                    <td style={tribeStyles.td}>
                      <button style={tribeStyles.iconBtn} onClick={()=>setEditForm({ ...m, playerId: m.playerId || '' })}>edit</button>
                      <button style={{...tribeStyles.iconBtn, color:'#c53030'}} onClick={()=>removeMember(m)}>×</button>
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Notes */}
      {tribe.notes && (
        <div style={{background:'#16161b', border:'1px solid #2a2a32', borderRadius:8, padding:16, color:'#9a9793', whiteSpace:'pre-wrap', fontSize:13, lineHeight:1.6}}>
          {tribe.notes}
        </div>
      )}

      {/* Add Member modal */}
      {modal === 'addMember' && (
        <div style={dialogStyles.scrim} {...scrimDismiss(()=>setModal(null))}>
          <div style={dialogStyles.box} onClick={e=>e.stopPropagation()}>
            <div style={dialogStyles.title}>Add Member</div>
            <input autoFocus placeholder="Name *" value={memberForm.name} onChange={e=>setMemberForm(f=>({...f, name:e.target.value}))} style={tribeStyles.input}/>
            <select value={memberForm.role} onChange={e=>setMemberForm(f=>({...f, role:e.target.value}))} style={tribeStyles.input}>
              <option>Leader</option><option>Member</option>
            </select>
            <div style={dialogStyles.row}>
              <button style={dialogStyles.btnGhost} onClick={()=>setModal(null)}>Cancel</button>
              <button style={dialogStyles.btn} onClick={addMember}>Add</button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Tribe modal */}
      {modal === 'edit' && (
        <EditTribeModal tribe={tribe} onClose={()=>setModal(null)} onSave={async (patch)=>{ await save(patch); setModal(null); }}/>
      )}

      {/* Edit Member modal */}
      {editForm && (
        <div style={dialogStyles.scrim} {...scrimDismiss(()=>setEditForm(null))}>
          <div style={dialogStyles.box} onClick={e=>e.stopPropagation()}>
            <div style={dialogStyles.title}>Edit Member</div>
            <input autoFocus value={editForm.name} onChange={e=>setEditForm(f=>({...f, name:e.target.value}))} style={tribeStyles.input}/>
            <select value={editForm.role} onChange={e=>setEditForm(f=>({...f, role:e.target.value}))} style={tribeStyles.input}>
              <option>Leader</option><option>Member</option>
            </select>
            <div style={dialogStyles.row}>
              <button style={dialogStyles.btnGhost} onClick={()=>setEditForm(null)}>Cancel</button>
              <button style={dialogStyles.btn} onClick={updateMember}>Save</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const EditTribeModal = ({ tribe, onClose, onSave }) => {
  const [form, setForm] = React.useState({
    name: tribe.name, leaderName: tribe.leaderName, notes: tribe.notes,
  });
  return (
    <div style={dialogStyles.scrim} {...scrimDismiss(onClose)}>
      <div style={{...dialogStyles.box, maxWidth:520}} onClick={e=>e.stopPropagation()}>
        <div style={dialogStyles.title}>Edit Tribe</div>
        <input placeholder="Tribe name *" value={form.name} onChange={e=>setForm(f=>({...f, name:e.target.value}))} style={tribeStyles.input}/>
        <input placeholder="Leader's name" value={form.leaderName} onChange={e=>setForm(f=>({...f, leaderName:e.target.value}))} style={tribeStyles.input}/>
        <textarea placeholder="Notes" value={form.notes} onChange={e=>setForm(f=>({...f, notes:e.target.value}))} style={{...tribeStyles.input, minHeight:80, resize:'vertical'}}/>
        <div style={dialogStyles.row}>
          <button style={dialogStyles.btnGhost} onClick={onClose}>Cancel</button>
          <button style={dialogStyles.btn} onClick={()=>onSave(form)}>Save</button>
        </div>
      </div>
    </div>
  );
};

const tribeStyles = {
  th: { fontSize:11, color:'#6b6966', textTransform:'uppercase', letterSpacing:'0.08em', padding:'8px 6px', fontWeight:600 },
  td: { fontSize:13, color:'#e8e6e3', padding:'10px 6px' },
  iconBtn: { background:'transparent', border:'none', color:'#9a9793', fontSize:12, cursor:'pointer', padding:'4px 6px', marginRight:4 },
  input: { width:'100%', padding:'8px 10px', background:'#16161b', border:'1px solid #2a2a32', borderRadius:6, color:'#e8e6e3', fontSize:13, marginBottom:10, fontFamily:"'Nunito', sans-serif" },
};

window.TribeTab = TribeTab;