/* Mereka v2 — Analytics: Programme, Course, Experience, Expertise, Gig */

/* ============ MOCK DATA ============ */
const ALL_PROGRAMMES = [
  { id: 'pg-ai4u', name: 'AI ACCELERATOR (AI4U)', lead: 'Christ Wales', focus: ['Flagship', 'Applied AI'], status: 'Active', duration: '12 weeks', cohorts: 6, enrolled: 382, completion: 80, rating: 4.8, revenue: 'RM 198K' },
  { id: 'pg-litr', name: 'AI LITERACY PROGRAMME', lead: 'Nadira Tan', focus: ['Short intro', 'AI basics'], status: 'Active', duration: '4 weeks', cohorts: 8, enrolled: 412, completion: 68, rating: 3.6, revenue: 'RM 152K' },
  { id: 'pg-career', name: 'CAREER ACCELERATOR', lead: 'Rajiv Kumar', focus: ['Interactive sessions', 'User-centered design'], status: 'Active', duration: '2 days', cohorts: 20, enrolled: 150, completion: 85, rating: 4.1, revenue: 'RM 50K' },
  { id: 'pg-pcp', name: 'PROCONNECT PATHWAYS', lead: 'Lina Zhao', focus: ['Hands-on training', 'Statistical methods'], status: 'Active', duration: '6 weeks', cohorts: 15, enrolled: 300, completion: 90, rating: 4.5, revenue: 'RM 200K' },
  { id: 'pg-creators', name: 'CREATORS LAB', lead: 'Samuel Lee', focus: ['Field studies', 'Research techniques'], status: 'Active', duration: '3 weeks', cohorts: 10, enrolled: 250, completion: 80, rating: 4.3, revenue: 'RM 75K' },
  { id: 'pg-wit', name: 'WOMEN IN TECH', lead: 'Jessica Wong', focus: ['Code along lectures', 'App frameworks'], status: 'Active', duration: '5 weeks', cohorts: 12, enrolled: 400, completion: 95, rating: 4.7, revenue: 'RM 120K' },
  { id: 'pg-ff', name: 'FOUNDER FELLOWSHIP', lead: 'Mohammed Ali', focus: ['Team exercises', 'Scrum methodology'], status: 'Active', duration: '4 weeks', cohorts: 18, enrolled: 350, completion: 87, rating: 4.0, revenue: 'RM 90K' },
  { id: 'pg-da', name: 'DATA ANALYTICS BOOTCAMP', lead: 'Sofia Patel', focus: ['Introductory course', 'Cloud services'], status: 'Active', duration: '3 weeks', cohorts: 25, enrolled: 600, completion: 92, rating: 4.6, revenue: 'RM 110K' },
  { id: 'pg-impact', name: 'IMPACT BUILDERS', lead: 'Anwar Khan', focus: ['Market analysis', 'SEO & SEM'], status: 'Active', duration: '4 weeks', cohorts: 14, enrolled: 350, completion: 88, rating: 4.2, revenue: 'RM 85K' },
  { id: 'pg-nc', name: 'NO-CODE STUDIO', lead: 'Rachel Green', focus: ['Security principles', 'Data protection'], status: 'Active', duration: '6 weeks', cohorts: 10, enrolled: 220, completion: 93, rating: 4.4, revenue: 'RM 95K' },
];

const ALL_EXPERIENCES_AN = [
  { id: 'ex-rai', name: 'RESPONSIBLE AI FORUM', host: 'Christ Wales', type: 'Talks', mode: 'Hybrid', date: '27 Mar 2026', location: "Taylor's University, Sub…", tickets: 382, fill: 85, rating: 4.8, revenue: 'RM 38,400' },
  { id: 'ex-mls', name: 'MACHINE LEARNING SUMMIT', host: 'Christ Wales', type: 'Event', mode: 'Physical', date: '12 Mar 2026', location: 'Connexion Conference Ce…', tickets: 512, fill: 78, rating: 3.8, revenue: 'RM 102,400' },
  { id: 'ex-gai', name: 'GENRATIVE AI WORKSHOP', host: 'Christ Wales', type: 'Workshop', mode: 'Physical', date: '12 Mar 2026', location: 'Mereka Makerspace, KL', tickets: 123, fill: 92, rating: 4.8, revenue: 'RM 24,400' },
  { id: 'ex-ux', name: 'UX DESIGN BOOTCAMP', host: 'Aisha Rahman', type: 'Online', mode: 'Virtual', date: '22 Apr 2026', location: 'Zoom Platform', tickets: 50, fill: 88, rating: 4.6, revenue: 'RM 15,600' },
  { id: 'ex-fed', name: 'FRONT-END DEVELOPMENT SEMINAR', host: 'Marcus Lee', type: 'Seminar', mode: 'Hybrid', date: '5 Jun 2026', location: 'Tech Hub, SG', tickets: 200, fill: 85, rating: 4.9, revenue: 'RM 30,000' },
  { id: 'ex-dsc', name: 'DATA SCIENCE CONFERENCE', host: 'Nina Wong', type: 'Conference', mode: 'Physical', date: '10 Aug 2026', location: 'Convention Center, KL', tickets: 350, fill: 90, rating: 4.7, revenue: 'RM 50,000' },
];

const ALL_EXPERTS = [
  { id: 'x-cw', name: 'CHRIS WALES', expertise: 'AI Strategy', rate: 'RM 500/hr', availability: 'Available', bookings: 132, rating: 3.8, response: '<1h', revenue: 'RM 38,400' },
  { id: 'x-jb', name: 'JASON BROWN', expertise: 'UX Design', rate: 'RM 400/hr', availability: 'Available', bookings: 125, rating: 4.5, response: '<2h', revenue: 'RM 30,000' },
  { id: 'x-sc', name: 'SOPHIA CHEN', expertise: 'Web Development', rate: 'RM 600/hr', availability: 'Busy', bookings: 98, rating: 4.7, response: '<3h', revenue: 'RM 40,800' },
  { id: 'x-ls', name: 'LIAM SMITH', expertise: 'Content Writing', rate: 'RM 350/hr', availability: 'Available', bookings: 210, rating: 4.2, response: '<4h', revenue: 'RM 73,500' },
  { id: 'x-ej', name: 'EMMA JOHNSON', expertise: 'Data Analysis', rate: 'RM 550/hr', availability: 'Available', bookings: 150, rating: 3.9, response: '<2h', revenue: 'RM 82,500' },
  { id: 'x-am', name: 'AVA MARTINEZ', expertise: 'Digital Marketing', rate: 'RM 450/hr', availability: 'Available', bookings: 112, rating: 4.0, response: '<1h', revenue: 'RM 50,400' },
  { id: 'x-lc', name: 'LIAM CHEN', expertise: 'User Experience Design', rate: 'RM 500/hr', availability: 'Busy', bookings: 200, rating: 4.8, response: '<5h', revenue: 'RM 100,000' },
  { id: 'x-sp', name: 'SOFIA PATEL', expertise: 'Web Development', rate: 'RM 400/hr', availability: 'Available', bookings: 150, rating: 4.5, response: '<3h', revenue: 'RM 60,000' },
  { id: 'x-nj', name: 'NOAH JOHNSON', expertise: 'Graphic Design', rate: 'RM 350/hr', availability: 'Available', bookings: 95, rating: 4.2, response: '<2h', revenue: 'RM 33,250' },
  { id: 'x-er', name: 'EMMA RODRIGUEZ', expertise: 'Content Creation', rate: 'RM 300/hr', availability: 'Busy', bookings: 80, rating: 4.6, response: '<4h', revenue: 'RM 24,000' },
  { id: 'x-od', name: 'OLIVER DAVIS', expertise: 'SEO Specialist', rate: 'RM 450/hr', availability: 'Available', bookings: 120, rating: 4.3, response: '<2h', revenue: 'RM 54,000' },
  { id: 'x-mb', name: 'MIA BROWN', expertise: 'Social Media Manager', rate: 'RM 350/hr', availability: 'Busy', bookings: 75, rating: 4.7, response: '<6h', revenue: 'RM 26,250' },
  { id: 'x-ew', name: 'ELIJAH WILSON', expertise: 'App Development', rate: 'RM 600/hr', availability: 'Available', bookings: 140, rating: 4.9, response: '<1h', revenue: 'RM 84,000' },
  { id: 'x-ia', name: 'ISABELLA ANDERSON', expertise: 'Data Analysis', rate: 'RM 500/hr', availability: 'Available', bookings: 90, rating: 4.1, response: '<3h', revenue: 'RM 45,000' },
  { id: 'x-jt', name: 'JAMES THOMAS', expertise: 'Project Management', rate: 'RM 550/hr', availability: 'Available', bookings: 160, rating: 4.4, response: '<5h', revenue: 'RM 88,000' },
];

const ALL_COURSES = [
  { id: 'c-gen', name: 'GEN AI FUNDAMENTALS', meta: '12 hrs • 8 modules', category: 'AI & ML', instructor: 'Chris Wales', link: 'Programme', linkTone: 'green', hours: '12h', enrolled: 1284, completion: 82, rating: 4.8, revenue: 'RM 128k' },
  { id: 'c-ux', name: 'UX RESEARCH MASTERCLASS', meta: '12 hrs • 8 modules', category: 'UX', instructor: 'Jason Brown', link: 'Programme', linkTone: 'green', hours: '12h', enrolled: 823, completion: 82, rating: 4.8, revenue: 'RM 128k' },
  { id: 'c-ada', name: 'ADVANCED DATA ANALYTICS', meta: '15 hrs • 10 modules', category: 'Data Science', instructor: 'Alex Chen', link: 'Programme', linkTone: 'green', hours: '15h', enrolled: 244, completion: 85, rating: 4.7, revenue: 'RM 145k' },
  { id: 'c-cce', name: 'CLOUD COMPUTING ESSENTIALS', meta: '10 hrs • 6 modules', category: 'Cloud Tech', instructor: 'Jordan Lee', link: 'Standalone', linkTone: 'gray', hours: '10h', enrolled: 589, completion: 80, rating: 4.6, revenue: 'RM 100k' },
  { id: 'c-cb', name: 'CYBERSECURITY BASICS', meta: '8 hrs • 5 modules', category: 'Security', instructor: 'Samira Ali', link: 'Programme', linkTone: 'green', hours: '8h', enrolled: 900, completion: 78, rating: 4.5, revenue: 'RM 90k' },
  { id: 'c-uxui', name: 'UX/UI DESIGN PRINCIPLES', meta: '20 hrs • 12 modules', category: 'Design', instructor: 'Leo Kim', link: 'Programme', linkTone: 'green', hours: '20h', enrolled: 1023, completion: 88, rating: 4.9, revenue: 'RM 160k' },
  { id: 'c-dms', name: 'DIGITAL MARKETING STRATEGIES', meta: '18 hrs • 9 modules', category: 'Marketing', instructor: 'Sophia Zhang', link: 'Program', linkTone: 'green', hours: '18h', enrolled: 195, completion: 73, rating: 4.8, revenue: 'RM 130k' },
  { id: 'c-fsd', name: 'FULL STACK DEVELOPMENT', meta: '25 hrs • 14 modules', category: 'Dev', instructor: 'James Lee', link: 'Standalone', linkTone: 'gray', hours: '25h', enrolled: 234, completion: 68, rating: 4.9, revenue: 'RM 200k' },
  { id: 'c-bto', name: 'BLOCKCHAIN TECHNOLOGY OVERVIEW', meta: '13 hrs • 7 modules', category: 'AI & ML', instructor: 'Maya Patel', link: 'Standalone', linkTone: 'gray', hours: '13h', enrolled: 102, completion: 59, rating: 4.6, revenue: 'RM 110k' },
  { id: 'c-apm', name: 'AGILE PROJECT MANAGEMENT', meta: '11 hrs • 8 modules', category: 'Project Man…', instructor: 'Nina Wood', link: 'Standalone', linkTone: 'gray', hours: '11h', enrolled: 429, completion: 79, rating: 4.4, revenue: 'RM 85k' },
];

const ALL_GIGS = [
  { id: 'g-1', name: 'AI CHATBOT FOR SME E-COMMERCE', category: 'AI & ML', client: 'Maybank Innovation', status: 'Open', budget: 'RM 8.5k', proposals: 12, posted: '18 Apr 2026', duration: '4 weeks' },
  { id: 'g-2', name: 'UX RESEARCH FOR FINTECH APP', category: 'Design', client: 'TNG Digital', status: 'In progress', budget: 'RM 6.5k', proposals: 18, posted: '18 Apr 2026', duration: '3 weeks' },
  { id: 'g-3', name: 'VOICE-ASSISTED SHOPPING APP', category: 'AI & ML', client: 'Tech Innovators', status: 'Closed', budget: 'RM 6k', proposals: 10, posted: '15 May 2025', duration: '6 weeks' },
  { id: 'g-4', name: 'AUGMENTED REALITY STORE DISPLAY', category: 'AR & VR', client: 'Future Retail', status: 'Open', budget: 'RM 12k', proposals: 8, posted: '22 Jun 2026', duration: '8 weeks' },
  { id: 'g-5', name: 'BLOCKCHAIN SUPPLY CHAIN TRACKER', category: 'Blockchain', client: 'Secure Logistics', status: 'Open', budget: 'RM 15k', proposals: 15, posted: '10 Jul 2026', duration: '10 weeks' },
  { id: 'g-6', name: 'PERSONALIZED FASHION RECOMMENDATION ENGINE', category: 'AI & ML', client: 'Style Smart', status: 'Closed', budget: 'RM 7.5k', proposals: 5, posted: '11 Mar 2025', duration: '5 weeks' },
  { id: 'g-7', name: 'AUTOMATED CUSTOMER FEEDBACK ANALYZER', category: 'AI & ML', client: 'Insightful Tech', status: 'Open', budget: 'RM 9k', proposals: 6, posted: '14 Aug 2025', duration: '4 weeks' },
  { id: 'g-8', name: 'MOBILE PAYMENT GATEWAY INTEGRATION', category: 'Fintech', client: 'PayTech Solutions', status: 'Open', budget: 'RM 11k', proposals: 9, posted: '19 Sep 2025', duration: '3 weeks' },
  { id: 'g-9', name: 'DYNAMIC PRICING STRATEGY TOOL', category: 'AI & ML', client: 'Market Edge', status: 'Closed', budget: 'RM 14k', proposals: 7, posted: '25 Dec 2025', duration: '8 weeks' },
  { id: 'g-10', name: 'INVENTORY MANAGEMENT OPTIMIZATION SOFTWARE', category: 'AI & ML', client: 'Smart Store', status: 'Open', budget: 'RM 13k', proposals: 11, posted: '30 Jan 2026', duration: '6 weeks' },
  { id: 'g-11', name: 'INTERACTIVE PRODUCT GUIDE', category: 'AR & VR', client: 'GuideMe', status: 'Open', budget: 'RM 5k', proposals: 3, posted: '20 Feb 2025', duration: '4 weeks' },
  { id: 'g-12', name: 'SOCIAL MEDIA MARKETING AUTOMATION', category: 'AI & ML', client: 'MarketFlow', status: 'Closed', budget: 'RM 10k', proposals: 12, posted: '14 Mar 2026', duration: '7 weeks' },
  { id: 'g-13', name: 'LOYALTY REWARDS PROGRAM PLATFORM', category: 'Fintech', client: 'Customer First', status: 'Open', budget: 'RM 8k', proposals: 10, posted: '18 Apr 2025', duration: '5 weeks' },
  { id: 'g-14', name: 'AI-DRIVEN CHAT SUPPORT SYSTEM', category: 'AI & ML', client: 'ChatPro', status: 'Open', budget: 'RM 9.5k', proposals: 14, posted: '15 Nov 2025', duration: '3 weeks' },
  { id: 'g-15', name: 'E-COMMERCE ANALYTICS DASHBOARD', category: 'Data Analytics', client: 'Insight Data', status: 'Closed', budget: 'RM 12.5k', proposals: 8, posted: '1 Dec 2026', duration: '6 weeks' },
];

const GEO_ROWS = [
  ['Kuala Lumpur', 51, 1663],
  ['Selangor', 24, 800],
  ['Negeri Sembilan', 10, 306],
  ['Penang', 7, 214],
  ['Johor Bahru', 5, 152],
];

/* =================================================================
   PROGRAMME ANALYTICS
   ================================================================= */
function ProgrammeAnalyticsPage() {
  return (
    <AnalyticsShell active="/app/analytics/programme">
      <APageHeader title="Programme Analytics" subtitle="Deep-dive into programme performance, learner journeys, and outcomes."
        action={
          <div className="flex items-center gap-2">
            <Link to="/app/analytics/programme/all"><button className="h-10 px-4 border border-neutral-300 rounded-lg text-sm font-medium hover:bg-neutral-50">View All Programmes</button></Link>
            <ExportBtn />
          </div>
        }
      />

      <FilterRow items={[
        { label: 'Programmes', value: 'Selected', count: 5, dot: '#22C55E' },
        { label: 'Cohorts', value: 'All', count: 5, dot: '#22C55E' },
        { label: 'Component types', value: 'All', count: 3, dot: '#22C55E' },
        { label: 'Results', value: 'Combined' },
      ]} />

      <h2 className="text-xl font-bold mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Active Members" value="1,509" delta="+8.4%" sub="vs last period" />
        <StatBox label="Retention Rate" value="2,847" delta="+2.1%" sub="at week 8" />
        <StatBox label="Completion Rate" value={<>67% <span className="text-xs align-middle ml-1 px-2 py-0.5 bg-blue-100 text-blue-600 rounded font-semibold">ON TRACK</span></>} delta="+4.2%" sub="vs 65% target" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-10">
        <StatBox label="Confidence Score" value="67%" delta="+5.0%" sub="self-reported" />
        <StatBox label="Certificates Issued" value="412" delta="+13.6%" sub="this period" />
        <StatBox label="NPS Score" value="72" delta="+6%" sub="industry avg 41" />
      </div>

      {/* Combined Composition Snapshot */}
      <div className="flex items-start justify-between mb-3">
        <div>
          <h2 className="text-xl font-bold">Combined Composition Snapshot</h2>
          <p className="text-sm text-neutral-500 mt-0.5">How the 14 active programmes are built from reusable courses, experiences &amp; expertise</p>
        </div>
        <p className="text-xs text-neutral-500">218 unique components &nbsp;•&nbsp; 842 programme-component links</p>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
        <CompositionCard color="#22C55E" title="Programmes" big="14" sub="Containers • 5,109 active members" line="avg 24.4 components each" />
        <CompositionCard color="#EC4899" title="Courses" big="68" sub="38 in this stream" line={['81 shared (1.2) • 10 exclusive • 6 standalone', 'avg. reuse 2.4× per course']} />
        <CompositionCard color="#F59E0B" title="Experiences" big="52" sub="47 catalogued items" line={['32 shared (1.2) • 12 exclusive • 11 standalone', '59% of attendees vs programmes']} />
        <CompositionCard color="#06B6D4" title="Expertise" big="94" sub="1,247 total experts" line={['38 shared (1.2) • 38 exclusive • 38 standalone', 'program-weighted rate +28%']} />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <SnapshotCard title="Reuse depth" body={['62% of components are shared across 2+ programmes', 'inc 38% exclusive']} />
        <SnapshotCard title="Deepest overlap" body={['AI4U ↔ AI Literacy Programme share 13 components', '(5 courses • 4 experiences • 2 coaches)']} />
        <SnapshotCard title="Standalone catalogue" body={['54 items never tied to a programme', '(6 courses • 12 experiences • 36 coaches)']} />
      </div>

      {/* Programme Composition table */}
      <div className="flex items-start justify-between mb-3">
        <div>
          <h3 className="font-bold">Programme Composition</h3>
          <p className="text-xs text-neutral-500 mt-0.5">Each programme is a curated combination — sharing count shows components reused across other programmes</p>
        </div>
        <ExportBtn />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden mb-10">
        <div className="px-5 py-3 flex items-center gap-3 border-b border-neutral-100">
          <SearchBox placeholder="Search inside the programme" className="w-[260px]" />
          <button className="text-xs px-2 py-1 bg-neutral-100 rounded">0 shared</button>
          <span className="text-xs text-neutral-500">0 filters; how many also appear at least once in other programmes</span>
          <div className="flex-1" />
          <span className="text-xs font-medium text-neutral-700">Shared % <span className="text-neutral-500">↑</span></span>
          <span className="text-xs text-neutral-500">% of total components that are shared elsewhere</span>
        </div>
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-2.5 font-semibold">Programme</th>
              <th className="text-left px-3 py-2.5 font-semibold">Courses</th>
              <th className="text-left px-3 py-2.5 font-semibold">Experiences</th>
              <th className="text-left px-3 py-2.5 font-semibold">Expertise</th>
              <th className="text-left px-3 py-2.5 font-semibold">Active</th>
              <th className="text-left px-3 py-2.5 font-semibold">Completion</th>
              <th className="text-left px-3 py-2.5 font-semibold">Revenue</th>
              <th className="text-left px-3 py-2.5 font-semibold">Shared</th>
              <th className="text-left px-3 py-2.5 font-semibold">NPS</th>
            </tr>
          </thead>
          <tbody>
            {ALL_PROGRAMMES.slice(0, 8).map((p, i) => (
              <tr key={p.id + i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3">
                  <p className="font-bold">{p.name}</p>
                  <p className="text-[11px] text-neutral-500">Flagship • Cohort APR 2026</p>
                </td>
                <td className="px-3 py-3"><PillNum color="#EC4899" n={4} label="shared" /></td>
                <td className="px-3 py-3"><PillNum color="#F59E0B" n={5} label="shared" /></td>
                <td className="px-3 py-3"><PillNum color="#06B6D4" n={5} label="shared" /></td>
                <td className="px-3 py-3 num-tabular">{p.enrolled}</td>
                <td className={`px-3 py-3 num-tabular font-medium ${p.completion >= 80 ? 'text-green-600' : p.completion >= 70 ? 'text-amber-500' : 'text-red-500'}`}>{p.completion}%</td>
                <td className="px-3 py-3 num-tabular">{p.revenue}</td>
                <td className="px-3 py-3 num-tabular text-green-600 font-medium">{[62, 76, 65, 67, 62, 76, 65, 67][i % 8]}%</td>
                <td className="px-3 py-3 num-tabular">{[78, 74, 71, 68, 72, 74, 71, 67][i % 8]}</td>
              </tr>
            ))}
            <tr className="bg-neutral-50 font-bold">
              <td className="px-5 py-3">TOTAL (14 PROGRAMMES)<br/><span className="font-normal text-[11px] text-neutral-500">(14 components • value vs avg/site)</span></td>
              <td className="px-3 py-3">68 (66 / 38 unique)</td>
              <td className="px-3 py-3">50 (84 / 40 unique)</td>
              <td className="px-3 py-3">94 (66 / 72 unique)</td>
              <td className="px-3 py-3 num-tabular">1,509</td>
              <td className="px-3 py-3 num-tabular text-green-600">67%</td>
              <td className="px-3 py-3 num-tabular">RM 1.18M</td>
              <td className="px-3 py-3 num-tabular">62%</td>
              <td className="px-3 py-3 num-tabular">72</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Enrolment funnel */}
      <h3 className="font-bold mb-3">Enrolment Funnel</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
        {[
          ['Impressions', 45200, '—'], ['Views', 12800, '-72%'], ['Registered', 6400, '-50%'],
          ['Applied', 4200, '-34%'], ['Accepted', 3500, '-17%'], ['Enrolled', 3180, '-11%'],
          ['Active', 1509, '-51%'], ['Completed', 412, '-73%'],
        ].map(([l, v, d]) => (
          <HBar key={l} label={l} value={v} max={45200} delta={d} />
        ))}
      </div>

      {/* Geographic Distribution */}
      <GeoCard />

      {/* Cohort Analysis */}
      <CohortAnalysis />

      {/* Course Modules */}
      <CourseModules />

      {/* Cross-Programme Component Sharing */}
      <CrossSharing />

      {/* Feedback + Monthly completion */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <FeedbackSummary />
        <MonthlyCompletion />
      </div>
    </AnalyticsShell>
  );
}

function CompositionCard({ color, title, big, sub, line }) {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5 relative">
      <span className="absolute top-3 right-3 px-2 py-0.5 text-xs font-bold text-white rounded" style={{ background: color }}>{title}</span>
      <p className="text-4xl font-bold mt-6">{big}</p>
      <p className="text-xs text-neutral-500 mt-2">{sub}</p>
      {Array.isArray(line) ? (
        <div className="mt-3 space-y-1 text-xs text-neutral-700">{line.map((l, i) => <p key={i}>{l}</p>)}</div>
      ) : (
        <p className="text-xs text-neutral-700 mt-3">{line}</p>
      )}
    </div>
  );
}

function SnapshotCard({ title, body }) {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5">
      <p className="font-bold mb-1.5">{title}</p>
      {body.map((b, i) => <p key={i} className="text-xs text-neutral-500">{b}</p>)}
    </div>
  );
}

function PillNum({ color, n, label }) {
  return (
    <span className="inline-flex items-center gap-1 px-2 h-6 border border-neutral-200 rounded text-xs">
      <span className="w-1 h-1 rounded-full" style={{ background: color }} />
      <span className="font-bold">{n}</span> {label}
    </span>
  );
}

function GeoCard() {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-10">
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-bold">Geographic Distribution</h3>
        <button className="h-8 px-3 border border-neutral-300 rounded-lg text-xs font-medium hover:bg-neutral-50">View All</button>
      </div>
      <div className="space-y-3">
        {GEO_ROWS.map(([n, p, v]) => (
          <div key={n} className="grid grid-cols-1 lg:grid-cols-[24px_140px_1fr_50px_50px] items-center gap-3 text-xs">
            <span>🇲🇾</span>
            <span className="text-neutral-700">{n}</span>
            <div className="h-2.5 bg-neutral-100 rounded-full overflow-hidden"><div className="h-full bg-neutral-900 rounded-full" style={{ width: p + '%' }} /></div>
            <span className="text-right num-tabular text-neutral-500">{p}%</span>
            <span className="text-right text-blue-500 font-medium num-tabular">{v.toLocaleString()}</span>
          </div>
        ))}
      </div>
      <p className="text-xs text-neutral-500 mt-3">+7 more locations</p>
    </div>
  );
}

function CohortAnalysis() {
  const rows = [
    ['COHORT MAR 2026', 417, 380, 72, 'RM 245K', 40],
    ['COHORT FEB 2026', 380, 316, 68, 'RM 168K', 45],
    ['COHORT JAN 2026', 445, 422, 70, 'RM 218K', 35],
    ['COHORT DEC 2025', 320, 304, 75, 'RM 198K', 50],
    ['COHORT NOV 2025', 490, 401, 49, 'RM 221K', 30],
    ['COHORT OCT 2025', 401, 364, 52, 'RM 201K', 40],
  ];
  return (
    <div className="mb-10">
      <div className="flex items-start justify-between mb-3">
        <div>
          <h3 className="font-bold">Cohort Analysis</h3>
          <p className="text-xs text-neutral-500 mt-0.5">Performance breakdown by programme cohort</p>
        </div>
        <div className="flex items-center gap-2">
          <SearchBox placeholder="Search cohort" className="w-[200px]" />
          <ExportBtn />
        </div>
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Cohort name</th>
              <th className="text-left px-5 py-3 font-semibold">Enrolled</th>
              <th className="text-left px-5 py-3 font-semibold">Active</th>
              <th className="text-left px-5 py-3 font-semibold">Completion</th>
              <th className="text-left px-5 py-3 font-semibold">Revenue</th>
              <th className="text-left px-5 py-3 font-semibold">Employment %</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(([n, e, a, c, r, em], i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 font-bold">{n}</td>
                <td className="px-5 py-3 num-tabular">{e}</td>
                <td className="px-5 py-3 num-tabular">{a}</td>
                <td className={`px-5 py-3 num-tabular ${c >= 70 ? 'text-green-600' : c >= 60 ? 'text-amber-500' : 'text-red-500'}`}>{c}%</td>
                <td className="px-5 py-3 num-tabular">{r}</td>
                <td className="px-5 py-3"><span className="px-2 h-6 inline-flex items-center bg-purple-100 text-purple-700 text-xs font-bold rounded-full">{em}%</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function CourseModules() {
  return (
    <div className="mb-10">
      <div className="flex items-start justify-between mb-3">
        <div>
          <h3 className="font-bold">Course Modules (6) <span className="text-xs text-neutral-500 font-normal ml-2">AI4U Cohort</span></h3>
          <div className="flex items-center gap-2 mt-2">
            <button className="px-3 h-7 bg-neutral-900 text-white rounded-full text-xs font-semibold">All</button>
            <button className="px-3 h-7 border border-neutral-300 rounded-full text-xs">In Progress</button>
            <button className="px-3 h-7 border border-neutral-300 rounded-full text-xs">Completed</button>
          </div>
        </div>
        <SearchBox placeholder="Search module" className="w-[240px]" />
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-neutral-50 border-b border-neutral-100 text-neutral-500 uppercase tracking-wide">
              <th className="text-left px-5 py-3 font-semibold">Course name</th>
              <th className="text-left px-3 py-3 font-semibold">Also used in</th>
              <th className="text-left px-3 py-3 font-semibold">Due date</th>
              <th className="text-left px-3 py-3 font-semibold">Completion</th>
              <th className="text-left px-3 py-3 font-semibold">Avg time</th>
              <th className="text-left px-3 py-3 font-semibold">Difficulty</th>
              <th className="text-left px-3 py-3 font-semibold">Action</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['EXPLORE AI BASICS', 'AI4U • AI Literacy • Career Accel 3', '19 Jan 2026', 68, '4.2h', 4.4],
              ['RESPONSIBLE AI ETHICS', 'AI4U • AI Literacy • Career Accel 3', '22 Jan 2026', 76, '4.2h', 4.5],
              ['INTERNET APPLICATIONS', 'AI4U • Data Bootcamp • Career Accel 3', '22 Jun 2026', 65, '2.3h', 4.2],
              ['PRACTICAL AI/ML', 'AI4U • Falcatra 4', '22 Jun 2026', 48, '5.2h', 4.4],
              ['CAPSTONE WORKSHOP', 'AI4U • Founder Fellow 4', '22 Jun 2026', 55, '6.2h', 4.5],
            ].map(([n, used, due, c, t, d], i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3">
                  <p className="text-[11px] text-neutral-400 font-mono">MODULE {i + 1}</p>
                  <p className="font-bold">{n}</p>
                </td>
                <td className="px-3 py-3 text-neutral-600 max-w-[200px]">{used}</td>
                <td className="px-3 py-3">{due}</td>
                <td className={`px-3 py-3 num-tabular ${c >= 65 ? 'text-green-600' : 'text-amber-500'}`}>{c}%</td>
                <td className="px-3 py-3 num-tabular">{t}</td>
                <td className="px-3 py-3">
                  <span className="inline-flex items-center gap-0.5">
                    {[1, 2, 3, 4, 5].map(s => <Icon key={s} name="star" size={10} fill={s <= Math.round(d) ? '#FBBF24' : '#E5E7EB'} strokeWidth={0} />)}
                  </span>
                </td>
                <td className="px-3 py-3">
                  <button className="inline-flex items-center gap-1 h-7 px-2 border border-neutral-300 rounded-lg text-xs">Certificate <Icon name="arrowUpRight" size={10} /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="px-5 py-3 text-xs text-neutral-500 border-t border-neutral-100">5 of 6 AHU modules are shared with other programmes — completion in shared modules runs +11pt higher than exclusive</p>
      </div>
    </div>
  );
}

function CrossSharing() {
  return (
    <div className="mb-10">
      <div className="flex items-start justify-between mb-3">
        <div>
          <h3 className="font-bold">Cross-Programme Component Sharing</h3>
          <p className="text-xs text-neutral-500 mt-0.5">Which individual components drive the most reuse · click to pivot to that component's analytics</p>
        </div>
        <div className="flex items-center gap-2">
          <button className="h-8 px-3 bg-neutral-900 text-white rounded-full text-xs font-semibold">Top shared</button>
          <button className="h-8 px-3 border border-neutral-300 rounded-full text-xs">Exclusive</button>
          <button className="h-8 px-3 border border-neutral-300 rounded-full text-xs">Standalone</button>
        </div>
      </div>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          <ReuseColumn title="MOST REUSED COURSES" items={[
            ['PYTHON FOR DATA', 'AHU • AI Literacy • Career Accelerator • Founder Fellow', 6],
            ['GEN AI FUNDAMENTALS', 'AHU • AI Literacy • Career Accelerator • Founder Fellow', 6],
            ['RESPONSIBLE AI ETHICS', 'AHU • AI Literacy • Career Aud', 5],
            ['UX RESEARCH MASTERCLASS', 'AHU • AI Literacy', 4],
          ]} />
          <ReuseColumn title="MOST REUSED EXPERIENCES" items={[
            ['PORTFOLIO REVIEW CLINIC', 'AHU • Career Accelerator • Women in Tech', 5],
            ['EMPLOYER SPEED-NETWORKING', 'AHU • AI Literacy • Career Audit', 5],
            ['DESIGN THINKING SPRINT', 'AHU • AI Literacy • Career Audit', 5],
            ['DEMO DAY SHOWCASE', 'AHU • AI Literacy', 4],
          ]} />
          <ReuseColumn title="MOST BOOKED EXPERTISE" items={[
            ['CHRIS WALES Product coach', 'AHU • Career Accelerator • Founder Fellow', 6],
            ['NADIRA TAN AI mentor', 'AHU • AI Literacy • Career Audit', 5],
            ['PRIYA ANAND Career coach', 'AHU • AI Literacy • Career Audit', 5],
            ['AMIR HASSAN UX lead', 'AHU • AI Literacy', 4],
          ]} />
        </div>
        <p className="text-xs text-neutral-500 mt-5">Shared components offer +11pt completion lift vs exclusive modules.<br/>Re-used expertise looks at ~20% program-rate but +0.4★ satisfaction. <br/>Use this toggle to see exclusive-to-one-programme components vs the 36-item standalone catalogue.</p>
      </div>
    </div>
  );
}

function ReuseColumn({ title, items }) {
  return (
    <div>
      <p className="text-xs font-bold text-neutral-700 mb-3">{title}</p>
      <div className="space-y-3">
        {items.map(([n, sub, count], i) => (
          <div key={i} className="grid grid-cols-1 lg:grid-cols-[1fr_30px] gap-2">
            <div>
              <p className="font-bold text-xs">{n}</p>
              <p className="text-[11px] text-neutral-500">{sub}</p>
            </div>
            <span className="text-xs font-bold text-blue-500 text-right">{count}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function FeedbackSummary() {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5">
      <h3 className="font-bold mb-4">Feedback Summary</h3>
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-6">
        <div>
          <p className="text-xs text-neutral-500 mb-1">Average Rating</p>
          <div className="text-4xl font-bold">4.5</div>
          <div className="flex items-center gap-0.5 mt-1">
            {[0, 1, 2, 3, 4].map(i => <Icon key={i} name="star" size={12} fill="#FBBF24" strokeWidth={0} />)}
          </div>
          <p className="text-[11px] text-neutral-500 mt-1">From 3,108 members</p>
          <div className="mt-3 flex flex-wrap gap-1.5">
            {['community (13)', 'engaging (11)', 'insightful (5)', 'skills (4)'].map(c => (
              <span key={c} className="px-2 h-6 inline-flex items-center bg-neutral-100 text-neutral-700 text-[11px] rounded-full">{c}</span>
            ))}
          </div>
        </div>
        <div className="space-y-1">
          {[[5, 65], [4, 24], [3, 7], [2, 3], [1, 1]].map(([n, p]) => (
            <div key={n} className="grid grid-cols-1 lg:grid-cols-[16px_1fr_36px] items-center gap-2 text-[11px]">
              <span>{n}</span>
              <div className="h-2 bg-neutral-100 rounded-full overflow-hidden"><div className="h-full bg-amber-400" style={{ width: p + '%' }} /></div>
              <span className="text-right text-neutral-500 num-tabular">{p}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MonthlyCompletion() {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5">
      <h3 className="font-bold mb-4">Monthly Completion Trend</h3>
      <svg viewBox="0 0 320 140" className="w-full">
        <polyline fill="none" stroke="#22C55E" strokeWidth={2.5}
          points="10,100 50,80 90,70 130,60 170,50 210,40 250,30 290,25" />
        {[10, 50, 90, 130, 170, 210, 250, 290].map((x, i) => {
          const ys = [100, 80, 70, 60, 50, 40, 30, 25];
          return <circle key={x} cx={x} cy={ys[i]} r={3} fill="#22C55E" />;
        })}
      </svg>
    </div>
  );
}

/* =================================================================
   ALL PROGRAMMES LIST
   ================================================================= */
function AllProgrammesPage() {
  return (
    <AnalyticsShell active="/app/analytics/programme">
      <Link to="/app/analytics/programme" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4">
        <Icon name="chevronLeft" size={14} /> Back to analytics
      </Link>
      <APageHeader title="All Programmes" subtitle="Browse the full catalogue. Click any row to open details."
        action={<div className="flex gap-2"><SearchBox placeholder="Search programme by name, focus, or lead..." className="w-[320px]" /><ExportBtn /></div>}
      />
      <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-neutral-100 text-neutral-500 uppercase tracking-wide text-xs">
              <th className="text-left px-5 py-3 font-semibold">Programme</th>
              <th className="text-left px-3 py-3 font-semibold">Focus</th>
              <th className="text-left px-3 py-3 font-semibold">Status</th>
              <th className="text-left px-3 py-3 font-semibold">Duration</th>
              <th className="text-left px-3 py-3 font-semibold">Cohorts</th>
              <th className="text-left px-3 py-3 font-semibold">Enrolled</th>
              <th className="text-left px-3 py-3 font-semibold">Completion</th>
              <th className="text-left px-3 py-3 font-semibold">Rating</th>
              <th className="text-left px-3 py-3 font-semibold">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {ALL_PROGRAMMES.map(p => (
              <tr key={p.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50 cursor-pointer">
                <td className="px-5 py-3">
                  <Link to={`/app/analytics/programme/${p.id}`} className="block">
                    <p className="font-bold">{p.name}</p>
                    <p className="text-xs text-neutral-500">{p.lead}</p>
                  </Link>
                </td>
                <td className="px-3 py-3 text-neutral-700">{p.focus.map((f, i) => <span key={i} className="block">{i ? '• ' : ''}{f}</span>)}</td>
                <td className="px-3 py-3 text-green-600 text-sm">{p.status}</td>
                <td className="px-3 py-3 text-neutral-600">{p.duration}</td>
                <td className="px-3 py-3 num-tabular">{p.cohorts}</td>
                <td className="px-3 py-3 num-tabular">{p.enrolled}</td>
                <td className={`px-3 py-3 num-tabular ${p.completion >= 80 ? 'text-green-600' : p.completion >= 70 ? 'text-amber-500' : 'text-red-500'}`}>{p.completion}%</td>
                <td className="px-3 py-3"><span className="inline-flex items-center gap-1 num-tabular">{p.rating} <Icon name="star" size={10} fill="#FBBF24" strokeWidth={0} /></span></td>
                <td className="px-3 py-3 num-tabular">{p.revenue}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="flex items-center justify-between px-5 py-4">
          <span className="text-sm text-neutral-500">Showing 1-10 of 128</span>
          <Pagination />
        </div>
      </div>
    </AnalyticsShell>
  );
}

/* =================================================================
   PROGRAMME DETAIL
   ================================================================= */
function ProgrammeDetailPage({ id }) {
  const p = ALL_PROGRAMMES.find(x => x.id === id) || ALL_PROGRAMMES[0];
  return (
    <AnalyticsShell active="/app/analytics/programme">
      <Link to="/app/analytics/programme/all" className="inline-flex items-center gap-2 text-sm text-neutral-700 hover:text-neutral-900 mb-4">
        <Icon name="chevronLeft" size={14} /> Back to all programmes
      </Link>
      <div className="flex items-start justify-between mb-2 flex-wrap gap-4">
        <div>
          <h1 className="text-3xl font-bold">{p.name.toLowerCase().replace(/^./, c => c.toUpperCase()).split(' ').map(w => w[0] + w.slice(1).toLowerCase()).join(' ')}</h1>
          <p className="text-sm mt-1 inline-flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-green-500" /> <span className="text-green-600">Programme</span> <span className="text-neutral-400">•</span> Flagship <span className="text-neutral-400">•</span> {p.lead}</p>
        </div>
        <div className="flex gap-2">
          <SearchBox placeholder="Search..." className="w-[200px]" />
          <ExportBtn />
        </div>
      </div>

      <h2 className="text-xl font-bold mt-6 mb-4">Overview</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
        <StatBox label="Members" value="328" />
        <StatBox label="Completion Rate" value={<>67% <span className="text-xs align-middle ml-1 px-2 py-0.5 bg-blue-100 text-blue-600 rounded font-semibold">ON TRACK</span></>} />
        <StatBox label="Revenue" value="RM 146K" />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <StatBox label="NPS Scpre" value="72" />
        <StatBox label="Shared %" value="67%" />
        <div />
      </div>

      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-8">
        <h3 className="font-bold mb-2">About</h3>
        <p className="text-sm text-neutral-700">The AI Accelerator is Mereka's flagship programme designed to upskill professionals in applied artificial intelligence. Over 12 weeks, participants work through hands-on AI projects, attend expert-led workshops, and build portfolio pieces that demonstrate real-world AI competency. The programme combines self-paced courses with live cohort experiences and 1-on-1 coaching sessions.</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mb-10">
        <ListColumn title="Courses (6)" items={[
          ['GEN AI FUNDAMENTALS', '12h • 82% complete', 'green'],
          ['RESPONSIBLE AI ETHICS', '12h • 78% complete', 'green'],
          ['AI CAPSTONE PROJECT', '12h • 78% complete', 'green'],
          ['CAPSTONE WORKSHOP', '12h • 78% complete', 'green'],
          ['INTERNET APPLICATIONS', '12h • 68% complete', 'amber'],
          ['PYTHON FOR DATA', '12h • 56% complete', 'red'],
        ]} />
        <ListColumn title="Experiences (8)" items={[
          ['AI IN EVERYDAY LIFE TALK', 'Talks • 14 Apr 2026'],
          ['GENERATIVE AI WORKSHOP', 'Workshop • 22 May 2026'],
          ['CREATIVE DESIGN THINKING', 'Talks • 30 Jun 2026'],
          ['HEALTH TECH INNOVATIONS', 'Webinars • 15 Jul 2026'],
          ['THE RISE OF QUANTUM COMPUTING', 'Event • 10 Aug 2026'],
          ['DESIGN THINKING SPRINT', 'Workshop • 25 Sep 2026'],
          ['AI INDUSTRY PANEL', 'Talks • 05 Oct 2026'],
        ]} />
        <ListColumn title="Coaches (3)" items={[
          ['CHRIS WALES', 'AI Strategy • RM 500/ hr'],
          ['NADIRA TAN', 'AI Mentor • RM 350/ hr'],
          ['SOPHIA CHEN', 'Data Science • RM 400/ hr'],
        ]} />
      </div>

      <h3 className="font-bold mb-3">Enrolment Funnel</h3>
      <div className="bg-white border border-neutral-200 rounded-2xl p-5 mb-8">
        {[
          ['Impressions', 45200, '—'], ['Views', 12800, '-72%'], ['Registered', 6400, '-50%'],
          ['Applied', 4200, '-34%'], ['Accepted', 3500, '-17%'], ['Enrolled', 3180, '-11%'],
          ['Active', 1509, '-51%'], ['Completed', 412, '-73%'],
        ].map(([l, v, d]) => (
          <HBar key={l} label={l} value={v} max={45200} delta={d} />
        ))}
      </div>
    </AnalyticsShell>
  );
}

function ListColumn({ title, items }) {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-5">
      <h3 className="font-bold mb-4">{title}</h3>
      <div className="space-y-2">
        {items.map((it, i) => (
          <div key={i} className="border border-neutral-200 rounded-lg p-3">
            <p className="font-bold text-xs">{it[0]}</p>
            <p className={`text-[11px] mt-0.5 ${it[2] === 'green' ? 'text-green-600' : it[2] === 'amber' ? 'text-amber-500' : it[2] === 'red' ? 'text-red-500' : 'text-neutral-500'}`}>{it[1]}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  ProgrammeAnalyticsPage, AllProgrammesPage, ProgrammeDetailPage,
  ALL_PROGRAMMES, ALL_EXPERIENCES_AN, ALL_EXPERTS, ALL_COURSES, ALL_GIGS,
  GeoCard, CohortAnalysis, FeedbackSummary,
});
