dashboard/components/LearnModule.tsx

"use client";

import { useState, useEffect, useRef } from "react";
import type { Module, Section } from "@/lib/learn-data";
import Quiz from "./Quiz";
import { markSectionRead } from "./ProgressTracker";

interface LearnModuleProps {
  module: Module;
  defaultOpen?: boolean;
}

const SECTIONS_KEY = (moduleId: string) => `arcisvlm_sections_${moduleId}`;

function loadReadSections(moduleId: string): Set<string> {
  if (typeof window === "undefined") return new Set();
  try {
    const raw = localStorage.getItem(SECTIONS_KEY(moduleId));
    if (raw) return new Set(JSON.parse(raw));
  } catch { /* ignore */ }
  return new Set();
}

export default function LearnModule({ module: mod, defaultOpen = false }: LearnModuleProps) {
  const [open, setOpen] = useState(defaultOpen);
  const [readSections, setReadSections] = useState<Set<string>>(new Set());
  const [quizCorrect, setQuizCorrect] = useState(0);

  useEffect(() => {
    setReadSections(loadReadSections(mod.id));
  }, [mod.id]);

  function handleSectionRead(sectionId: string) {
    markSectionRead(mod.id, sectionId);
    setReadSections((prev) => new Set([...prev, sectionId]));
  }

  const readCount = readSections.size;
  const totalSections = mod.sections.length;
  const pct = Math.round((readCount / totalSections) * 100);
  const quizPassed = quizCorrect === mod.quiz.length && mod.quiz.length > 0;

  return (
    <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] overflow-hidden">
      {/* Module header */}
      <button
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-4 px-5 py-4 text-left hover:bg-[var(--surface-hover)] transition-colors"
      >
        {/* Number badge */}
        <div
          className={`w-9 h-9 rounded-lg shrink-0 flex items-center justify-center text-sm font-bold font-mono transition-colors ${
            pct === 100 && quizPassed
              ? "bg-[var(--success)]/20 text-[var(--success)] border border-[var(--success)]/30"
              : pct > 0
              ? "bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30"
              : "bg-[var(--surface-hover)] text-[var(--muted)] border border-[var(--border)]"
          }`}
        >
          {pct === 100 && quizPassed ? "✓" : mod.number}
        </div>

        {/* Title & progress */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h2 className="text-sm font-semibold text-[var(--foreground)]">{mod.title}</h2>
            <span className="text-xs text-[var(--muted)]">—</span>
            <span className="text-xs text-[var(--muted)] truncate">{mod.subtitle}</span>
          </div>
          <div className="flex items-center gap-3 mt-1.5">
            <div className="h-1 w-24 rounded-full bg-[var(--surface-hover)]">
              <div
                className={`h-1 rounded-full transition-all duration-500 ${
                  pct === 100 ? "bg-[var(--success)]" : "bg-[var(--accent)]"
                }`}
                style={{ width: `${pct}%` }}
              />
            </div>
            <span className="text-xs text-[var(--muted)] font-mono">{pct}%</span>
            <span className="text-xs text-[var(--muted)]">~{mod.estimatedMinutes} min</span>
            {quizPassed && (
              <span className="text-xs text-[var(--success)]">Quiz ✓</span>
            )}
          </div>
        </div>

        {/* Chevron */}
        <svg
          className={`w-4 h-4 shrink-0 text-[var(--muted)] transition-transform ${open ? "rotate-180" : ""}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {/* Content */}
      {open && (
        <div className="border-t border-[var(--border)]">
          {/* Sections */}
          <div className="divide-y divide-[var(--border)]">
            {mod.sections.map((section) => (
              <SectionCard
                key={section.id}
                section={section}
                isRead={readSections.has(section.id)}
                onRead={() => handleSectionRead(section.id)}
              />
            ))}
          </div>

          {/* Quiz */}
          <div className="px-5 py-5 border-t border-[var(--border)] bg-[var(--background)]/40">
            <h3 className="text-sm font-semibold text-[var(--foreground)] mb-3 flex items-center gap-2">
              <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
              </svg>
              Module Quiz
            </h3>
            <Quiz
              moduleId={mod.id}
              questions={mod.quiz}
              onScoreChange={(correct) => setQuizCorrect(correct)}
            />
          </div>
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Section Card — collapsible content with analogy + code pointer
// ──────────────────────────────────────────────────────────────

interface SectionCardProps {
  section: Section;
  isRead: boolean;
  onRead: () => void;
}

function SectionCard({ section, isRead, onRead }: SectionCardProps) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  function handleToggle() {
    const opening = !open;
    setOpen(opening);
    if (opening && !isRead) {
      // Mark as read when first opened
      onRead();
    }
  }

  return (
    <div ref={ref} className="group">
      <button
        onClick={handleToggle}
        className="w-full flex items-center gap-3 px-5 py-3.5 text-left hover:bg-[var(--surface-hover)] transition-colors"
      >
        <div
          className={`w-1.5 h-1.5 rounded-full shrink-0 transition-colors ${
            isRead ? "bg-[var(--success)]" : "bg-[var(--border)]"
          }`}
        />
        <span className="flex-1 text-sm text-[var(--foreground)]">{section.title}</span>
        {isRead && (
          <span className="text-xs text-[var(--success)] opacity-70 mr-1">read</span>
        )}
        <svg
          className={`w-4 h-4 shrink-0 text-[var(--muted)] transition-transform ${open ? "rotate-180" : ""}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {open && (
        <div className="px-5 pb-5 space-y-4">
          {/* Electronics analogy callout */}
          {section.analogy && (
            <div className="flex gap-3 p-3 rounded-lg border border-[var(--accent)]/20 bg-[var(--accent)]/5">
              <svg className="w-4 h-4 shrink-0 mt-0.5 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <div>
                <p className="text-xs font-semibold text-[var(--accent)] mb-1">Electronics Analogy</p>
                <p className="text-xs text-[var(--foreground)] leading-relaxed">{section.analogy}</p>
              </div>
            </div>
          )}

          {/* Main content */}
          <ContentRenderer content={section.content} />

          {/* Code pointer */}
          {section.codePointer && (
            <div className="flex items-center gap-2 p-2.5 rounded-lg bg-[var(--background)] border border-[var(--border)]">
              <svg className="w-3.5 h-3.5 shrink-0 text-[var(--muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
              </svg>
              <span className="text-xs text-[var(--muted)]">{section.codePointer.label}</span>
              <code className="ml-auto text-xs font-mono text-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 rounded">
                {section.codePointer.file}
                {section.codePointer.line ? `:${section.codePointer.line}` : ""}
              </code>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Content renderer — parses simple markdown-like content
// Supports: **bold**, `inline code`, code blocks, lists, tables
// ──────────────────────────────────────────────────────────────

function ContentRenderer({ content }: { content: string }) {
  const lines = content.trim().split("\n");
  const elements: React.ReactNode[] = [];
  let i = 0;

  while (i < lines.length) {
    const line = lines[i];

    // Skip empty lines (used as separators)
    if (line.trim() === "") {
      i++;
      continue;
    }

    // Code block
    if (line.trim().startsWith("```")) {
      const blockLines: string[] = [];
      i++;
      while (i < lines.length && !lines[i].trim().startsWith("```")) {
        blockLines.push(lines[i]);
        i++;
      }
      i++; // skip closing ```
      elements.push(
        <pre key={i} className="text-xs font-mono p-3 rounded-lg bg-[var(--background)] border border-[var(--border)] overflow-x-auto text-[var(--foreground)] leading-relaxed">
          <code>{blockLines.join("\n")}</code>
        </pre>
      );
      continue;
    }

    // Table (starts with |)
    if (line.trim().startsWith("|")) {
      const tableLines: string[] = [];
      while (i < lines.length && lines[i].trim().startsWith("|")) {
        tableLines.push(lines[i]);
        i++;
      }
      elements.push(<TableRenderer key={i} lines={tableLines} />);
      continue;
    }

    // Bullet list
    if (line.trim().startsWith("- ") || line.trim().startsWith("* ")) {
      const items: string[] = [];
      while (i < lines.length && (lines[i].trim().startsWith("- ") || lines[i].trim().startsWith("* "))) {
        items.push(lines[i].trim().replace(/^[-*] /, ""));
        i++;
      }
      elements.push(
        <ul key={i} className="space-y-1 pl-4">
          {items.map((item, j) => (
            <li key={j} className="text-sm text-[var(--foreground)] leading-relaxed flex gap-2">
              <span className="text-[var(--accent)] shrink-0 mt-1">·</span>
              <InlineText text={item} />
            </li>
          ))}
        </ul>
      );
      continue;
    }

    // Numbered list
    if (/^\d+\./.test(line.trim())) {
      const items: string[] = [];
      while (i < lines.length && /^\d+\./.test(lines[i].trim())) {
        items.push(lines[i].trim().replace(/^\d+\.\s*/, ""));
        i++;
      }
      elements.push(
        <ol key={i} className="space-y-1 pl-4">
          {items.map((item, j) => (
            <li key={j} className="text-sm text-[var(--foreground)] leading-relaxed flex gap-2">
              <span className="text-[var(--accent)] font-mono text-xs shrink-0 mt-0.5">{j + 1}.</span>
              <InlineText text={item} />
            </li>
          ))}
        </ol>
      );
      continue;
    }

    // Regular paragraph
    elements.push(
      <p key={i} className="text-sm text-[var(--foreground)] leading-relaxed">
        <InlineText text={line} />
      </p>
    );
    i++;
  }

  return <div className="space-y-3">{elements}</div>;
}

function InlineText({ text }: { text: string }) {
  // Parse **bold**, `code`, and plain text segments
  const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g);
  return (
    <>
      {parts.map((part, i) => {
        if (part.startsWith("**") && part.endsWith("**")) {
          return <strong key={i} className="font-semibold text-[var(--foreground)]">{part.slice(2, -2)}</strong>;
        }
        if (part.startsWith("`") && part.endsWith("`")) {
          return <code key={i} className="font-mono text-xs bg-[var(--background)] text-[var(--accent)] px-1 py-0.5 rounded">{part.slice(1, -1)}</code>;
        }
        return <span key={i}>{part}</span>;
      })}
    </>
  );
}

function TableRenderer({ lines }: { lines: string[] }) {
  // Parse markdown table
  const rows = lines
    .filter((l) => !l.trim().match(/^[|\s-]+$/)) // skip separator rows
    .map((l) =>
      l
        .trim()
        .replace(/^\|/, "")
        .replace(/\|$/, "")
        .split("|")
        .map((cell) => cell.trim())
    );

  if (rows.length === 0) return null;
  const [header, ...body] = rows;

  return (
    <div className="overflow-x-auto rounded-lg border border-[var(--border)]">
      <table className="w-full text-xs">
        <thead>
          <tr className="bg-[var(--background)]">
            {header.map((h, i) => (
              <th key={i} className="px-3 py-2 text-left font-semibold text-[var(--muted)] border-b border-[var(--border)]">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {body.map((row, ri) => (
            <tr key={ri} className={ri % 2 === 1 ? "bg-[var(--background)]/40" : ""}>
              {row.map((cell, ci) => (
                <td key={ci} className="px-3 py-2 text-[var(--foreground)] border-b border-[var(--border)] last:border-b-0">
                  <InlineText text={cell} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}