/* Mereka v2 — Your Programs (manage programs list) — Figma rebuild */

const YP_PROGRAMS = [
  { id: 'yp1', title: 'AI Fluency by Microsoft', status: 'LIVE', hue: 300,
    desc: 'Discover the world of artificial intelligence by exploring its foundational concepts and history. Learn how AI tec…',
    modules: 7, visibility: 'Public', members: 42 },
  { id: 'yp2', title: 'Boost Your Productivity with Copilot', status: 'DRAFT', hue: 270,
    desc: 'Leverage Microsoft Copilot to streamline workflows, enhance creativity, and support professional gro…',
    modules: 10, visibility: 'Private', members: 0 },
  { id: 'yp3', title: 'Boosting Sales and Productivity', status: 'LIVE', hue: 210,
    desc: 'Harness the power of ChatGPT to transform your sales strategies, enhance productivity, and drive business growt…',
    modules: 7, visibility: 'Public', members: 42 },
];
const YP_PROGRAMS_BY_HUB = [
  YP_PROGRAMS,
  [
    { id: 'mp1', title: 'Dynamous AI Mastery', status: 'LIVE', hue: 220,
      desc: 'Applied AI for finance and ops teams — forecasting, automated analysis and reliable reporting workflows.',
      modules: 6, visibility: 'Public', members: 128 },
    { id: 'mp2', title: 'Prompt Engineering Bootcamp', status: 'LIVE', hue: 290,
      desc: 'Hands-on prompting patterns for real work — from retrieval to evaluation, with weekly build challenges.',
      modules: 5, visibility: 'Public', members: 89 },
    { id: 'mp3', title: 'Data Pipelines with AI', status: 'DRAFT', hue: 200,
      desc: 'Design auditable, AI-assisted data pipelines your whole team can trust, from ingestion to dashboards.',
      modules: 8, visibility: 'Private', members: 0 },
  ],
  [
    { id: 'sp1', title: 'Brand Identity Sprint', status: 'LIVE', hue: 275,
      desc: 'A focused programme to define positioning, visual identity and tone of voice — shipped as a brand book.',
      modules: 4, visibility: 'Public', members: 23 },
    { id: 'sp2', title: 'Design Leadership Program', status: 'DRAFT', hue: 160,
      desc: 'Grow design managers — critique culture, systems thinking and stakeholder craft across ten modules.',
      modules: 10, visibility: 'Private', members: 0 },
  ],
];

const YP_RAIL = [
  { id: 'r1', hue: 300 }, { id: 'r2', hue: 260 }, { id: 'r3', hue: 30 },
];

function YourProgramsRail({ hasPrograms = true }) {
  return (
    <aside className="hidden lg:flex w-[72px] bg-white border-r border-neutral-200 flex-col items-center py-5 gap-3 flex-shrink-0 min-h-[calc(100vh-80px)]">
      <Link to="/app/dashboard/overview" className="w-9 h-9 rounded-full flex items-center justify-center text-neutral-400 hover:bg-neutral-100">
        <Icon name="chevronLeft" size={18} />
      </Link>
      {hasPrograms && (
        <div className="flex flex-col items-center gap-3 mt-1">
          {YP_RAIL.map(p => (
            <button key={p.id} className="relative w-11 h-11 rounded-2xl overflow-hidden border border-neutral-200">
              <span className="absolute -left-0.5 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-blue-500" />
              <div className="w-full h-full" style={{ background: `linear-gradient(135deg, oklch(0.84 0.13 ${p.hue}), oklch(0.7 0.18 ${p.hue + 30}))` }} />
            </button>
          ))}
        </div>
      )}
      <button className="w-11 h-11 rounded-2xl flex items-center justify-center text-neutral-400 hover:bg-neutral-100">
        <Icon name="plus" size={20} />
      </button>
      <button className="w-11 h-11 rounded-xl bg-neutral-100 flex items-center justify-center text-neutral-700 hover:bg-neutral-200">
        <Icon name="settings" size={18} />
      </button>
    </aside>
  );
}

function YourProgramCard({ p }) {
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    if (!menu) return;
    const h = () => setMenu(false);
    const t = setTimeout(() => document.addEventListener('click', h, { once: true }), 0);
    return () => { clearTimeout(t); document.removeEventListener('click', h); };
  }, [menu]);
  return (
    <div onClick={() => navigate('/app/program/admin/feed')}
      className="bg-white border border-neutral-200 rounded-2xl overflow-hidden flex flex-col cursor-pointer transition-all hover:border-neutral-300 hover:shadow-lg">
      <div className="aspect-[16/10]" style={{ background: `linear-gradient(135deg, oklch(0.82 0.13 ${p.hue}), oklch(0.62 0.19 ${p.hue + 40}))` }} />
      <div className="p-5 flex-1 flex flex-col">
        <div className="flex items-start justify-between gap-3">
          <h3 className="text-lg font-bold text-neutral-900 leading-tight">{p.title}</h3>
          {p.status === 'LIVE'
            ? <span className="flex-shrink-0 px-2.5 h-6 inline-flex items-center rounded-full bg-blue-500 text-white text-[12px] font-bold tracking-wide">LIVE</span>
            : <span className="flex-shrink-0 px-2.5 h-6 inline-flex items-center rounded-full bg-neutral-200 text-neutral-500 text-[12px] font-bold tracking-wide">DRAFT</span>}
        </div>
        <p className="mt-2 text-[15px] text-neutral-600 leading-snug">{p.desc}</p>
        <div className="mt-4 space-y-2">
          <p className="flex items-center gap-2.5 text-[15px] text-neutral-700"><Icon name="book" size={16} className="text-neutral-400" /> {p.modules} Modules</p>
          <p className="flex items-center gap-2.5 text-[15px] text-neutral-700">
            <Icon name={p.visibility === 'Public' ? 'globe' : 'shield'} size={16} className="text-neutral-400" /> {p.visibility}
          </p>
        </div>
        <div className="mt-5 pt-4 border-t border-neutral-100 flex items-center justify-between">
          <Link to="/app/program/admin/feed" onClick={e => e.stopPropagation()} className="inline-flex items-center gap-2 text-[15px] font-semibold text-blue-600 hover:underline">
            <Icon name="user" size={16} /> {p.members} members
          </Link>
          <div className="flex items-center gap-1 relative">
            <button onClick={e => e.stopPropagation()} className="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:bg-neutral-100" title="Invite members"><Icon name="userPlus" size={17} /></button>
            <button onClick={e => { e.stopPropagation(); setMenu(m => !m); }} className="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:bg-neutral-100"><Icon name="more" size={17} /></button>
            {menu && (
              <div onClick={e => e.stopPropagation()} className="absolute right-0 top-9 w-44 bg-white rounded-xl border border-neutral-100 py-1.5 z-30" style={{ boxShadow: '0 16px 40px rgba(0,0,0,0.16)' }}>
                <Link to="/app/program/create/basic" onClick={e => e.stopPropagation()} className="flex items-center gap-3 px-4 py-2 text-sm hover:bg-neutral-50"><Icon name="edit" size={15} className="text-neutral-500" /> Edit program</Link>
                <Link to="/app/program/admin/feed" onClick={e => e.stopPropagation()} className="flex items-center gap-3 px-4 py-2 text-sm hover:bg-neutral-50"><Icon name="eye" size={15} className="text-neutral-500" /> View feed</Link>
                <button onClick={e => e.stopPropagation()} className="w-full flex items-center gap-3 px-4 py-2 text-sm hover:bg-neutral-50 text-left"><Icon name="copy" size={15} className="text-neutral-500" /> Duplicate</button>
                <div className="border-t border-neutral-100 my-1" />
                <button onClick={e => e.stopPropagation()} className="w-full flex items-center gap-3 px-4 py-2 text-sm text-red-600 hover:bg-red-50 text-left"><Icon name="trash" size={15} /> Delete</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

/* Manage Hub Programs table — Figma 5289-47711 / 55976 */
const MHP_ROWS = [
  { name: 'AI Accelerator (AI4U)', owner: 'Christ Wales', focus: ['Flagship', 'Applied AI'], status: 'Active', duration: '12 weeks', cohorts: 6, enrolled: 382, completion: 80, rating: 4.8 },
  { name: 'AI Literacy Programme', owner: 'Nadira Tan', focus: ['Short intro', 'AI basics'], status: 'Active', duration: '4 weeks', cohorts: 8, enrolled: 412, completion: 68, rating: 3.6 },
  { name: 'Career Accelerator', owner: 'Rajiv Kumar', focus: ['Interactive sessions', 'User-centered design'], status: 'Active', duration: '2 days', cohorts: 20, enrolled: 150, completion: 85, rating: 4.1 },
  { name: 'ProConnect Pathways', owner: 'Lina Zhao', focus: ['Hands-on training', 'Statistical methods'], status: 'Active', duration: '6 weeks', cohorts: 15, enrolled: 300, completion: 90, rating: 4.5 },
  { name: 'Creators Lab', owner: 'Samuel Lee', focus: ['Field studies', 'Research techniques'], status: 'Active', duration: '3 weeks', cohorts: 10, enrolled: 250, completion: 80, rating: 4.3 },
  { name: 'Women in Tech', owner: 'Jessica Wong', focus: ['Code along lectures', 'App frameworks'], status: 'Active', duration: '5 weeks', cohorts: 12, enrolled: 400, completion: 95, rating: 4.7 },
  { name: 'Founder Fellowship', owner: 'Mohammed Ali', focus: ['Team exercises', 'Scrum methodology'], status: 'Active', duration: '4 weeks', cohorts: 18, enrolled: 350, completion: 87, rating: 4.0 },
  { name: 'Data Analytics Bootcamp', owner: 'Sofia Patel', focus: ['Introductory course', 'Cloud services'], status: 'Draft', duration: '3 weeks', cohorts: 25, enrolled: 600, completion: 92, rating: 4.6 },
  { name: 'Impact Builders', owner: 'Anwar Khan', focus: ['Market analysis', 'SEO & SEM'], status: 'Draft', duration: '4 weeks', cohorts: 14, enrolled: 350, completion: 88, rating: 4.2 },
  { name: 'No-Code Studio', owner: 'Rachel Green', focus: ['Security principles', 'Data protection'], status: 'Completed', duration: '6 weeks', cohorts: 10, enrolled: 220, completion: 93, rating: 4.4 },
];
const MHP_ROWS_BY_HUB = [MHP_ROWS.slice(0, 5), MHP_ROWS.slice(5, 8), MHP_ROWS.slice(8)];

function MHPStatus({ status }) {
  const c = status === 'Active' ? 'text-green-600' : status === 'Draft' ? 'text-neutral-500' : 'text-neutral-400';
  return <span className={`text-[13px] font-semibold ${c}`}>{status}</span>;
}

function YourProgramsPage() {
  const hub = useHub();
  const HUB_ROWS = (typeof MHP_ROWS_BY_HUB !== 'undefined' && MHP_ROWS_BY_HUB[hubIdx(hub)]) || MHP_ROWS;
  const [tab, setTab] = useState('All');
  const [adv, setAdv] = useState('All');
  const [q, setQ] = useState('');
  const advMap = { Drafted: 'Draft', Active: 'Active', Completed: 'Completed' };
  const rows = HUB_ROWS.filter(r =>
    (tab === 'All' || r.status === tab) &&
    (adv === 'All' || r.status === (advMap[adv] || adv)) &&
    (q === '' || (r.name + ' ' + r.owner + ' ' + r.focus.join(' ')).toLowerCase().includes(q.toLowerCase())));
  return (
    <DashShell active="/app/program/manage">
      <DashHeader title={`Manage Hub Programs (${HUB_ROWS.length})`} subtitle="Manage and monitor all your active and draft programmes."
        action={<Link to="/app/program/create/basic"><button className="inline-flex items-center gap-2 h-10 px-4 border border-neutral-300 rounded-lg text-sm font-semibold hover:bg-neutral-50"><Icon name="plus" size={15} /> Add programme</button></Link>}
      />
      <div className="flex items-center justify-between gap-3 mb-5 flex-wrap">
        <div className="flex items-center gap-2.5">
          {['All', 'Active', 'Completed'].map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={`px-4 h-9 rounded-full text-[13px] font-medium border transition-colors ${tab === t ? 'bg-neutral-900 text-white border-neutral-900' : 'bg-white text-neutral-600 border-neutral-200 hover:bg-neutral-50'}`}>
              {t}
            </button>
          ))}
          <PillFilter value={adv === 'All' ? 'Advanced filter' : adv} options={['All', 'Active', 'Inactive', 'Under review', 'Drafted', 'Backlog']} onChange={setAdv} />
        </div>
        <div className="flex items-center gap-2.5">
          <div className="relative w-[240px]">
            <Icon name="search" size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search for..."
              className="w-full h-10 pl-11 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none focus:border-neutral-400" />
          </div>
          <ExportButton />
        </div>
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl overflow-x-auto">
        <table className="w-full text-sm min-w-[920px]">
          <thead>
            <tr className="text-left text-[12px] font-bold tracking-wide text-neutral-500 bg-neutral-50 border-b border-neutral-200">
              <th className="px-5 py-3">PROGRAMME</th>
              <th className="px-5 py-3">FOCUS</th>
              <th className="px-5 py-3">STATUS</th>
              <th className="px-5 py-3">DURATION</th>
              <th className="px-5 py-3">COHORTS</th>
              <th className="px-5 py-3">ENROLLED</th>
              <th className="px-5 py-3">COMPLETION</th>
              <th className="px-5 py-3">RATING</th>
              <th className="px-5 py-3 text-right">ACTION</th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr><td colSpan={9} className="px-5 py-12 text-center text-sm text-neutral-500">No programmes match this filter.</td></tr>
            )}
            {rows.map((r, i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-4">
                  <Link to="/app/program/admin/overview" onClick={() => setProg(r)} className="block group">
                    <p className="font-bold text-[13px] text-neutral-900 group-hover:text-blue-600 group-hover:underline transition-colors cursor-pointer">{r.name}</p>
                    <p className="text-xs text-neutral-500 mt-0.5">{r.owner}</p>
                  </Link>
                </td>
                <td className="px-5 py-4 text-xs text-neutral-500">
                  {r.focus.map((f, j) => <div key={j}>{f}{j === 0 ? '  •' : ''}</div>)}
                </td>
                <td className="px-5 py-4"><MHPStatus status={r.status} /></td>
                <td className="px-5 py-4 text-neutral-600 whitespace-nowrap">{r.duration}</td>
                <td className="px-5 py-4 text-neutral-600">{r.cohorts}</td>
                <td className="px-5 py-4 text-neutral-600">{r.enrolled}</td>
                <td className="px-5 py-4"><span className={`font-semibold ${r.completion < 70 ? 'text-red-500' : 'text-green-600'}`}>{r.completion}%</span></td>
                <td className="px-5 py-4"><span className="inline-flex items-center gap-1 font-semibold text-neutral-700">{r.rating.toFixed(1)} <Icon name="star" size={13} fill="#FBBF24" strokeWidth={0} className="text-amber-400" /></span></td>
                <td className="px-5 py-4">
                  <div className="flex items-center justify-end gap-2">
                    <Link to="/app/program/create/basic"><button className="inline-flex items-center gap-1.5 h-8 px-3 border border-neutral-300 rounded-lg text-[13px] font-semibold hover:bg-neutral-50"><Icon name="edit" size={13} /> Edit</button></Link>
                    <Link to="/app/program/admin/overview" onClick={() => setProg(r)}><button className="w-8 h-8 rounded-lg border border-neutral-300 flex items-center justify-center text-neutral-500 hover:bg-neutral-50"><Icon name="eye" size={15} /></button></Link>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex items-center justify-between mt-4 text-sm">
        <span className="text-neutral-500">Showing 1-10 of 123</span>
        <div className="flex items-center gap-1">
          {[1, 2, 3].map(p => <button key={p} className={`w-9 h-9 rounded-full text-sm font-semibold ${p === 1 ? 'bg-neutral-900 text-white' : 'text-neutral-500 hover:bg-neutral-100'}`}>{p}</button>)}
          <span className="px-1 text-neutral-400">…</span>
          <button className="w-9 h-9 rounded-full text-sm font-semibold text-neutral-500 hover:bg-neutral-100">26</button>
          <button className="w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center text-neutral-500 hover:bg-neutral-50 ml-1"><Icon name="arrowRight" size={15} /></button>
        </div>
      </div>
    </DashShell>
  );
}

Object.assign(window, { YourProgramsPage });