import React, { useState } from 'react';
import { chapters } from '../education/chapters';
import { Card } from './ui/card';
import { ScrollArea } from './ui/scroll-area';
import { Button } from './ui/button';

export function EducationPanel() {
  const [selected, setSelected] = useState<number>(chapters[0].id);
  const [completed, setCompleted] = useState<number[]>([]);
  const chapter = chapters.find(c => c.id === selected);

  const markComplete = (id: number) => {
    if (!completed.includes(id)) {
      setCompleted([...completed, id]);
    }
  };

  return (
    <div className="flex h-full bg-card border-l border-border min-w-[320px] max-w-[420px] flex-col">
      <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-card/80">
        <h2 className="font-semibold text-xs tracking-wide uppercase text-muted-foreground">Foundation Curriculum</h2>
        <span className="ml-auto text-xs text-muted-foreground">{completed.length}/{chapters.length} Complete</span>
      </div>
      <div className="flex flex-row flex-1 min-h-0">
        <div className="w-40 border-r border-border bg-card/60">
          <ScrollArea className="h-full">
            <ul className="py-2">
              {chapters.map(c => (
                <li key={c.id} className="flex items-center">
                  <button
                    className={`w-full text-left px-3 py-2 text-xs font-medium rounded hover:bg-muted/60 transition-colors ${selected === c.id ? 'bg-muted/80' : ''}`}
                    onClick={() => setSelected(c.id)}
                  >
                    {c.title}
                  </button>
                  {completed.includes(c.id) && (
                    <span className="ml-2 text-green-500 text-xs">✓</span>
                  )}
                </li>
              ))}
            </ul>
          </ScrollArea>
        </div>
        <div className="flex-1 min-w-0">
          <ScrollArea className="h-full px-4 py-4">
            <Card className="p-4">
              <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: chapter ? chapter.content.replace(/\n/g, '<br/>') : '' }} />
              <div className="mt-4 flex justify-end">
                <Button
                  variant={completed.includes(selected) ? 'outline' : 'accent'}
                  size="sm"
                  disabled={completed.includes(selected)}
                  onClick={() => markComplete(selected)}
                >
                  {completed.includes(selected) ? 'Completed' : 'Mark Complete'}
                </Button>
              </div>
            </Card>
          </ScrollArea>
        </div>
      </div>
    </div>
  );
}