import { useState, useEffect } from 'react';
import { BookOpen, CheckCircle, Loader, ArrowRight, ChevronLeft, MessageSquare, Calendar, TrendingUp } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Link } from 'react-router-dom';
import Card from '../components/ui/Card';
import Button from '../components/ui/Button';
import Tag from '../components/ui/Tag';
import LearningContentViewer from '../components/ui/LearningContentViewer';
import { useApp } from '../store/AppContext';
import { getAssignedTopic, generateLearningContent, getCachedContent } from '../lib/learningService';
import { getUpcomingWeeks, getQuarterProgress, getYearProgress, getQuarterName, getQuarterForWeek, hasCurriculum as checkHasCurriculum } from '../lib/curriculumService';
import * as db from '../lib/db';

const Leren = () => {
  const { state } = useApp();
  const [assignedTopic, setAssignedTopic] = useState(null);
  const [allTopics, setAllTopics] = useState([]);
  
  // View state
  const [view, setView] = useState('overview'); // overview, detail, creating
  const [activeTopic, setActiveTopic] = useState(null);
  const [content, setContent] = useState(null);
  
  // Loading & Error
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  // Custom Topic
  const [customTopicQuery] = useState('');
  
  // Weekly status
  const [weeklyDone, setWeeklyDone] = useState(false);
  const [sessionDone, setSessionDone] = useState(false);

  // Feedback
  const [showFeedbackModal, setShowFeedbackModal] = useState(false);
  const [feedbackText, setFeedbackText] = useState('');
  const [feedbackPrompted, setFeedbackPrompted] = useState(false);

  // Curriculum state
  const [hasCurriculum, setHasCurriculum] = useState(false);
  const [upcoming, setUpcoming] = useState([]);
  const [quarterProgress, setQuarterProgress] = useState(null);
  const [yearProgress, setYearProgress] = useState(null);

  useEffect(() => {
    if (state.currentUser) {
      const load = async () => {
        const [assigned, topics, done] = await Promise.all([
          getAssignedTopic(state.currentUser.id, state.weekNumber),
          db.getTopics(),
          db.getLearnDone(state.currentUser.id, state.weekNumber),
        ]);
        setAssignedTopic(assigned);
        setAllTopics(topics);
        if (done) setWeeklyDone(true);

        // Load curriculum data
        try {
          const currExists = await checkHasCurriculum();
          setHasCurriculum(currExists);
          if (currExists) {
            const [upcomingData, qProgress, yProgress] = await Promise.all([
              getUpcomingWeeks(state.weekNumber, 4),
              getQuarterProgress(state.currentUser.id, getQuarterForWeek(state.weekNumber)),
              getYearProgress(state.currentUser.id),
            ]);
            setUpcoming(upcomingData);
            setQuarterProgress(qProgress);
            setYearProgress(yProgress);
          }
        } catch (e) {
          console.warn('[Learn] Could not load curriculum data:', e.message);
        }
      };
      load();
    }
  }, [state.currentUser, state.weekNumber]);

  const handleOpenTopic = async (topic) => {
    setActiveTopic(topic);
    setView('detail');
    setSessionDone(false);
    setError(null);
    setFeedbackText('');
    setFeedbackPrompted(false);
    const cached = await getCachedContent(topic.id);
    if (cached) {
      setContent(cached);
    } else {
      setContent(null);
    }
  };

  const loadContent = async (selectedType = 'article') => {
    if (!activeTopic) return;
    setIsLoading(true);
    setError(null);
    try {
      const generated = await generateLearningContent(activeTopic, false, selectedType);
      setContent(generated);
    } catch (e) {
      setError(e.message);
    } finally {
      setIsLoading(false);
    }
  };

  const doComplete = async () => {
    setSessionDone(true);
    if (!weeklyDone) {
      setWeeklyDone(true);
      await db.setLearnDone(state.currentUser.id, state.weekNumber);
    }
  };

  const handleComplete = () => {
    if (!feedbackPrompted) {
      setFeedbackPrompted(true);
      setShowFeedbackModal(true);
      return;
    }
    doComplete();
  };

  const handleSubmitFeedback = async () => {
    if (feedbackText.trim()) {
      await db.setSetting(
        `feedback:${state.currentUser.id}:${activeTopic.id}:${state.weekNumber}`,
        feedbackText.trim()
      );
    }
    setShowFeedbackModal(false);
    doComplete();
  };

  const handleSkipFeedback = () => {
    setShowFeedbackModal(false);
    doComplete();
  };

  // ── Detail View ──────────────────────────────────────────
  if (view === 'detail' && activeTopic) {
    if (sessionDone) {
      return (
        <div className="p-4 md:p-8 max-w-2xl mx-auto text-center py-20">
          <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 200 }}>
            <CheckCircle size={80} className="mx-auto text-teal mb-6" />
          </motion.div>
          <h1 className="text-3xl font-bold mb-4">Learning session complete!</h1>
          <p className="text-fg-muted mb-8">
            You have successfully reviewed "<strong>{activeTopic.label}</strong>".
            {weeklyDone && ' Your weekly minimum is met.'}
          </p>
          <div className="flex justify-center gap-4">
            <Button variant="outline" onClick={() => setView('overview')}>Learn Another</Button>
            <Link to="/test">
              <Button>Start Weekly Test <ArrowRight size={18} className="ml-2" /></Button>
            </Link>
          </div>
        </div>
      );
    }

    return (
      <div className="p-4 md:p-8 max-w-4xl mx-auto pb-24 md:pb-8">
        <AnimatePresence>
          {showFeedbackModal && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 z-50 flex items-center justify-center p-4"
              style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
            >
              <motion.div
                initial={{ scale: 0.95, opacity: 0, y: 16 }}
                animate={{ scale: 1, opacity: 1, y: 0 }}
                exit={{ scale: 0.95, opacity: 0, y: 16 }}
                transition={{ type: 'spring', stiffness: 300, damping: 24 }}
                className="w-full max-w-lg"
              >
                <Card className="border border-bg-warm shadow-xl">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0">
                      <MessageSquare size={20} className="text-teal" />
                    </div>
                    <h2 className="text-xl font-bold">How was this content?</h2>
                  </div>
                  <p className="text-fg-muted text-sm mb-5">
                    Your feedback helps improve future learning content. This is optional — you can skip if you prefer.
                  </p>
                  <textarea
                    autoFocus
                    value={feedbackText}
                    onChange={e => setFeedbackText(e.target.value)}
                    placeholder="What was clear? What could be improved? Anything missing?"
                    rows={4}
                    className="w-full rounded-[var(--r-sm)] border border-bg-warm bg-bg p-3 text-sm resize-none focus:outline-none focus:border-teal transition-colors"
                  />
                  <div className="flex justify-end gap-3 mt-4">
                    <Button variant="outline" onClick={handleSkipFeedback}>Skip</Button>
                    <Button onClick={handleSubmitFeedback}>Submit Feedback</Button>
                  </div>
                </Card>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

        <button onClick={() => setView('overview')} className="flex items-center gap-2 text-fg-muted hover:text-teal mb-6 transition-colors">
          <ChevronLeft size={16} /> Back to overview
        </button>

        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Tag variant="dark" className="font-mono text-xs">{activeTopic.type}</Tag>
            {activeTopic.id === assignedTopic?.id && <Tag variant="accent">Weekly Required</Tag>}
          </div>
          <h1 className="text-3xl md:text-4xl font-bold text-teal">{activeTopic.label}</h1>
          <p className="text-fg-muted mt-2">{activeTopic.description}</p>
        </div>

        {!content && !isLoading && (
          <Card className="border border-bg-warm text-center py-16">
            <BookOpen size={48} className="mx-auto text-teal/30 mb-4" />
            <p className="text-fg-muted mb-6">Choose how you want to learn this topic.</p>
            <div className="flex flex-wrap justify-center gap-4">
              <Button onClick={() => loadContent('article')}>Article</Button>
              <Button onClick={() => loadContent('slides')}>Slides</Button>
              <Button onClick={() => loadContent('infographic')}>Infographic</Button>
            </div>
          </Card>
        )}

        {isLoading && (
          <Card className="border border-bg-warm text-center py-16">
            <Loader size={48} className="mx-auto text-teal animate-spin mb-4" />
            <p className="font-medium">AI is generating your learning module...</p>
            <p className="text-fg-muted text-sm mt-2">This may take 10–30 seconds.</p>
          </Card>
        )}

        {error && (
          <Card className="border border-red-200 bg-red-50 text-red-900 p-6">
            <p className="font-bold mb-1">Generation failed</p>
            <p className="text-sm">{error}</p>
            <Button onClick={loadContent} variant="outline" className="mt-4 border-red-300 text-red-700">Try again</Button>
          </Card>
        )}

        {content && <LearningContentViewer content={content} topic={activeTopic} onGenerate={loadContent} isLoading={isLoading} />}

        {content && (
          <div className="mt-10 pt-6 border-t border-bg-warm flex justify-end">
            <Button onClick={handleComplete}>
              <CheckCircle size={18} className="mr-2" /> Complete Session
            </Button>
          </div>
        )}
      </div>
    );
  }

  // ── Creating Topic Loading ─────────────────────────────────
  if (view === 'creating') {
    return (
      <div className="p-4 md:p-8 max-w-2xl mx-auto text-center py-20">
        <Loader size={48} className="mx-auto text-teal animate-spin mb-4" />
        <h1 className="text-2xl font-bold text-teal mb-2">Architecting New Topic</h1>
        <p className="text-fg-muted">The AI is creating a structure for "{customTopicQuery}"...</p>
      </div>
    );
  }

  // ── Overview ──────────────────────────────────────────────
  const otherTopics = allTopics.filter(t => t.id !== assignedTopic?.id && t.type !== 'fact' && t.learning_relevance !== 'exclude');
  const currentQuarter = getQuarterForWeek(state.weekNumber);
  const currentQuarterName = getQuarterName(state.weekNumber);

  return (
    <div className="p-4 md:p-8 max-w-5xl mx-auto pb-24 md:pb-8 animate-in fade-in duration-300">
      <div className="mb-10">
        <h1 className="text-3xl md:text-4xl font-bold text-teal mb-3">Learning Station</h1>
        <p className="text-fg-muted text-lg">
          {hasCurriculum
            ? `Week ${state.weekNumber} · ${currentQuarterName}`
            : 'Complete at least 1 topic per week. Explore more from the library!'}
        </p>
      </div>

      {error && (
        <div className="mb-6 bg-red-50 text-red-800 p-4 rounded-[var(--r-sm)] border border-red-200">
          {error}
        </div>
      )}

      {/* Progress Cards (only shown when curriculum exists) */}
      {hasCurriculum && yearProgress && quarterProgress && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          {/* Year Progress */}
          <Card className="border border-bg-warm text-center p-4">
            <div className="relative w-16 h-16 mx-auto mb-2">
              <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
                <circle cx="18" cy="18" r="15.5" fill="none" stroke="var(--color-bg-warm)" strokeWidth="3" />
                <circle
                  cx="18" cy="18" r="15.5" fill="none"
                  stroke="var(--color-teal)" strokeWidth="3"
                  strokeDasharray={`${yearProgress.percentage} 100`}
                  strokeLinecap="round"
                  className="transition-all duration-700"
                />
              </svg>
              <span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
                {yearProgress.percentage}%
              </span>
            </div>
            <div className="text-xs text-fg-muted">Annual Progress</div>
            <div className="text-[10px] text-fg-muted">{yearProgress.completed}/{yearProgress.total} weeks</div>
          </Card>

          {/* Quarter Progress */}
          <Card className="border border-bg-warm text-center p-4">
            <div className="relative w-16 h-16 mx-auto mb-2">
              <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
                <circle cx="18" cy="18" r="15.5" fill="none" stroke="var(--color-bg-warm)" strokeWidth="3" />
                <circle
                  cx="18" cy="18" r="15.5" fill="none"
                  stroke="#7c3aed" strokeWidth="3"
                  strokeDasharray={`${quarterProgress.percentage} 100`}
                  strokeLinecap="round"
                  className="transition-all duration-700"
                />
              </svg>
              <span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
                {quarterProgress.percentage}%
              </span>
            </div>
            <div className="text-xs text-fg-muted">Q{currentQuarter} Progress</div>
            <div className="text-[10px] text-fg-muted">{quarterProgress.completed}/{quarterProgress.total} weeks</div>
          </Card>

          {/* Current Week */}
          <Card className="border border-bg-warm text-center p-4 flex flex-col items-center justify-center">
            <Calendar size={24} className="text-teal mb-1" />
            <div className="text-2xl font-bold text-teal">{state.weekNumber}</div>
            <div className="text-xs text-fg-muted">Current Week</div>
          </Card>

          {/* Status */}
          <Card className="border border-bg-warm text-center p-4 flex flex-col items-center justify-center">
            <TrendingUp size={24} className={`mb-1 ${weeklyDone ? 'text-teal' : 'text-fg-muted'}`} />
            <div className={`text-lg font-bold ${weeklyDone ? 'text-teal' : 'text-fg-muted'}`}>
              {weeklyDone ? 'Complete' : 'In Progress'}
            </div>
            <div className="text-xs text-fg-muted">This Week</div>
          </Card>
        </div>
      )}

      {/* Required Topic */}
      {assignedTopic && (
        <div className="mb-8">
          <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
            This Week's Topic {weeklyDone && <CheckCircle size={20} className="text-teal" />}
          </h2>
          <Card 
            hoverable 
            className={`border-2 cursor-pointer transition-all ${weeklyDone ? 'border-teal/30 bg-teal/5' : 'border-teal shadow-md'}`}
            onClick={() => handleOpenTopic(assignedTopic)}
          >
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <Tag variant={weeklyDone ? 'success' : 'accent'} className="text-xs">
                    {weeklyDone ? 'Completed' : 'Required'}
                  </Tag>
                  {hasCurriculum && (
                    <Tag variant="dark" className="text-[10px]">Week {state.weekNumber}</Tag>
                  )}
                </div>
                <h3 className="text-2xl font-bold text-teal">{assignedTopic.label}</h3>
                <p className="text-fg-muted mt-1">{assignedTopic.description}</p>
              </div>
              <Button className="whitespace-nowrap flex-shrink-0">
                {weeklyDone ? 'Review' : 'Start Learning'} <ArrowRight size={18} className="ml-2" />
              </Button>
            </div>
          </Card>
        </div>
      )}

      {/* Upcoming Schedule (only when curriculum exists) */}
      {hasCurriculum && upcoming.length > 0 && (
        <div className="mb-8">
          <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
            <Calendar size={20} className="text-fg-muted" /> Coming Up
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            {upcoming.map(week => (
              <Card key={week.week_number} className="border border-bg-warm p-4">
                <div className="flex items-center justify-between mb-2">
                  <Tag variant="dark" className="text-[10px] font-mono">Week {week.week_number}</Tag>
                  {week.is_review_week && <Tag variant="accent" className="text-[10px]">Review</Tag>}
                </div>
                {week.topic ? (
                  <>
                    <h4 className="font-medium text-sm leading-tight">{week.topic.label}</h4>
                    <p className="text-xs text-fg-muted mt-1">{week.theme}</p>
                  </>
                ) : week.is_review_week ? (
                  <h4 className="font-medium text-sm text-purple-600">{week.theme}</h4>
                ) : (
                  <h4 className="text-sm text-fg-muted italic">Unassigned</h4>
                )}
              </Card>
            ))}
          </div>
        </div>
      )}

      {/* Other Available Topics */}
      {otherTopics.length > 0 && (
        <div>
          <h2 className="text-xl font-bold mb-4">Knowledge Base Library</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {otherTopics.map(topic => (
              <Card 
                key={topic.id} 
                hoverable 
                className="border border-bg-warm cursor-pointer flex flex-col h-full"
                onClick={() => handleOpenTopic(topic)}
              >
                <Tag variant="dark" className="self-start text-[10px] mb-2">{topic.type}</Tag>
                <h3 className="font-bold text-lg mb-1">{topic.label}</h3>
                <p className="text-sm text-fg-muted line-clamp-2 mb-4 flex-1">{topic.description}</p>
                <div className="flex items-center text-teal font-medium text-sm mt-auto group">
                  Learn <ArrowRight size={14} className="ml-1 transition-transform group-hover:translate-x-1" />
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Leren;
