// Emphasis System view — Personal, BT Qualification, EM Pack library (15 YouTube), Slide library.

function EmphasisSystemView({ currentUser }) {
  const [tab, setTab] = useState('personal');

  return (
    <div className="space-y-5">
      <SectionHead
        eyebrow="Module · Emphasis System"
        title="ระบบความรู้และคุณสมบัติ Emphasis"
        sub="ดู Personal · BT Qualification · 15 EM Pack (YouTube) · ห้องสมุด Slide / Plan"
        right={
          <Tabs
            variant="pill"
            active={tab}
            onChange={setTab}
            tabs={[
              { id: 'personal', label: 'Personal',         icon: <Icon name="target"  className="w-3.5 h-3.5" /> },
              { id: 'bt',       label: 'BT Qualification', icon: <Icon name="check"   className="w-3.5 h-3.5" /> },
              { id: 'packs',    label: 'EM Pack · 15',     icon: <Icon name="youtube" className="w-3.5 h-3.5" /> },
              { id: 'slides',   label: 'Slide / Plan',     icon: <Icon name="slides"  className="w-3.5 h-3.5" /> },
            ]}
          />
        }
      />

      {tab === 'personal' && <EsPersonalTab />}
      {tab === 'bt'       && <EsBTTab />}
      {tab === 'packs'    && <EsPacksTab />}
      {tab === 'slides'   && <EsSlidesTab />}
    </div>
  );
}

// ============= Personal — Wheel of Life + Skills + 100 Dreams =============
function EsPersonalTab() {
  return (
    <div className="grid grid-cols-12 gap-4">
      <Card className="col-span-12 lg:col-span-6" title="Wheel of Life" action={<Pill color="#2F5DE5" tint="#EEF4FF">avg 7.0 / 10</Pill>}>
        <div className="grid grid-cols-12 gap-4 items-center">
          <div className="col-span-12 sm:col-span-7 flex justify-center">
            <EsWheel />
          </div>
          <div className="col-span-12 sm:col-span-5 space-y-1.5">
            {WHEEL.map(w => (
              <div key={w.area} className="flex items-center gap-2">
                <span className="text-xs text-ink-700 w-24">{w.area}</span>
                <Bar value={w.score} max={10} color="#2F5DE5" height={4} />
                <span className="text-[11px] num text-ink-500 w-6 text-right">{w.score}</span>
              </div>
            ))}
          </div>
        </div>
      </Card>

      <Card className="col-span-12 lg:col-span-6"
            title={<div className="flex items-center gap-2"><span className="text-sm font-semibold text-ink-800">Personal Skill Checkup</span><span className="text-[11px] text-ink-400">9% · 12% · 21% group</span></div>}
            action={<Pill color="#1B379F" tint="#EEF4FF" icon={<Icon name="bolt" className="w-3 h-3" />}>12% Group</Pill>}>
        <div className="space-y-3">
          {SKILLS.map(s => {
            const pct = s.score / s.max;
            return (
              <div key={s.id}>
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-xs font-medium text-ink-700">{s.label}</span>
                  <span className="text-[11px] num text-ink-500">{s.score}/{s.max}</span>
                </div>
                <Bar value={s.score} max={s.max} height={6} color={pct >= 0.9 ? '#10B981' : pct >= 0.6 ? '#2F5DE5' : '#F59E0B'} />
              </div>
            );
          })}
        </div>
        <div className="mt-5 pt-4 border-t border-ink-100 grid grid-cols-3 gap-2 text-center">
          {[
            { label: '9%',  color: '#10B981', desc: 'พื้นฐาน' },
            { label: '12%', color: '#2F5DE5', desc: 'กลาง', active: true },
            { label: '21%', color: '#1B379F', desc: 'สูง' },
          ].map(g => (
            <div key={g.label} className={`rounded-lg p-2 ${g.active ? 'ring-2 ring-brand-500 bg-brand-50' : 'bg-ink-50/50'}`}>
              <div className="text-base font-bold num" style={{ color: g.color }}>{g.label}</div>
              <div className="text-[10px] text-ink-500">{g.desc}</div>
            </div>
          ))}
        </div>
      </Card>

      <Card className="col-span-12" title={
        <div className="flex items-center gap-2">
          <span className="text-sm font-semibold text-ink-800">100 Dreamlist</span>
          <span className="text-[11px] text-ink-400">เป้าหมายชีวิตทั้งหมด</span>
        </div>
      } action={<Btn variant="ghost" size="sm" icon={<Icon name="plus" />}>เพิ่ม</Btn>}>
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
          {[
            ['🏝️ บ้านที่หัวหิน', true], ['🚗 BMW M3', false], ['✈️ ยุโรป 30 วัน', false],
            ['💎 Diamond Pin', false], ['👨‍👩‍👧 พ่อแม่เลิกทำงาน', true], ['📚 หนังสือ 50 เล่ม', true],
            ['🏋️ น้ำหนัก 58kg', false], ['🎓 จบ MBA', false], ['🏆 รถ Top Achiever', false],
            ['💰 รายได้ 7 หลัก', false], ['🌍 ไป 30 ประเทศ', false], ['🎤 พูด TEDx', false],
          ].map(([dream, done], i) => (
            <div key={i} className={`rounded-lg border p-2.5 text-xs ${done ? 'border-emerald-200 bg-emerald-50/40' : 'border-ink-100 bg-white'}`}>
              <div className="flex items-start gap-1.5">
                <input type="checkbox" defaultChecked={done} className="mt-0.5 accent-emerald-500" />
                <span className={`text-ink-700 ${done ? 'line-through text-ink-400' : ''}`}>{dream}</span>
              </div>
            </div>
          ))}
          <div className="rounded-lg border-2 border-dashed border-ink-200 p-2.5 text-xs text-ink-400 flex items-center justify-center hover:border-brand-300 hover:text-brand-500 cursor-pointer">
            + 88 ที่เหลือ
          </div>
        </div>
      </Card>
    </div>
  );
}

function EsWheel() {
  const size = 220;
  const cx = size / 2, cy = size / 2;
  const segs = WHEEL.length;
  const max = 10;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <defs>
        <radialGradient id="esWheelGrad">
          <stop offset="0%" stopColor="#2F5DE5" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#2F5DE5" stopOpacity="0.15" />
        </radialGradient>
      </defs>
      {[1, 2.5, 5, 7.5, 10].map((r, i) => (
        <circle key={i} cx={cx} cy={cy} r={(r / max) * (size / 2 - 12)} fill="none" stroke="#E6EAF3" strokeWidth="1" />
      ))}
      {WHEEL.map((w, i) => {
        const a = (i / segs) * Math.PI * 2 - Math.PI / 2;
        const r = size / 2 - 12;
        return <line key={i} x1={cx} y1={cy} x2={cx + Math.cos(a) * r} y2={cy + Math.sin(a) * r} stroke="#E6EAF3" strokeWidth="1" />;
      })}
      <polygon
        fill="url(#esWheelGrad)"
        stroke="#2F5DE5"
        strokeWidth="2"
        points={WHEEL.map((w, i) => {
          const a = (i / segs) * Math.PI * 2 - Math.PI / 2;
          const r = (w.score / max) * (size / 2 - 12);
          return `${cx + Math.cos(a) * r},${cy + Math.sin(a) * r}`;
        }).join(' ')}
      />
      {WHEEL.map((w, i) => {
        const a = (i / segs) * Math.PI * 2 - Math.PI / 2;
        const r = size / 2 - 4;
        return (
          <text key={i} x={cx + Math.cos(a) * r} y={cy + Math.sin(a) * r + 3}
                textAnchor="middle" fontSize="9" fill="#445576" fontWeight="600">{w.area}</text>
        );
      })}
    </svg>
  );
}

// ============= BT Qualification — Checklist + 9 Principles =============
function EsBTTab() {
  const done = BT_CHECKLIST.filter(b => b.done).length;
  return (
    <div className="grid grid-cols-12 gap-4">
      <Card className="col-span-12 lg:col-span-7" title="BT Qualification Checklist · 6 ข้อ"
            action={<Pill color="#10B981" tint="#E7F8F1">{done}/6 ผ่าน</Pill>}>
        <div className="space-y-2.5">
          {BT_CHECKLIST.map((b, i) => (
            <div key={b.id} className={`flex items-center gap-3 p-3 rounded-xl border ${b.done ? 'border-emerald-100 bg-emerald-50/30' : 'border-ink-100 bg-white'}`}>
              <div className={`w-6 h-6 rounded-full flex-shrink-0 flex items-center justify-center text-xs font-bold ${b.done ? 'bg-emerald-500 text-white' : 'border-2 border-ink-200 text-ink-400'}`}>
                {b.done ? <Icon name="check" className="w-3 h-3" strokeWidth={3} /> : i + 1}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-ink-900">{b.label}</div>
                <div className="text-[11px] text-ink-500 num mt-0.5">{b.detail}</div>
                {!b.done && b.progress !== undefined && (
                  <div className="mt-1.5"><Bar value={b.progress} color="#F59E0B" height={3} /></div>
                )}
              </div>
              {b.done && <Pill color="#10B981" tint="#E7F8F1" size="xs">✓ ผ่าน</Pill>}
            </div>
          ))}
        </div>
      </Card>

      <Card className="col-span-12 lg:col-span-5" title="9 Principles for Success">
        <div className="space-y-2">
          {PRINCIPLES.map(p => (
            <div key={p.id} className="flex items-center gap-2.5">
              <div className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center text-[11px] font-bold ${p.done ? 'bg-brand-500 text-white' : 'bg-ink-100 text-ink-400'}`}>
                {p.done ? <Icon name="check" className="w-3.5 h-3.5" strokeWidth={3} /> : p.id}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-xs font-medium text-ink-700">{p.label}</div>
                {!p.done && p.progress !== undefined && (
                  <div className="mt-1"><Bar value={p.progress} color="#2F5DE5" height={2.5} /></div>
                )}
              </div>
              <span className="text-[10px] num text-ink-400">{p.done ? '100%' : `${Math.round((p.progress || 0) * 100)}%`}</span>
            </div>
          ))}
        </div>
        <div className="mt-4 pt-3 border-t border-ink-100 flex items-center justify-between text-[11px] text-ink-500">
          <span>เสร็จ {PRINCIPLES.filter(p => p.done).length} / 9</span>
          <Btn variant="ghost" size="sm" icon={<Icon name="arrowR" className="w-3 h-3" />}>ดูรายละเอียด</Btn>
        </div>
      </Card>
    </div>
  );
}

// ============= 15 EM Pack — YouTube Library =============
function EsPacksTab() {
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState(null);

  const myProgress = 12; // from BT_CHECKLIST detail "em3 = 3/3" but we have 12 from ABO_LIST
  const filtered = EM_PACKS.filter(p =>
    filter === 'all' ? true :
    filter === 'done' ? p.num < myProgress :
    p.num >= myProgress
  );

  return (
    <div className="space-y-4">
      {/* Progress summary */}
      <Card pad={false}>
        <div className="p-5 flex items-center gap-5 bg-gradient-to-r from-brand-50 via-white to-amber-50">
          <Ring value={myProgress} max={15} size={88} stroke={9} color="#F59E0B">
            <div className="text-center">
              <div className="text-lg font-bold num text-ink-900">{myProgress}/15</div>
              <div className="text-[9px] uppercase tracking-wider text-ink-500">EM Pack</div>
            </div>
          </Ring>
          <div className="flex-1">
            <div className="text-[11px] uppercase tracking-wider text-amber-700 font-semibold">ความคืบหน้าการเรียน</div>
            <div className="text-base font-semibold text-ink-900 mt-0.5">เรียนผ่าน {myProgress} / 15 Pack — เหลืออีก {15 - myProgress} pack</div>
            <div className="text-xs text-ink-500 mt-1">เป้าหมาย: เรียนครบทั้ง 15 ภายในสิ้นไตรมาส</div>
          </div>
          <div className="flex gap-1.5">
            {['all', 'done', 'todo'].map(f => (
              <button key={f} onClick={() => setFilter(f)}
                className={`text-xs font-medium px-3 py-1.5 rounded-md transition-all ${filter === f ? 'bg-ink-900 text-white' : 'bg-white text-ink-600 hover:bg-ink-50'}`}>
                {f === 'all' ? 'ทั้งหมด' : f === 'done' ? 'เรียนแล้ว' : 'ยังไม่เรียน'}
              </button>
            ))}
          </div>
        </div>
      </Card>

      {/* Pack grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        {filtered.map(p => {
          const done = p.num < myProgress;
          const current = p.num === myProgress;
          return (
            <button key={p.num} onClick={() => setSelected(p)}
                    className={`text-left rounded-2xl border transition-all p-4 group hover:shadow-lift hover:-translate-y-0.5 ${current ? 'border-amber-300 bg-gradient-to-br from-amber-50 to-white ring-2 ring-amber-200' : done ? 'border-emerald-100 bg-white' : 'border-ink-100 bg-white'}`}>
              <div className="flex items-center justify-between mb-3">
                <div className={`w-9 h-9 rounded-lg flex items-center justify-center font-bold text-sm ${done ? 'bg-emerald-500 text-white' : current ? 'bg-amber-400 text-white' : 'bg-ink-100 text-ink-400'}`}>
                  {done ? <Icon name="check" className="w-4 h-4" strokeWidth={3} /> : p.num}
                </div>
                <div className="flex items-center gap-1">
                  {current && <Pill color="#B87C00" tint="#FFECB8" size="xs">▶ กำลังเรียน</Pill>}
                  {done && <Pill color="#10B981" tint="#E7F8F1" size="xs">✓ ผ่าน</Pill>}
                  <Icon name="youtube" className="w-4 h-4 text-rose-500" strokeWidth={2} />
                </div>
              </div>
              <div className="text-sm font-semibold text-ink-900 mb-1">Pack {p.num} · {p.title}</div>
              <div className="text-[11px] text-ink-500 num flex items-center gap-1.5">
                <Icon name="clock" className="w-3 h-3" /> {p.dur}
              </div>
            </button>
          );
        })}
      </div>

      <Modal open={!!selected} onClose={() => setSelected(null)} title={selected ? `Pack ${selected.num} · ${selected.title}` : ''} size="md">
        {selected && (
          <div className="space-y-3">
            <div className="aspect-video rounded-xl bg-ink-900 flex items-center justify-center text-white relative overflow-hidden">
              <Icon name="youtube" className="w-12 h-12 text-rose-500" strokeWidth={2} />
              <span className="absolute bottom-3 left-3 text-[11px] text-white/70 num">{selected.dur}</span>
            </div>
            <div className="flex items-center gap-2">
              <Btn variant="brand" size="sm" icon={<Icon name="youtube" className="w-3.5 h-3.5" />}>เปิดบน YouTube</Btn>
              <Btn variant="ghost" size="sm" icon={<Icon name="share-2" className="w-3.5 h-3.5" />}>ส่งให้ DL</Btn>
              <Btn variant="ghost" size="sm" icon={<Icon name="check" className="w-3.5 h-3.5" />}>ทำเครื่องหมายว่าเรียนแล้ว</Btn>
            </div>
            <div className="text-xs text-ink-500 leading-relaxed">{selected.url === '#' ? 'Link จริงจะใส่ที่ data layer / CMS' : selected.url}</div>
          </div>
        )}
      </Modal>
    </div>
  );
}

// ============= Slide / Plan Library =============
function EsSlidesTab() {
  const [group, setGroup] = useState('all');
  const groups = ['all', ...new Set(SLIDES.map(s => s.group))];
  const list = group === 'all' ? SLIDES : SLIDES.filter(s => s.group === group);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-1.5">
        {groups.map(g => (
          <button key={g} onClick={() => setGroup(g)}
            className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-all ${group === g ? 'bg-ink-900 text-white' : 'bg-white border border-ink-200 text-ink-600 hover:bg-ink-50'}`}>
            {g === 'all' ? 'ทั้งหมด' : g}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        {list.map(s => (
          <Card key={s.id} pad={false} className="hover:shadow-lift hover:-translate-y-0.5 transition-all cursor-pointer">
            <div className="aspect-[4/3] bg-gradient-to-br from-ink-50 to-brand-50 rounded-t-2xl flex items-center justify-center text-5xl">
              {s.thumb}
            </div>
            <div className="p-4">
              <div className="flex items-center gap-2 mb-1">
                <Pill color="#1B379F" tint="#EEF4FF" size="xs">{s.group}</Pill>
                <span className="text-[10px] text-ink-400 num">{s.pages} pages</span>
              </div>
              <div className="text-sm font-semibold text-ink-900 mb-2">{s.title}</div>
              <div className="flex items-center justify-between text-[11px]">
                <span className="text-ink-500">อัปเดต {s.updated}</span>
                <div className="flex items-center gap-1.5 text-brand-600">
                  <Icon name="eye" className="w-3.5 h-3.5" />
                  <Icon name="share-2" className="w-3.5 h-3.5" />
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

window.EmphasisSystemView = EmphasisSystemView;