import React, { useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; // assuming some UI library, otherwise use standard divs

export default function ConceptExplainer({ content, onComplete }) {
  const containerRef = useRef(null);

  // Trigger completion when scrolled to the end
  useEffect(() => {
    const handleScroll = () => {
      if (!containerRef.current) return;
      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        onComplete();
      }
    };
    
    // Check initially in case content is short and doesn't need scrolling
    if (containerRef.current && containerRef.current.scrollHeight <= containerRef.current.clientHeight) {
      onComplete();
    }

    const currentRef = containerRef.current;
    currentRef?.addEventListener('scroll', handleScroll);
    return () => currentRef?.removeEventListener('scroll', handleScroll);
  }, [onComplete]);

  return (
    <Card className="w-full h-[60vh] flex flex-col">
      <CardHeader>
        <CardTitle>Concept Explainer</CardTitle>
      </CardHeader>
      <CardContent 
        className="flex-1 overflow-y-auto prose dark:prose-invert"
        ref={containerRef}
      >
        {content?.sections?.map((section, i) => (
          <div key={i} className="mb-6">
            <h3>{section.title}</h3>
            <div dangerouslySetInnerHTML={{ __html: section.content }} />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}