// Marketing OS — Records list + Team view + Permissions

function RecordsView({ currentUser, entries, visibleUsers, onEdit, onDelete }) {
  const [filter, setFilter] = React.useState({
    q: '', range: '30', team: '', subteam: '', user: '', method: '', action: ''
  });
  const [sortKey, setSortKey] = React.useState('date');
  const [sortDir, setSortDir] = React.useState('desc');
  const [page, setPage] = React.useState(0);
  const PER_PAGE = 12;

  const clear = () => { setFilter({ q: '', range: '30', team: '', subteam: '', user: '', method: '', action: '' }); setPage(0); };

  const filtered = useMemo(() => {
    let l = window.applyFilter(entries, filter);
    l = l.slice().sort((a,b) => {
      const av = a[sortKey]; const bv = b[sortKey];
      const cmp = typeof av === 'number' ? av - bv : String(av).localeCompare(String(bv));
      return sortDir === 'asc' ? cmp : -cmp;
    });
    return l;
  }, [entries, filter, sortKey, sortDir]);

  const pageRows = filtered.slice(page * PER_PAGE, (page+1) * PER_PAGE);
  const pageCount = Math.max(1, Math.ceil(filtered.length / PER_PAGE));

  function toggleSort(k) {
    if (sortKey === k) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(k); setSortDir('desc'); }
  }
  const SortHead = ({k, children}) => (
    <th onClick={() => toggleSort(k)} style={{cursor:'pointer'}}>
      <span className="row" style={{gap:4}}>
        {children}
        {sortKey === k && <Icon name={sortDir === 'asc' ? 'chevronUp' : 'chevronDown'} size={10}/>}
      </span>
    </th>
  );

  const canEdit = window.hasPerm(currentUser.role, 'edit_team_entry');

  return (
    <div>
      <div className="page-head">
        <div className="page-title-block">
          <div className="page-title">บันทึกทั้งหมด</div>
          <div className="page-desc">{filtered.length} รายการ · ขอบเขตของ <strong>{window.ROLES[currentUser.role].label}</strong></div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm"><Icon name="download" size={12}/> Export CSV</button>
          <button className="btn btn-secondary btn-sm"><Icon name="download" size={12}/> Export Excel</button>
        </div>
      </div>

      <FilterBar filter={filter} setFilter={(f) => { setFilter(f); setPage(0); }} currentUser={currentUser} visibleUsers={visibleUsers} onClear={clear}/>

      <div className="table-wrap">
        <table className="table">
          <thead>
            <tr>
              <SortHead k="date">วันที่</SortHead>
              <th>เซียน / ทีม</th>
              <SortHead k="signup">สมัคร</SortHead>
              <SortHead k="signupDeposit">สมัครฝาก</SortHead>
              <SortHead k="firstDeposit">ฝากแรก</SortHead>
              <SortHead k="dailyDeposit">ฝากทั้งวัน</SortHead>
              <SortHead k="adSpendTHB">ค่าแอด</SortHead>
              <SortHead k="withdraw">ยอดเบิก</SortHead>
              <th>วิธี</th>
              <th>ทำการตลาด</th>
              <th style={{width:80}}></th>
            </tr>
          </thead>
          <tbody>
            {pageRows.map(e => {
              const u = window.getUser(e.userId);
              const team = u ? window.getTeam(u.teamId) : null;
              const sub  = u ? window.getSubteam(u.subteamId) : null;
              return (
                <tr key={e.id}>
                  <td>
                    <div style={{fontWeight:500, color:'var(--ink)'}}>{e.date}</div>
                    <div style={{fontSize:11, color:'var(--ink-4)'}}>{e.id}</div>
                  </td>
                  <td>
                    <div className="row" style={{gap:10}}>
                      <div className="avatar" style={{width:28, height:28, fontSize:11}}>{window.initials(e.userName)}</div>
                      <div>
                        <div style={{fontWeight:500, color:'var(--ink)'}}>{e.userName.replace(/^คุณ/,'')}</div>
                        <div style={{fontSize:11, color:'var(--ink-3)'}}>{sub?.name || '-'} · {team?.name || '-'}</div>
                      </div>
                    </div>
                  </td>
                  <td className="num right">{window.fmtNum(e.signup)}</td>
                  <td className="num right">{window.fmtNum(e.signupDeposit)}</td>
                  <td className="num right">{window.fmtTHB(e.firstDeposit)}</td>
                  <td className="num right" style={{fontWeight:500, color:'var(--ink)'}}>{window.fmtTHB(e.dailyDeposit)}</td>
                  <td className="num right">
                    {window.fmtTHB(e.adSpendTHB)}
                    {e.adSpendCurrency !== 'THB' && <div style={{fontSize:11, color:'var(--ink-4)'}}>({e.adSpendCurrency} {window.fmtNum(e.adSpend)})</div>}
                  </td>
                  <td className="num right">{window.fmtTHB(e.withdrawTHB ?? e.withdraw)}</td>
                  <td>
                    <div className="row" style={{gap:4}}>
                      {e.methods.slice(0,2).map(m => {
                        const meta = window.METHODS.find(x => x.id === m);
                        return meta && <span key={m} className="badge outline" title={meta.label}><Icon name={meta.icon} size={10}/></span>;
                      })}
                      {e.methods.length > 2 && <span className="badge outline">+{e.methods.length - 2}</span>}
                    </div>
                  </td>
                  <td>
                    {e.action === 'did_market'
                      ? <span className="badge success"><Icon name="check" size={10}/> ได้ทำ</span>
                      : e.action === 'no_market'
                      ? <span className="badge outline">ไม่ได้ทำ</span>
                      : e.action === 'sold'
                      ? <span className="badge success"><Icon name="check" size={10}/> ได้ทำ</span>
                      : <span className="badge outline">ไม่ได้ทำ</span>
                    }
                  </td>
                  <td>
                    <div className="row" style={{gap:4, justifyContent:'flex-end'}}>
                      {e.contentLink && <button className="btn btn-ghost btn-sm" title="ดูคอนเทนต์"><Icon name="link" size={12}/></button>}
                      {canEdit && <button className="btn btn-ghost btn-sm" onClick={() => onEdit(e)} title="แก้ไข"><Icon name="edit" size={12}/></button>}
                    </div>
                  </td>
                </tr>
              );
            })}
            {pageRows.length === 0 && (
              <tr><td colSpan="11" style={{padding:40, textAlign:'center', color:'var(--ink-3)'}}>ไม่พบข้อมูล — ลองล้างฟิลเตอร์</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {filtered.length > 0 && (
        <div className="row between" style={{marginTop: 14, fontSize: 12, color:'var(--ink-3)'}}>
          <span>แสดง {page * PER_PAGE + 1}–{Math.min((page+1) * PER_PAGE, filtered.length)} จาก {filtered.length} รายการ</span>
          <div className="row" style={{gap: 4}}>
            <button className="btn btn-secondary btn-sm" disabled={page === 0} onClick={() => setPage(p => p - 1)}>← ก่อนหน้า</button>
            <span style={{padding:'0 12px'}}>หน้า {page+1} / {pageCount}</span>
            <button className="btn btn-secondary btn-sm" disabled={page+1 >= pageCount} onClick={() => setPage(p => p + 1)}>ถัดไป →</button>
          </div>
        </div>
      )}
    </div>
  );
}


function TeamView({ currentUser, allUsers, entries }) {
  // Pre-aggregate per user
  const perUser = useMemo(() => {
    const map = new Map();
    for (const e of entries) {
      const cur = map.get(e.userId) || { deposit: 0, count: 0, sold: 0, adspend: 0 };
      cur.deposit += +e.dailyDeposit || 0;
      cur.adspend += +e.adSpendTHB || 0;
      cur.count++;
      if (e.action === 'sold') cur.sold++;
      map.set(e.userId, cur);
    }
    return map;
  }, [entries]);

  const visUsers = useMemo(() => window.visibleUsersFor(currentUser), [currentUser]);
  const canSeeAll = window.hasPerm(currentUser.role, 'view_all_data');

  const [tab, setTab] = React.useState('teams');

  // Group by team
  const teamData = window.TEAMS.map(t => {
    const teamUsers = visUsers.filter(u => u.teamId === t.id);
    const lead = teamUsers.find(u => u.role === 'team_lead');
    const subs = window.SUBTEAMS.filter(s => s.teamId === t.id);
    const teamEntries = entries.filter(e => e.teamId === t.id);
    const deposit = teamEntries.reduce((s, e) => s + (+e.dailyDeposit || 0), 0);
    return { team: t, lead, subs, members: teamUsers, deposit, count: teamEntries.length };
  }).filter(td => td.members.length > 0 || canSeeAll);

  return (
    <div>
      <div className="page-head">
        <div className="page-title-block">
          <div className="page-title">ทีม & สมาชิก</div>
          <div className="page-desc">โครงสร้างองค์กร {visUsers.length} คน · {window.TEAMS.length} ทีม · {window.SUBTEAMS.length} ทีมย่อย</div>
        </div>
        <div className="page-actions">
          <div className="tab-bar">
            <span className={`tab ${tab==='teams'?'active':''}`} onClick={() => setTab('teams')}>มุมมองทีม</span>
            <span className={`tab ${tab==='members'?'active':''}`} onClick={() => setTab('members')}>มุมมองรายบุคคล</span>
            <span className={`tab ${tab==='hierarchy'?'active':''}`} onClick={() => setTab('hierarchy')}>ลำดับชั้น</span>
          </div>
          {window.hasPerm(currentUser.role, 'manage_users') && (
            <button className="btn btn-primary btn-sm"><Icon name="plus" size={12}/> เพิ่มสมาชิก</button>
          )}
        </div>
      </div>

      {tab === 'teams' && (
        <div className="org-grid">
          {teamData.map(td => (
            <div key={td.team.id} className="team-card">
              <div className="team-head">
                <div className="avatar" style={{width:38, height:38, background: td.team.color, color: 'var(--gold)', fontSize:13}}>
                  {td.team.name.replace('ทีม ','').slice(0,2)}
                </div>
                <div className="team-info">
                  <div className="team-name">{td.team.name}</div>
                  <div className="team-lead">หัวหน้า: {td.lead?.name?.replace(/^คุณ/,'') || '— ยังไม่ได้กำหนด'}</div>
                </div>
                <button className="btn btn-ghost btn-sm" style={{padding:'4px 6px'}}><Icon name="settings" size={13}/></button>
              </div>

              <div className="team-members">
                {td.members.slice(0,6).map(m => (
                  <div className="avatar" key={m.id} title={m.name}>{window.initials(m.name)}</div>
                ))}
                {td.members.length > 6 && <div className="more">+{td.members.length - 6}</div>}
              </div>

              <div className="team-stats">
                <div>
                  <div className="team-stat-num">{td.members.length}</div>
                  <div className="team-stat-label">สมาชิก</div>
                </div>
                <div>
                  <div className="team-stat-num">{td.subs.length}</div>
                  <div className="team-stat-label">ทีมย่อย</div>
                </div>
                <div style={{flex:1}}/>
                <div style={{textAlign:'right'}}>
                  <div className="team-stat-num">{window.fmtTHB(td.deposit)}</div>
                  <div className="team-stat-label">ยอดฝาก 30 วัน</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'members' && (
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>สมาชิก</th>
                <th>รหัส</th>
                <th>ตำแหน่ง</th>
                <th>ทีม</th>
                <th>ทีมย่อย</th>
                <th className="right">รายการ</th>
                <th className="right">ขายได้</th>
                <th className="right">ยอดฝากรวม</th>
                <th>เริ่มงาน</th>
                {window.hasPerm(currentUser.role, 'manage_users') && <th></th>}
              </tr>
            </thead>
            <tbody>
              {visUsers.map(u => {
                const st = perUser.get(u.id) || { deposit: 0, count: 0, sold: 0 };
                const team = window.getTeam(u.teamId);
                const sub  = window.getSubteam(u.subteamId);
                return (
                  <tr key={u.id}>
                    <td>
                      <div className="row" style={{gap:10}}>
                        <div className="avatar" style={{width:30, height:30, fontSize:11}}>{window.initials(u.name)}</div>
                        <div>
                          <div style={{fontWeight:500, color:'var(--ink)'}}>{u.name.replace(/^คุณ/,'')}</div>
                          <div style={{fontSize:11, color:'var(--ink-3)'}}>{u.nickname}</div>
                        </div>
                      </div>
                    </td>
                    <td className="mono">{u.code}</td>
                    <td>
                      {u.role === 'owner' && <span className="badge gold"><Icon name="crown" size={10}/> {window.ROLES[u.role].label}</span>}
                      {u.role === 'super_admin' && <span className="badge dark"><Icon name="shield" size={10}/> {window.ROLES[u.role].label}</span>}
                      {u.role === 'team_lead' && <span className="badge"><Icon name="star" size={10}/> {window.ROLES[u.role].label}</span>}
                      {u.role === 'sub_lead' && <span className="badge outline">{window.ROLES[u.role].label}</span>}
                      {u.role === 'staff' && <span className="badge outline">{window.ROLES[u.role].label}</span>}
                    </td>
                    <td>{team?.name || '-'}</td>
                    <td>{sub?.name || '-'}</td>
                    <td className="num right">{st.count}</td>
                    <td className="num right">{st.sold}</td>
                    <td className="num right" style={{fontWeight:500, color:'var(--ink)'}}>{window.fmtTHB(st.deposit)}</td>
                    <td className="mono" style={{fontSize:12, color:'var(--ink-3)'}}>{u.joined}</td>
                    {window.hasPerm(currentUser.role, 'manage_users') && (
                      <td>
                        <div className="row" style={{gap:2}}>
                          <button className="btn btn-ghost btn-sm"><Icon name="edit" size={12}/></button>
                          <button className="btn btn-ghost btn-sm"><Icon name="trash" size={12}/></button>
                        </div>
                      </td>
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'hierarchy' && <HierarchyView allUsers={visUsers} currentUser={currentUser}/>}
    </div>
  );
}

function HierarchyView({ allUsers, currentUser }) {
  const owners = allUsers.filter(u => u.role === 'owner');
  const supers = allUsers.filter(u => u.role === 'super_admin');

  const Node = ({ user, big }) => (
    <div className="row" style={{
      background: big ? 'var(--ink)' : 'var(--bg-elev)',
      color: big ? 'var(--bg-elev)' : 'var(--ink)',
      padding: '10px 14px',
      borderRadius: 10,
      gap: 10,
      border: '1px solid ' + (big ? 'var(--ink)' : 'var(--line)'),
      minWidth: 220,
    }}>
      <div className="avatar" style={{width:30, height:30, fontSize:11, background: big ? 'var(--gold)' : 'var(--ink)', color: big ? 'var(--ink)' : 'var(--gold)'}}>
        {window.initials(user.name)}
      </div>
      <div style={{minWidth:0, flex:1}}>
        <div style={{fontSize:13, fontWeight:500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{user.name.replace(/^คุณ/,'')}</div>
        <div style={{fontSize:11, opacity:0.7}}>{window.ROLES[user.role].label}</div>
      </div>
      <span className="kbd" style={{background: big ? 'rgba(255,255,255,0.1)' : 'var(--bg-sunken)', color: big ? 'var(--gold)' : 'var(--ink-3)', borderColor:'transparent'}}>{user.code}</span>
    </div>
  );

  return (
    <div className="card card-pad-lg" style={{overflow:'auto'}}>
      <div className="col" style={{gap:24, minWidth:'fit-content'}}>
        {/* Owners */}
        {owners.length > 0 && (
          <div className="col" style={{alignItems:'center', gap:14}}>
            <div className="row" style={{gap:14, justifyContent:'center'}}>
              {owners.map(u => <Node key={u.id} user={u} big/>)}
            </div>
            <div style={{height:18, width:1, background:'var(--line-2)'}}/>
          </div>
        )}

        {/* Supers */}
        {supers.length > 0 && (
          <div className="col" style={{alignItems:'center', gap:14}}>
            <div className="row" style={{gap:14, justifyContent:'center', flexWrap:'wrap'}}>
              {supers.map(u => <Node key={u.id} user={u} big/>)}
            </div>
          </div>
        )}

        {/* Teams */}
        <div style={{display:'grid', gridTemplateColumns:`repeat(${window.TEAMS.length}, minmax(260px, 1fr))`, gap: 14, alignItems:'start'}}>
          {window.TEAMS.map(t => {
            const lead = allUsers.find(u => u.role === 'team_lead' && u.teamId === t.id);
            const subs = window.SUBTEAMS.filter(s => s.teamId === t.id);
            return (
              <div key={t.id} className="col" style={{gap:10, padding:14, background:'var(--bg-sunken)', borderRadius:12, border:'1px solid var(--line)'}}>
                <div style={{fontSize:11, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:0.6, fontWeight:600}}>{t.name}</div>
                {lead && <Node user={lead}/>}
                <div className="col" style={{gap:8, paddingLeft:12, borderLeft:'2px solid var(--line-2)'}}>
                  {subs.map(s => {
                    const sub = allUsers.find(u => u.role === 'sub_lead' && u.subteamId === s.id);
                    const staff = allUsers.filter(u => u.role === 'staff' && u.subteamId === s.id);
                    return (
                      <div key={s.id} className="col" style={{gap: 6}}>
                        {sub && <Node user={sub}/>}
                        <div style={{display:'flex', flexWrap:'wrap', gap:4, paddingLeft:14}}>
                          {staff.slice(0,8).map(st => (
                            <div key={st.id} title={st.name} className="avatar" style={{width:26, height:26, fontSize:10}}>{window.initials(st.name)}</div>
                          ))}
                          {staff.length > 8 && <div className="more" style={{width:26, height:26, fontSize:10, background:'var(--bg-elev)', borderColor:'var(--line)'}}>+{staff.length-8}</div>}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function PermissionsView({ currentUser }) {
  const matrixRows = [
    { key: 'view_all_data',     label: 'ดูข้อมูลทุกทีม',            },
    { key: 'view_team_data',    label: 'ดูข้อมูลในทีมตนเอง',         },
    { key: 'view_subteam_data', label: 'ดูข้อมูลในทีมย่อยตนเอง',      },
    { key: 'view_own_data',     label: 'ดูข้อมูลของตนเอง',           },
    { key: 'edit_any_entry',    label: 'แก้ไขข้อมูลทุกรายการ',        },
    { key: 'edit_team_entry',   label: 'แก้ไขข้อมูลในทีม',           },
    { key: 'delete_entry',      label: 'ลบรายการ',                  },
    { key: 'approve',           label: 'อนุมัติรายการ',               },
    { key: 'export',            label: 'Export ข้อมูล',              },
    { key: 'manage_users',      label: 'จัดการสมาชิก',               },
  ];
  const roles = ['owner','super_admin','team_lead','sub_lead','staff'];
  return (
    <div>
      <div className="page-head">
        <div className="page-title-block">
          <div className="page-title">สิทธิ์การใช้งานตามตำแหน่ง</div>
          <div className="page-desc">กำหนดว่าตำแหน่งใดทำอะไรได้บ้าง · เฉพาะเจ้าของระบบและผู้จัดการใหญ่เท่านั้นที่แก้ไขได้</div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="card-title">ตารางสิทธิ์</div>
          <div className="card-sub">ปรับแต่งสิทธิ์ตามตำแหน่งงาน</div>
        </div>
        <div className="table-wrap" style={{border:'none', borderRadius:0}}>
          <table className="table">
            <thead>
              <tr>
                <th style={{minWidth:220}}>สิทธิ์</th>
                {roles.map(r => (
                  <th key={r} style={{textAlign:'center'}}>
                    <div className="col" style={{alignItems:'center', gap:4}}>
                      <span>{window.ROLES[r].label}</span>
                      <span style={{fontSize:10, fontWeight:400, color:'var(--ink-4)', textTransform:'none'}}>{window.ROLES[r].short}</span>
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {matrixRows.map(row => (
                <tr key={row.key}>
                  <td style={{fontWeight:500, color:'var(--ink)'}}>{row.label}</td>
                  {roles.map(r => {
                    const has = (window.PERMS[row.key] || []).includes(r);
                    return (
                      <td key={r} style={{textAlign:'center'}}>
                        {has
                          ? <span style={{display:'inline-grid', placeItems:'center', width:24, height:24, borderRadius:6, background:'var(--gold-tint)', color:'var(--gold)'}}><Icon name="check" size={13}/></span>
                          : <span style={{display:'inline-grid', placeItems:'center', width:24, height:24, borderRadius:6, background:'var(--bg-sunken)', color:'var(--ink-4)'}}><Icon name="x" size={11}/></span>
                        }
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function SettingsView() {
  return (
    <div>
      <div className="page-head">
        <div className="page-title-block">
          <div className="page-title">ตั้งค่าระบบ</div>
          <div className="page-desc">ปรับแต่งการทำงานของระบบทั่วไป</div>
        </div>
      </div>
      <div className="card card-pad-lg">
        <div className="col" style={{gap:18, maxWidth:600}}>
          <div className="col" style={{gap:6}}>
            <label className="label">ชื่อองค์กร</label>
            <input className="input" defaultValue="Marketing OS — Team Phoenix Group"/>
          </div>
          <div className="col" style={{gap:6}}>
            <label className="label">สกุลเงินหลัก</label>
            <select className="select">
              <option>THB · บาท</option>
            </select>
          </div>
          <div className="col" style={{gap:6}}>
            <label className="label">เขตเวลา</label>
            <select className="select">
              <option>Asia/Bangkok (UTC+7)</option>
            </select>
          </div>
          <div className="row" style={{gap:8}}>
            <button className="btn btn-primary"><Icon name="save" size={13}/> บันทึก</button>
            <button className="btn btn-secondary">ยกเลิก</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.RecordsView = RecordsView;
window.TeamView = TeamView;
window.PermissionsView = PermissionsView;
window.SettingsView = SettingsView;