/* Mereka v2 — Program curriculum pages
   Figma: 5208-74469 (Course Material), 74936/77013 (Forum + thread), 75370 (Test),
          75816/76233/76624 (Submission + detail) */

const CM_COURSES = [
  { n: 1, title: 'Explore AI Basics', desc: 'Discover the world of artificial intelligence by exploring its foundational concepts and his…', status: 'done' },
  { n: 2, title: 'Explore Generative AI', desc: 'Discover the fundamentals of generative AI and how this technology is transforming ou…', status: 'progress', pct: 99 },
  { n: 3, title: 'Internet Search & Beyond', desc: 'Learn the intricacies of internet search engines and reasoning engines, and enhance your ski…', status: 'view' },
  { n: 4, title: 'Explore Responsible AI', desc: 'Understand and implement responsible AI practices, including best practices, princi…', status: 'view' },
  { n: 5, title: 'Get Started with Microsoft Copilot', desc: 'This module provides an introduction to Microsoft Copilot, covering its main func…', status: 'view' },
  { n: 6, title: 'Boost Your Productivity with Copilot', desc: 'This module provides an in-depth look at how Microsoft Copilot can enhance your pro…', status: 'view' },
  { n: 7, title: 'Explore AI for All', desc: 'Discover how AI is transforming accessibility, job roles, and humanitarian efforts through r…', status: 'view' },
];

function CourseThumb({ hue }) {
  return <div className="aspect-[16/10] w-full" style={{ background: `linear-gradient(135deg, oklch(0.74 0.07 ${hue}), oklch(0.55 0.05 ${hue + 20}))` }} />;
}

function CourseMaterialPage() {
  return (
    <ProgramShell active="curriculum" curriculumSub="material">
      <div className="max-w-[min(1960px,90vw)]">
        <h1 className="text-3xl font-bold text-neutral-900 mb-6">My Courses</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
          {CM_COURSES.map((c, i) => (
            <div key={c.n} className="bg-white border border-neutral-200 rounded-2xl overflow-hidden flex flex-col">
              <CourseThumb hue={30 + i * 6} />
              <div className="p-4 flex-1 flex flex-col">
                <div className="flex items-center gap-2 mb-2">
                  <span className={`text-[11px] font-bold rounded px-2 py-1 ${c.status === 'done' ? 'bg-green-100 text-green-700' : 'bg-neutral-100 text-neutral-500'}`}>MODULE {c.n}</span>
                  {c.status === 'done' && <span className="text-[12px] text-neutral-500">Completed!</span>}
                  {c.status === 'progress' && <span className="text-[12px] text-neutral-500">In progress</span>}
                </div>
                <h3 className="font-bold text-[17px] leading-tight mb-1.5">{c.title}</h3>
                <p className="text-[13px] text-neutral-500 leading-snug flex-1">{c.desc}</p>
                <p className="text-[12px] font-semibold text-neutral-400 tracking-wide mt-3">DUE 12 JAN 2026</p>
                <div className="mt-3 flex items-center gap-3">
                  {c.status === 'done' && <button className="h-10 px-5 rounded-full bg-green-500 text-white text-sm font-semibold">Completed!</button>}
                  {c.status === 'progress' && (
                    <>
                      <button className="h-10 px-5 rounded-full bg-neutral-900 text-white text-sm font-semibold">Continue</button>
                      <span className="ml-auto w-11 h-11 rounded-full border-2 border-green-400 text-green-600 text-[12px] font-bold flex items-center justify-center">{c.pct}%</span>
                    </>
                  )}
                  {c.status === 'view' && <button className="h-10 px-5 rounded-full border border-neutral-300 text-sm font-semibold hover:bg-neutral-50">View Module</button>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </ProgramShell>
  );
}

/* ============ FORUM ============ */
const FORUM_THREADS = [
  { id: 't1', name: 'Members introduction', views: 248, posts: 32, latest: '12 hours ago' },
  { id: 't2', name: 'Official announcements', views: 193, posts: 5, latest: '2 weeks ago' },
  { id: 't3', name: 'Program related', views: 122, posts: 8, latest: '1 month ago' },
];

function ForumPage() {
  const [chip, setChip] = useState('All');
  return (
    <ProgramShell active="curriculum" curriculumSub="forum">
      <div className="max-w-[min(1960px,90vw)]">
        <h1 className="text-3xl font-bold text-neutral-900 mb-5">Forum</h1>
        <div className="flex items-center gap-3 mb-6">
          <div className="flex items-center gap-2">
            {['All', 'Social', 'Course', 'Support'].map(c => (
              <button key={c} onClick={() => setChip(c)}
                className={`px-4 h-9 rounded-full text-sm font-medium transition-colors ${chip === c ? 'bg-neutral-900 text-white' : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'}`}>{c}</button>
            ))}
          </div>
          <div className="flex-1" />
          <div className="relative w-[260px]">
            <Icon name="search" size={15} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
            <input placeholder="Search in forum" className="w-full h-10 pl-10 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none" />
          </div>
        </div>

        <div className="flex items-center px-5 pb-2 text-[13px] text-neutral-500">
          <span className="flex-1 text-xl font-bold text-neutral-900">Threads</span>
          <span className="w-20 text-right">View</span>
          <span className="w-20 text-right">Posts</span>
          <span className="w-28 text-right">Latest</span>
        </div>
        <div className="space-y-2.5">
          {FORUM_THREADS.map(t => (
            <Link key={t.id} to={`/app/program/admin/curriculum/forum/${t.id}`}
              className="flex items-center px-5 py-4 bg-white border border-neutral-200 rounded-xl hover:border-neutral-300 transition-colors">
              <span className="flex-1 font-semibold text-[15px]">{t.name}</span>
              <span className="w-20 text-right text-neutral-500 text-sm">{t.views}</span>
              <span className="w-20 text-right text-neutral-500 text-sm">{t.posts}</span>
              <span className="w-28 text-right text-neutral-500 text-sm">{t.latest}</span>
            </Link>
          ))}
        </div>
      </div>
    </ProgramShell>
  );
}

const FORUM_COMMENTS = [
  { n: 'Alex', body: "Hi all! I'm Alex from New York, with a background in mathematics. Looking forward to growing my AI skills in AI4U.", mod: '25 Feb, 2026 13:42', hue: 220 },
  { n: 'Maria', body: "Hello everyone! I'm Maria, an entrepreneur interested in AI-driven solutions for small businesses. Looking forward to learning together in AI4U.", mod: '25 Feb, 2026 18:03', hue: 25 },
  { n: 'Michael', body: "Hi! I'm Michael, currently transitioning into tech from finance. Hoping AI4U will help me build a strong AI foundation.", mod: '25 Feb, 2026 20:01', hue: 290 },
];

function ForumThreadPage({ id }) {
  return (
    <ProgramShell active="curriculum" curriculumSub="forum">
      <div className="max-w-[min(1960px,90vw)]">
        <Link to="/app/program/admin/curriculum/forum" className="inline-flex items-center gap-2 text-neutral-700 hover:text-neutral-900 mb-5">
          <Icon name="chevronLeft" size={20} /> <span className="text-3xl font-bold">Forum</span>
        </Link>

        <div className="bg-white border border-neutral-200 rounded-2xl p-6 mb-6">
          <div className="flex items-center gap-2.5 mb-3">
            <Avatar name="Jessica" size={36} />
            <span className="font-bold text-sm">Jessica</span>
            <span className="px-2 py-0.5 rounded text-[11px] font-bold" style={{ background: '#F7B5D3', color: '#9D174D' }}>ADMIN</span>
          </div>
          <h2 className="text-2xl font-bold mb-2">Welcome to AI4U!</h2>
          <p className="text-[15px] text-neutral-700">👋 Introduce yourself and why you joined this community.</p>
          <div className="mt-4 flex items-center gap-2 text-sm text-neutral-500">
            <Icon name="heart" size={16} /> <span>59</span>
            <span className="ml-2">Last Modified 24 Feb, 2026 13:42</span>
          </div>
        </div>

        <h3 className="font-bold text-base mb-3">Comments (3)</h3>
        <div className="space-y-4">
          {FORUM_COMMENTS.map((c, i) => (
            <div key={i} className="bg-white border border-neutral-200 rounded-2xl p-5">
              <div className="flex items-center gap-2.5 mb-2">
                <Avatar name={c.n} size={32} />
                <span className="font-bold text-sm">{c.n}</span>
              </div>
              <p className="text-sm text-neutral-700 leading-relaxed">{c.body}</p>
              <p className="text-xs text-neutral-400 mt-3">Last Modified {c.mod}</p>
            </div>
          ))}
          <div className="bg-white border border-neutral-200 rounded-2xl p-4 flex items-center gap-3">
            <Avatar name="Faiz" size={36} />
            <input placeholder="Add a comment" className="flex-1 text-sm focus:outline-none placeholder:text-neutral-400" />
            <button className="text-neutral-400 hover:text-neutral-700"><Icon name="upload" size={16} /></button>
          </div>
        </div>
      </div>
    </ProgramShell>
  );
}

/* ============ TEST ============ */
const TEST_ROWS = [
  { name: 'Explore Generative AI', due: '24 Feb 2026', action: 'continue' },
  { name: 'Explore Generative AI', due: '24 Feb 2026', action: 'take' },
  { name: 'Explore Generative AI', due: '28 Feb 2026', action: 'locked' },
  { name: 'Explore Generative AI', due: '28 Feb 2026', action: 'completed' },
  { name: 'Explore Generative AI', due: '28 Feb 2026', action: 'score' },
];

function TestPage() {
  return (
    <ProgramShell active="curriculum" curriculumSub="test">
      <div className="max-w-[min(1960px,90vw)]">
        <h1 className="text-3xl font-bold text-neutral-900 mb-5">Test</h1>
        <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
          <table className="w-full text-sm">
            <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-6 py-3">TEST NAME</th>
                <th className="px-6 py-3">DUE DATE</th>
                <th className="px-6 py-3 text-right">ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {TEST_ROWS.map((t, i) => (
                <tr key={i} className="border-b border-neutral-100 last:border-0">
                  <td className="px-6 py-4 font-bold text-[13px] tracking-wide uppercase">{t.name}</td>
                  <td className="px-6 py-4 text-neutral-500">{t.due}</td>
                  <td className="px-6 py-4 text-right">
                    <div className="flex justify-end">
                      {t.action === 'continue' && <button className="inline-flex items-center gap-2 h-9 px-5 bg-neutral-900 text-white rounded-full text-[13px] font-semibold">Continue <Icon name="arrowRight" size={13} /></button>}
                      {t.action === 'take' && <button className="inline-flex items-center gap-2 h-9 px-5 border border-neutral-300 rounded-full text-[13px] font-semibold hover:bg-neutral-50">Take test <Icon name="arrowRight" size={13} /></button>}
                      {t.action === 'locked' && <button className="inline-flex items-center gap-2 h-9 px-5 border border-neutral-200 rounded-full text-[13px] font-semibold text-neutral-400" disabled>Take test <Icon name="shield" size={13} /></button>}
                      {t.action === 'completed' && <button className="inline-flex items-center gap-2 h-9 px-5 border border-neutral-300 rounded-full text-[13px] font-semibold text-neutral-500">Completed</button>}
                      {t.action === 'score' && <button className="inline-flex items-center gap-2 h-9 px-6 border border-blue-300 text-blue-600 rounded-full text-[13px] font-semibold">95/100</button>}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </ProgramShell>
  );
}

/* ============ SUBMISSION ============ */
const SUB_ROWS = [
  { id: 'new', name: 'Explore Generative AI - Coursework', due: '24 Feb 2026', uploaded: false },
  { id: 'done', name: 'Explore Generative AI - Coursework', due: '24 Feb 2026', uploaded: true, file: 'Coursework_Explo…' },
];

function SubmissionPage() {
  return (
    <ProgramShell active="curriculum" curriculumSub="submission">
      <div className="max-w-[min(1960px,90vw)]">
        <h1 className="text-3xl font-bold text-neutral-900 mb-5">Submission</h1>
        <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
          <table className="w-full text-sm">
            <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-6 py-3">TEST NAME</th>
                <th className="px-6 py-3">DUE DATE</th>
                <th className="px-6 py-3 text-right">ACTIONS</th>
              </tr>
            </thead>
            <tbody>
              {SUB_ROWS.map((s, i) => (
                <tr key={i} className="border-b border-neutral-100 last:border-0">
                  <td className="px-6 py-4 font-bold text-[13px] tracking-wide uppercase">{s.name}</td>
                  <td className="px-6 py-4 text-neutral-500">{s.due}</td>
                  <td className="px-6 py-4 text-right">
                    <div className="flex justify-end">
                      {s.uploaded ? (
                        <Link to="/app/program/admin/curriculum/submission/done" className="inline-flex items-center gap-2 h-9 px-4 border border-neutral-300 rounded-full text-[13px] font-semibold hover:bg-neutral-50">{s.file} <Icon name="edit" size={13} /></Link>
                      ) : (
                        <Link to="/app/program/admin/curriculum/submission/new" className="inline-flex items-center gap-2 h-9 px-4 border border-neutral-300 rounded-full text-[13px] font-semibold hover:bg-neutral-50">Upload file <Icon name="upload" size={13} /></Link>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </ProgramShell>
  );
}

function SubmissionDetailPage({ id = 'new' }) {
  const submitted = id === 'done';
  return (
    <ProgramShell active="curriculum" curriculumSub="submission">
      <div className="max-w-[min(1960px,90vw)]">
        <Link to="/app/program/admin/curriculum/submission" className="inline-flex items-center gap-2 text-neutral-700 hover:text-neutral-900 mb-5">
          <Icon name="chevronLeft" size={20} /> <span className="text-3xl font-bold">Submission</span>
        </Link>

        <div className="bg-white border border-neutral-200 rounded-2xl p-7 mb-5">
          <h2 className="text-2xl font-bold mb-2">Explore Generative AI - Coursework</h2>
          <p className="text-[15px] text-neutral-700">Please upload your completed coursework for the Explore Gen AI module here.</p>
          <p className="text-[15px] text-neutral-700 mt-5">Due date:<br />24 FEB 2026</p>
          <p className="text-[15px] text-neutral-700 mt-5">Ensure that:</p>
          <ul className="list-disc pl-6 mt-1 text-[15px] text-neutral-700 space-y-1">
            <li>All required tasks are completed.</li>
            <li>Your name is included in the document.</li>
            <li>The file is submitted in the required format (e.g., PDF or DOCX).</li>
          </ul>
          <p className="text-[15px] text-neutral-700 mt-5">Submit your assignment before the deadline to receive credit.</p>
        </div>

        {submitted ? (
          <>
            <div className="border-2 border-blue-400 rounded-2xl py-5 text-center text-neutral-500 mb-4">Coursework_ExploreGenAI_pdf</div>
            <div className="flex justify-center">
              <button className="h-11 px-8 rounded-full bg-neutral-900 text-white text-sm font-semibold">Re-Submit</button>
            </div>
          </>
        ) : (
          <>
            <div className="border-2 border-blue-400 rounded-2xl py-10 flex flex-col items-center justify-center text-center mb-4">
              <Icon name="upload" size={24} className="text-neutral-700 mb-2" />
              <p className="font-bold text-neutral-900">Upload file</p>
              <p className="text-sm text-neutral-500 mt-0.5">Choose a file from your device</p>
            </div>
            <div className="flex justify-center">
              <button className="h-11 px-10 rounded-full bg-neutral-900 text-white text-sm font-semibold">Submit</button>
            </div>
          </>
        )}
      </div>
    </ProgramShell>
  );
}

Object.assign(window, {
  CourseMaterialPage, ForumPage, ForumThreadPage, TestPage, SubmissionPage, SubmissionDetailPage,
});