// EMphasis System — Goal Setting tab (split from emphasis.jsx).
// GoalSettingTab, GsOrgChart, GsOrgNode + GS helpers/consts.

// ============= Goal Setting — monthly worksheet (real data) =============
const GS_THAI_MONTHS = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
const _gsBlank = () => ({ life: '', long: '', mid: '', short: '', salesTarget: '', salesActual: '', salesNote: '', peopleNote: '', devNote: '', people: [], dev: [], orgStatus: {} });
const _gsBaht = n => (Number(n) || 0).toLocaleString('th-TH');
const _gsNum = s => Number(String(s).replace(/[^0-9.]/g, '')) || 0;

function GoalSettingTab({ currentUser }) {
  const now = new Date();
  const [month, setMonth] = useState(now.getMonth());
  const [year, setYear] = useState(now.getFullYear());
  const [doc, setDoc] = useState(_gsBlank());
  const [status, setStatus] = useState('draft');
  const [savedAt, setSavedAt] = useState(null);
  const [saveLabel, setSaveLabel] = useState('บันทึกอัตโนมัติ');
  const [loading, setLoading] = useState(true);
  const period = `${year}-${String(month + 1).padStart(2, '0')}`;
  const saveTimer = React.useRef(null);
  const lsKey = `emphasis_goal_${period}`;

  // Load: try Supabase, fall back to localStorage.
  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      let loaded = null, st = 'draft', when = null;
      try {
        if (window.SB_READY && window.db?.goalPlans) {
          const { data } = await window.db.goalPlans.get(period);
          if (data) { loaded = data.data; st = data.status || 'draft'; when = data.updated_at ? new Date(data.updated_at).getTime() : null; }
        }
      } catch (e) { /* fall through to LS */ }
      if (!loaded) {
        try { const raw = localStorage.getItem(lsKey); if (raw) { const j = JSON.parse(raw); loaded = j.data || j; st = j.status || 'draft'; } } catch {}
      }
      if (cancelled) return;
      const d = { ..._gsBlank(), ...(loaded || {}) };
      if (!Array.isArray(d.people)) d.people = [];
      if (!Array.isArray(d.dev)) d.dev = [];
      setDoc(d); setStatus(st); setSavedAt(when);
      setSaveLabel(when ? 'บันทึกล่าสุด · ' + new Date(when).toLocaleString('th-TH', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : 'บันทึกอัตโนมัติ');
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [period]); // eslint-disable-line

  const persist = useCallback(async (nextDoc, nextStatus) => {
    const d = nextDoc || doc, st = nextStatus || status;
    try { localStorage.setItem(lsKey, JSON.stringify({ data: d, status: st })); } catch {}
    try { if (window.SB_READY && window.db?.goalPlans) await window.db.goalPlans.save(period, d, st); } catch {}
    setSavedAt(Date.now());
    setSaveLabel('บันทึกแล้ว · ' + new Date().toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }));
  }, [doc, status, period, lsKey]);

  const queueSave = (nextDoc) => {
    setSaveLabel('กำลังบันทึก…');
    clearTimeout(saveTimer.current);
    saveTimer.current = setTimeout(() => persist(nextDoc), 600);
  };
  const setField = (f, v) => { const d = { ...doc, [f]: v }; setDoc(d); queueSave(d); };

  const prevMonth = () => { let m = month - 1, y = year; if (m < 0) { m = 11; y--; } setMonth(m); setYear(y); };
  const nextMonth = () => { let m = month + 1, y = year; if (m > 11) { m = 0; y++; } setMonth(m); setYear(y); };

  const submit = async () => { setStatus('submitted'); await persist(doc, 'submitted'); };

  if (loading) return <Card><div className="py-16 text-center text-sm text-ink-400">กำลังโหลดแผนเดือนนี้…</div></Card>;

  return (
    <div className="space-y-4">
      {/* Toolbar */}
      <div className="flex items-center gap-3 flex-wrap">
        <div className="flex items-center gap-1 bg-white border border-ink-200 rounded-xl p-1">
          <button onClick={prevMonth} className="w-8 h-8 rounded-lg hover:bg-ink-50 text-ink-500 text-lg leading-none">‹</button>
          <div className="px-2 text-sm font-bold text-ink-900 min-w-[140px] text-center">{GS_THAI_MONTHS[month]} {year + 543}</div>
          <button onClick={nextMonth} className="w-8 h-8 rounded-lg hover:bg-ink-50 text-ink-500 text-lg leading-none">›</button>
        </div>
        <span className={`text-[12px] font-bold px-3 py-1.5 rounded-full ${status === 'submitted' ? 'bg-emerald-50 text-emerald-700' : 'bg-ink-100 text-ink-500'}`}>{status === 'submitted' ? 'ส่งแล้ว' : 'ร่าง'}</span>
        <span className="text-[11px] text-ink-400">{saveLabel}</span>
        <div className="ml-auto flex items-center gap-2">
          <Btn variant="primary" size="sm" icon={<Icon name="check" className="w-3.5 h-3.5" />} onClick={submit}>{status === 'submitted' ? 'ส่งซ้ำ' : 'ส่งแผนเดือนนี้'}</Btn>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
        {/* Col 1 — life goals */}
        <div className="lg:col-span-4 space-y-3">
          {[
            { key: 'life', title: 'เป้าหมายชีวิต', hint: '(ใช้ชีวิตยังไง)', ph: 'เขียนภาพชีวิตที่อยากเป็น…' },
            { key: 'long', title: 'ระยะยาว', hint: '(เป้าหมาย 5 ปีข้างหน้า)', ph: 'เป้าหมายใน 5 ปี…' },
            { key: 'mid', title: 'ระยะกลาง', hint: '(เป้าหมาย 1 ปีบัญชี)', ph: 'เป้าหมายปีนี้…' },
            { key: 'short', title: 'ระยะสั้น', hint: '(เป้าหมายเดือนนี้)', ph: 'เป้าหมายเดือนนี้…' },
          ].map(g => (
            <Card key={g.key} pad={false}>
              <div className="p-3.5">
                <div className="flex items-baseline gap-2 mb-1.5"><span className="text-sm font-bold text-ink-900">{g.title}</span><span className="text-[11px] text-ink-400">{g.hint}</span></div>
                <textarea value={doc[g.key]} onChange={e => setField(g.key, e.target.value)} placeholder={g.ph} rows={3}
                  className="w-full text-[13.5px] leading-relaxed border-0 resize-none outline-none text-ink-700 bg-transparent" />
              </div>
            </Card>
          ))}
        </div>

        {/* Col 2 — ยอด / คน / พัฒนา */}
        <div className="lg:col-span-3 space-y-3">
          <Card pad={false}>
            <div className="px-4 py-2.5 border-b border-ink-100 flex items-center gap-2 bg-ink-50/40">
              <span className="w-2.5 h-2.5 rounded" style={{ background: '#2563EB' }} />
              <span className="text-sm font-bold text-ink-900">ยอด</span>
              <span className="text-[11px] text-ink-400">เป้าหมายยอดเดือนนี้</span>
            </div>
            <div className="p-4">
              <textarea value={doc.salesNote} onChange={e => setField('salesNote', e.target.value)} rows={5} placeholder="เขียนเป้าหมายยอดเดือนนี้ + แผนไปให้ถึง เช่น ยอดเป้า, ช่องทาง, โปรโมชัน, จำนวนนัด…"
                className="w-full text-[13.5px] leading-relaxed border border-ink-100 rounded-lg px-3 py-2.5 resize-none outline-none focus:border-brand-500 text-ink-700" />
            </div>
          </Card>

          {[{ field: 'peopleNote', title: 'คน', sub: 'ทีม / การรับสมัคร', color: '#10B981', ph: 'เขียนเป้าหมายด้านคน เช่น รับสมัครกี่คน, ดูแลทีม, ตามใครเข้าเรียน…' },
            { field: 'devNote', title: 'พัฒนา', sub: 'ทักษะ / ระบบ / ตัวเอง', color: '#F59E0B', ph: 'เขียนเป้าหมายด้านพัฒนา เช่น ทักษะที่จะฝึก, ระบบที่จะวาง, นิสัยที่จะสร้าง…' }].map(grp => (
            <Card key={grp.field} pad={false}>
              <div className="px-4 py-2.5 border-b border-ink-100 flex items-center gap-2 bg-ink-50/40">
                <span className="w-2.5 h-2.5 rounded" style={{ background: grp.color }} />
                <span className="text-sm font-bold text-ink-900">{grp.title}</span>
                <span className="text-[11px] text-ink-400">{grp.sub}</span>
              </div>
              <div className="p-4">
                <textarea value={doc[grp.field]} onChange={e => setField(grp.field, e.target.value)} rows={4} placeholder={grp.ph}
                  className="w-full text-[13.5px] leading-relaxed border border-ink-100 rounded-lg px-3 py-2.5 resize-none outline-none focus:border-brand-500 text-ink-700" />
              </div>
            </Card>
          ))}
        </div>

        {/* Col 3 — org chart */}
        <div className="lg:col-span-5">
          <GsOrgChart currentUser={currentUser}
            statusMap={doc.orgStatus || {}}
            onStatus={(id, patch) => { const d = { ...doc, orgStatus: { ...(doc.orgStatus || {}), [id]: patch } }; setDoc(d); queueSave(d); }} />
        </div>
      </div>

      <div className="text-[11px] text-ink-400 text-center">บันทึกแยกตามเดือน · แผนที่ส่งแล้วยังแก้และส่งซ้ำได้ · ซิงค์ขึ้นระบบให้อัตโนมัติ</div>
    </div>
  );
}

// Org chart for Goal Setting — real team pulled from ABO Tracking prospects,
// nested by sponsor_prospect_id. Click a node to see their class history + notes.
const GS_PROGRAM_COLOR = { BM: '#2563EB', BI: '#10B981', '6W': '#F59E0B', EM: '#7C3AED', '—': '#94A3B8' };
// Small inline badges for the per-month status the coach ticks on each person.
function _gsStatusBadges(s) {
  if (!s) return null;
  const out = [];
  if (s.studying) out.push(<span key="st" className="text-[9.5px] font-bold px-1.5 rounded" style={{ background: '#EDE9FE', color: '#7C3AED' }}>📚 ตั้งใจ</span>);
  if (s.sixw) out.push(<span key="6w" className="text-[9.5px] font-bold px-1.5 rounded" style={{ background: '#FEF3C7', color: '#B45309' }}>🥤 6W{s.sixwPct ? ' ' + s.sixwPct + '%' : ''}</span>);
  if (s.bt) out.push(<span key="bt" className="text-[9.5px] font-bold px-1.5 rounded" style={{ background: '#FEE2E2', color: '#DC2626' }}>BT</span>);
  return out;
}
function _gsStageOf(p) {
  // mirror ABO Tracking milestones from fu_state
  const f = p.fu_state || {};
  if (f.bt3 || ['mtg1','mtg2','mtg3','mtg4'].every(k => f[k])) return { label: 'EM Click', tag: 'EM' };
  if (f.bmodel && f.bincome) return { label: 'EM Begin', tag: 'EM' };
  if (f.guide) return { label: 'Em Guide', tag: 'BI' };
  if (f.checkin) return { label: 'Check in', tag: 'BM' };
  if (f['2yr']) return { label: '2Y', tag: 'BM' };
  return { label: 'เริ่มต้น', tag: '—' };
}
function GsOrgChart({ currentUser, statusMap, onStatus }) {
  const [tree, setTree] = useState(null);
  const [loading, setLoading] = useState(false);
  const [meta, setMeta] = useState('ยังไม่ได้ดึงข้อมูล');
  const [detail, setDetail] = useState(null);   // node for drawer
  const [chartOpen, setChartOpen] = useState(false); // org-tree popup
  const st = statusMap || {};
  // per-person monthly status: { studying:bool, sixw:bool, sixwPct:0-100, bt:bool }
  const stOf = (id) => st[id] || {};
  const setSt = (id, patch) => onStatus && onStatus(id, { ...stOf(id), ...patch });

  const fetchOrg = useCallback(async () => {
    setLoading(true); setMeta('กำลังดึงข้อมูล…');
    try {
      // Same two-source merge as ABO Tracking: rows this account OWNS plus rows
      // nested UNDER this account by sponsor (its own prospect row's children).
      // A downline-with-login (e.g. พี่กบ) owns nothing, so the sponsor branch
      // is what surfaces her team.
      const ownerId = currentUser?.owner_id || currentUser?.id;
      // Collect EVERYONE in the subtree first (incl. inactive) so the BFS never
      // breaks at an inactive parent; we drop inactive when building the tree.
      const byId = new Map();
      if (window.SB_READY) {
        try {
          const { data } = await window.db.abo.list(ownerId);
          (data || []).forEach(r => byId.set(r.id, r));
        } catch (e) { /* ignore, try sponsor branch */ }
        try {
          const myAbo = currentUser?.abo_code || window.__currentUser?.abo_code;
          if (myAbo && window.supabase) {
            const { data: mineRow } = await window.supabase
              .from('prospects').select('id').eq('abo_code', myAbo)
              .not('fu_track', 'is', null).limit(1).maybeSingle();
            if (mineRow?.id) {
              let frontier = [mineRow.id];
              const seen = new Set();
              while (frontier.length) {
                const { data: kids } = await window.supabase
                  .from('prospects').select('*')
                  .in('sponsor_prospect_id', frontier).not('fu_track', 'is', null);
                const next = [];
                (kids || []).forEach(d => { if (!byId.has(d.id)) byId.set(d.id, d); if (!seen.has(d.id)) { seen.add(d.id); next.push(d.id); } });
                frontier = next;
              }
            }
          }
        } catch (e) { /* ignore */ }
      }
      // ACTIVE only — fu_inactive truthy is out (null/false = active).
      const rows = [...byId.values()].filter(r => !r.fu_inactive);
      // Build nodes + nest by sponsor_prospect_id.
      const nodes = new Map();
      rows.forEach(r => {
        const st = _gsStageOf(r);
        nodes.set(r.id, {
          id: r.id, name: r.name, abo: r.abo_code || null,
          tag: st.tag, stage: st.label, country: r.country,
          igHandle: r.ig_handle, notes: r.notes, sponsorId: r.sponsor_prospect_id || null,
          fu: r.fu_state || {}, children: [],
        });
      });
      const roots = [];
      nodes.forEach(n => {
        if (n.sponsorId && nodes.has(n.sponsorId)) nodes.get(n.sponsorId).children.push(n);
        else roots.push(n);
      });
      const root = {
        id: '_me', name: currentUser?.name || 'ทีมของฉัน', abo: currentUser?.abo_code,
        tag: 'EM', stage: 'หัวหน้าทีม', root: true, children: roots, fu: {},
      };
      setTree(root);
      const total = nodes.size;
      setMeta(`อัปเดตล่าสุด · ${new Date().toLocaleString('th-TH', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} · ${total} คน`);
    } catch (e) {
      setMeta('ดึงข้อมูลไม่สำเร็จ');
    } finally { setLoading(false); }
  }, [currentUser]);

  useEffect(() => { fetchOrg(); }, [fetchOrg]);

  const countAll = (n) => 1 + (n.children || []).reduce((s, c) => s + countAll(c) - (c.id === '_me' ? 1 : 0), 0);
  const teamCount = tree ? (tree.children || []).reduce((s, c) => s + countAll(c), 0) : 0;

  // Collapsed set — people whose sub-team is hidden. Default all expanded.
  const [collapsed, setCollapsed] = useState(() => new Set());
  const toggleCollapse = (id) => setCollapsed(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; });

  // Flatten the tree into ordered rows with depth — indented-list layout.
  const flatRows = useMemo(() => {
    const out = [];
    const walk = (n, depth) => {
      const kids = n.children || [];
      out.push({ n, depth, kids: kids.length });
      if (kids.length && !collapsed.has(n.id)) kids.forEach(c => walk(c, depth + 1));
    };
    if (tree) (tree.children || []).forEach(c => walk(c, 0)); // skip the synthetic "me" root
    return out;
  }, [tree, collapsed]);

  const OrgRow = ({ n, depth, kids }) => {
    const color = GS_PROGRAM_COLOR[n.tag] || '#64748B';
    const initial = (n.name || '?').trim()[0];
    const isCollapsed = collapsed.has(n.id);
    const subCount = kids ? countAll(n) - 1 : 0;
    return (
      <div className="flex items-center gap-1.5 rounded-lg hover:bg-ink-50/70 transition-colors" style={{ paddingLeft: depth * 22 }}>
        {/* collapse toggle / leaf dot */}
        {kids ? (
          <button onClick={() => toggleCollapse(n.id)} className="w-5 h-5 rounded flex items-center justify-center text-ink-400 hover:bg-ink-100 flex-shrink-0">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" style={{ transform: isCollapsed ? 'none' : 'rotate(90deg)', transition: 'transform .15s' }}><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
        ) : <span className="w-5 flex-shrink-0 flex justify-center"><span className="w-1.5 h-1.5 rounded-full bg-ink-200" /></span>}

        <button onClick={() => setDetail(n)} className="flex-1 min-w-0 flex items-center gap-2.5 py-1.5 pr-2 text-left">
          <span className="w-8 h-8 rounded-lg text-white flex items-center justify-center font-bold text-[13px] flex-shrink-0" style={{ background: color }}>{initial}</span>
          <span className="min-w-0 flex-1">
            <span className="flex items-center gap-1.5 flex-wrap">
              <span className="text-[13.5px] font-semibold text-ink-900 truncate">{n.name}</span>
              {n.country && window.COUNTRIES?.find(c => c.id === n.country) && <span className="text-[11px] leading-none">{window.COUNTRIES.find(c => c.id === n.country).flag}</span>}
              {kids > 0 && <span className="text-[10px] text-ink-400 num">· {subCount} คน</span>}
              {_gsStatusBadges(stOf(n.id))}
            </span>
            <span className="text-[11px] text-ink-400">{n.abo ? 'ABO ' + n.abo : 'ยังไม่มีรหัส'}</span>
          </span>
          {/* stage chip */}
          <span className="text-[10px] font-bold px-2 py-0.5 rounded-full flex-shrink-0" style={{ background: color + '18', color }}>{n.stage}</span>
        </button>
      </div>
    );
  };

  return (
    <Card pad={false}>
      <div className="px-4 py-3 border-b border-ink-100 flex items-center justify-between gap-3 bg-ink-50/40">
        <div>
          <div className="text-sm font-bold text-ink-900">ผังองค์กร</div>
          <div className="text-[11px] text-ink-400">{meta}</div>
        </div>
        <div className="flex items-center gap-2">
          {tree && (tree.children || []).length > 0 && (
            <button onClick={() => setChartOpen(true)} className="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg border border-ink-200 bg-white text-[12px] font-semibold text-ink-600 hover:bg-ink-50">
              <Icon name="share-2" className="w-3.5 h-3.5" />ดูเป็นผัง
            </button>
          )}
          <button onClick={fetchOrg} disabled={loading} className="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg border border-ink-200 bg-white text-[12px] font-semibold text-ink-600 hover:bg-ink-50 disabled:opacity-50">
            <Icon name="refresh" className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />ดึงข้อมูลล่าสุด
          </button>
        </div>
      </div>
      {/* summary chips + expand/collapse all */}
      {tree && (tree.children || []).length > 0 && !loading && (
        <div className="px-4 py-2 border-b border-ink-100 flex items-center gap-2 flex-wrap">
          <span className="text-[11.5px] text-ink-600 bg-ink-100 px-2.5 py-1 rounded-full font-semibold">รวม <b className="num">{teamCount}</b> คน</span>
          <span className="text-[11.5px] text-ink-600 bg-ink-100 px-2.5 py-1 rounded-full font-semibold">สายตรง <b className="num">{(tree.children || []).length}</b></span>
          <button onClick={() => setCollapsed(new Set())} className="ml-auto text-[11.5px] font-semibold text-brand-600 hover:text-brand-700">กางทั้งหมด</button>
          <button onClick={() => { const all = new Set(); const collect = n => { if ((n.children || []).length) { all.add(n.id); n.children.forEach(collect); } }; (tree.children || []).forEach(collect); setCollapsed(all); }} className="text-[11.5px] font-semibold text-ink-500 hover:text-ink-700">ยุบทั้งหมด</button>
        </div>
      )}
      <div className="p-2 overflow-auto" style={{ minHeight: 380 }}>
        {loading ? (
          <div className="h-[340px] flex flex-col items-center justify-center text-ink-400">
            <div className="w-9 h-9 rounded-full border-[3.5px] border-brand-100 border-t-brand-500 animate-spin mb-3" />
            <div className="text-[13px]">กำลังโหลดโครงสร้างทีม…</div>
          </div>
        ) : !tree || (tree.children || []).length === 0 ? (
          <div className="h-[340px] flex flex-col items-center justify-center text-center text-ink-400 px-6">
            <div className="text-4xl mb-3">🗂️</div>
            <div className="text-base font-bold text-ink-600">ยังไม่มีทีมในระบบ</div>
            <div className="text-[13px] mt-1.5 max-w-xs">เพิ่มลูกทีมใน ABO Tracking แล้วกำหนด DL-of เพื่อให้ผังองค์กรแสดงที่นี่</div>
          </div>
        ) : (
          <div className="space-y-0.5">
            {flatRows.map(r => <OrgRow key={r.n.id} n={r.n} depth={r.depth} kids={r.kids} />)}
          </div>
        )}
      </div>

      {/* Detail drawer */}
      {detail && (
        <div className="fixed inset-0 z-[70] flex justify-end" onClick={() => setDetail(null)}>
          <div className="absolute inset-0 bg-black/40" />
          <div className="relative w-[380px] max-w-[92vw] h-full bg-white shadow-lift flex flex-col animate-[slideInRight_.25s_ease]" onClick={e => e.stopPropagation()}>
            <div className="px-5 py-4 border-b border-ink-100 flex items-center justify-between">
              <span className="text-sm font-bold text-ink-900">ประวัติ &amp; ข้อมูล</span>
              <button onClick={() => setDetail(null)} className="w-8 h-8 rounded-lg bg-ink-100 text-ink-500 text-xl leading-none">×</button>
            </div>
            <div className="flex-1 overflow-auto p-5 space-y-4">
              <div className="flex items-center gap-3">
                <span className="w-14 h-14 rounded-2xl text-white flex items-center justify-center font-bold text-2xl flex-shrink-0" style={{ background: GS_PROGRAM_COLOR[detail.tag] || '#64748B' }}>{(detail.name || '?').trim()[0]}</span>
                <div className="min-w-0">
                  <div className="text-lg font-bold text-ink-900">{detail.name}</div>
                  <div className="text-[13px] text-ink-400">{detail.abo ? 'ABO ' + detail.abo : 'ยังไม่มีรหัส ABO'}</div>
                  <div className="flex gap-1.5 mt-1.5"><span className="text-[10.5px] font-bold px-2 py-0.5 rounded bg-ink-100 text-ink-600">{detail.stage}</span></div>
                </div>
              </div>
              {/* monthly status the coach ticks */}
              {(() => { const s = stOf(detail.id); return (
                <div className="border border-ink-100 rounded-xl p-3.5">
                  <div className="text-[12.5px] font-bold text-ink-700 mb-2.5">สถานะเดือนนี้ (ติ๊กได้)</div>
                  <div className="space-y-2">
                    <label className="flex items-center gap-2.5 cursor-pointer">
                      <span onClick={() => setSt(detail.id, { studying: !s.studying })} className={`w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 ${s.studying ? 'bg-purple-600 border-purple-600' : 'border-ink-300 bg-white'}`}>{s.studying && <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="#fff" strokeWidth="3" strokeLinecap="round" /></svg>}</span>
                      <span className="text-[13px] text-ink-700" onClick={() => setSt(detail.id, { studying: !s.studying })}>📚 กำลังตั้งใจศึกษา</span>
                    </label>
                    <label className="flex items-center gap-2.5 cursor-pointer">
                      <span onClick={() => setSt(detail.id, { sixw: !s.sixw })} className={`w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 ${s.sixw ? 'bg-amber-500 border-amber-500' : 'border-ink-300 bg-white'}`}>{s.sixw && <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="#fff" strokeWidth="3" strokeLinecap="round" /></svg>}</span>
                      <span className="text-[13px] text-ink-700" onClick={() => setSt(detail.id, { sixw: !s.sixw })}>🥤 กำลังเข้า 6W (ลด)</span>
                    </label>
                    {s.sixw && (
                      <div className="pl-7 flex items-center gap-2">
                        <span className="text-[12px] text-ink-500">ความคืบหน้า</span>
                        <input type="range" min="0" max="100" step="5" value={s.sixwPct || 0} onChange={e => setSt(detail.id, { sixwPct: +e.target.value })} className="flex-1" />
                        <span className="text-[13px] font-bold text-amber-600 num w-10 text-right">{s.sixwPct || 0}%</span>
                      </div>
                    )}
                    <label className="flex items-center gap-2.5 cursor-pointer">
                      <span onClick={() => setSt(detail.id, { bt: !s.bt })} className={`w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 ${s.bt ? 'bg-rose-600 border-rose-600' : 'border-ink-300 bg-white'}`}>{s.bt && <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="#fff" strokeWidth="3" strokeLinecap="round" /></svg>}</span>
                      <span className="text-[13px] text-ink-700" onClick={() => setSt(detail.id, { bt: !s.bt })}>🎯 เป็น BT แล้ว</span>
                    </label>
                  </div>
                </div>
              ); })()}

              {/* milestone track from fu_state */}
              <div className="bg-ink-50 border border-ink-100 rounded-xl p-3.5">
                <div className="text-[12.5px] font-bold text-ink-700 mb-2">สถานะการเรียน</div>
                <div className="space-y-1.5">
                  {[['bmodel','BM · Business Model'],['bincome','BI · Business Income'],['mtg1','EM Begin 1'],['mtg2','EM Begin 2'],['mtg3','EM Begin 3'],['mtg4','EM Begin 4 (Life Goal)'],['bt3','MFinity']].map(([k, lbl]) => (
                    <div key={k} className="flex items-center gap-2 text-[12.5px]">
                      <span className={`w-4 h-4 rounded flex items-center justify-center ${detail.fu?.[k] ? 'bg-emerald-500' : 'bg-ink-200'}`}>{detail.fu?.[k] && <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" /></svg>}</span>
                      <span className={detail.fu?.[k] ? 'text-ink-700' : 'text-ink-400'}>{lbl}</span>
                    </div>
                  ))}
                </div>
              </div>
              {detail.igHandle && <div className="text-[13px] text-ink-600">📷 IG: <a href={`https://instagram.com/${detail.igHandle.replace(/^@/, '')}`} target="_blank" rel="noreferrer" className="text-brand-600 font-semibold">@{detail.igHandle.replace(/^@/, '')}</a></div>}
              {detail.notes && <div className="text-[13px] text-ink-700 bg-amber-50 border border-amber-100 rounded-xl p-3 whitespace-pre-wrap">📝 {detail.notes}</div>}
            </div>
          </div>
        </div>
      )}

      {/* Organization chart popup — vertical tree */}
      {chartOpen && tree && (
        <div className="fixed inset-0 z-[70] bg-black/50 flex items-center justify-center p-4" onClick={() => setChartOpen(false)}>
          <div className="bg-white rounded-2xl w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden" onClick={e => e.stopPropagation()}>
            <div className="px-5 py-3.5 border-b border-ink-100 flex items-center justify-between">
              <div className="text-sm font-bold text-ink-900">ผังองค์กร · {currentUser?.name || 'ทีมของฉัน'}</div>
              <button onClick={() => setChartOpen(false)} className="w-8 h-8 rounded-lg bg-ink-100 text-ink-500 text-xl leading-none">×</button>
            </div>
            <div className="flex-1 overflow-auto p-6">
              <div className="flex flex-col items-center min-w-max mx-auto">
                <GsOrgNode n={tree} stOf={stOf} onClick={(n) => { if (n.id !== '_me') setDetail(n); }} />
              </div>
            </div>
            <div className="px-5 py-2.5 border-t border-ink-100 flex items-center gap-3 flex-wrap text-[11px] text-ink-500">
              <span className="inline-flex items-center gap-1"><span className="w-2 h-2 rounded" style={{ background: '#7C3AED' }} />📚 ตั้งใจศึกษา</span>
              <span className="inline-flex items-center gap-1"><span className="w-2 h-2 rounded" style={{ background: '#F59E0B' }} />🥤 6W</span>
              <span className="inline-flex items-center gap-1"><span className="w-2 h-2 rounded" style={{ background: '#DC2626' }} />🎯 BT</span>
              <span className="ml-auto">กดที่คนเพื่อแก้สถานะ</span>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
}

// Vertical organization-chart node (recursive) for the popup view.
function GsOrgNode({ n, stOf, onClick }) {
  const color = GS_PROGRAM_COLOR[n.tag] || '#64748B';
  const initial = (n.name || '?').trim()[0];
  const kids = n.children || [];
  const s = n.id !== '_me' ? (stOf ? stOf(n.id) : {}) : {};
  return (
    <div className="inline-flex flex-col items-center">
      <button onClick={() => onClick && onClick(n)}
        className={`relative bg-white border rounded-xl px-3 py-2 inline-flex items-center gap-2 min-w-[160px] transition-all hover:-translate-y-0.5 hover:shadow-card ${n.root ? 'border-purple-400 bg-purple-50/40' : 'border-ink-200'}`}
        style={{ cursor: n.id === '_me' ? 'default' : 'pointer' }}>
        <span className="w-9 h-9 rounded-lg text-white flex items-center justify-center font-bold text-[14px] flex-shrink-0" style={{ background: n.root ? '#7C3AED' : color }}>{initial}</span>
        <span className="min-w-0 text-left flex-1">
          <span className="block text-[13px] font-bold text-ink-900 truncate">{n.name}</span>
          <span className="flex gap-1 mt-0.5 flex-wrap items-center">
            <span className="text-[9.5px] font-bold px-1.5 rounded" style={{ background: color + '1A', color }}>{n.stage}</span>
            {_gsStatusBadges(s)}
          </span>
        </span>
      </button>
      {kids.length > 0 && (
        <div className="flex gap-4 mt-4 pt-4 relative before:content-[''] before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2 before:w-px before:h-4 before:bg-ink-300">
          {kids.map(c => (
            <div key={c.id} className="relative pt-0 before:content-[''] before:absolute before:-top-4 before:left-1/2 before:-translate-x-1/2 before:w-px before:h-4 before:bg-ink-300">
              <GsOrgNode n={c} stOf={stOf} onClick={onClick} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}