'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { useInterview } from '@/context/InterviewContext';
import LoadingScreen from '@/components/LoadingScreen';
import ScoreRing from '@/components/ScoreRing';
import { Question, ChatMessage, Evaluation } from '@/types/interview';
import {
  Send,
  Mic,
  MicOff,
  Clock,
  ChevronRight,
  CheckCircle2,
  AlertCircle,
  Lightbulb,
  XCircle,
  SkipForward,
  Trophy,
  MessageSquare,
  Volume2,
} from 'lucide-react';

export default function SessionPage() {
  const router = useRouter();
  const {
    session,
    setQuestions,
    addMessage,
    submitAnswer,
    addEvaluation,
    nextQuestion,
    setStatus,
    completeSession,
  } = useInterview();

  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [isEvaluating, setIsEvaluating] = useState(false);
  const [isGeneratingSummary, setIsGeneratingSummary] = useState(false);
  const [showEvaluation, setShowEvaluation] = useState<Evaluation | null>(null);
  const [elapsedTime, setElapsedTime] = useState(0);
  const [isListening, setIsListening] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const recognitionRef = useRef<any>(null);

  // Redirect if no session
  useEffect(() => {
    if (!session) {
      router.push('/interview');
    }
  }, [session, router]);

  // Timer
  useEffect(() => {
    if (session?.status === 'in-progress') {
      const interval = setInterval(() => {
        const elapsed = Math.floor((Date.now() - session.startedAt) / 1000);
        setElapsedTime(elapsed);

        // Auto-end if time limit is set and exceeded
        if (session.config.timeLimit > 0) {
          const limitSeconds = session.config.timeLimit * 60;
          if (elapsed >= limitSeconds) {
            clearInterval(interval);
            handleEndInterview();
          }
        }
      }, 1000);
      return () => clearInterval(interval);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session?.status, session?.startedAt]);

  // Auto scroll to bottom
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [session?.messages]);

  // Generate questions on mount
  useEffect(() => {
    if (session && session.questions.length === 0 && isLoading) {
      generateQuestions();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session]);

  const generateQuestions = async () => {
    if (!session) return;
    setError(null);
    try {
      const res = await fetch('/api/generate-questions', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'x-gemini-api-key': localStorage.getItem('gemini-api-key') || ''
        },
        body: JSON.stringify({
          role: session.config.role,
          difficulty: session.config.difficulty,
          questionCount: session.config.questionCount,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error);

      const questions: Question[] = data.questions;
      setQuestions(questions);

      // Add welcome message
      addMessage({
        id: 'welcome',
        role: 'ai',
        content: `Welcome to your **${session.config.role.title}** mock interview! 🎯\n\nI'll be asking you **${questions.length} questions** at **${session.config.difficulty}** difficulty.\n\nTake your time to think before answering. Let's begin!`,
        timestamp: Date.now(),
      });

      // Add first question
      setTimeout(() => {
        addMessage({
          id: `q-${questions[0].id}`,
          role: 'ai',
          content: `**Question 1/${questions.length}** • _${questions[0].category}_\n\n${questions[0].text}`,
          timestamp: Date.now(),
          questionId: questions[0].id,
        });
        setIsLoading(false);
      }, 800);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to generate questions');
      setIsLoading(false);
    }
  };

  const handleSubmitAnswer = async () => {
    if (!session || !input.trim() || isEvaluating) return;

    const currentQ = session.questions[session.currentQuestionIndex];
    if (!currentQ) return;

    const answerText = input.trim();
    setInput('');

    // Add user message
    addMessage({
      id: `a-${currentQ.id}`,
      role: 'user',
      content: answerText,
      timestamp: Date.now(),
      questionId: currentQ.id,
    });

    // Submit answer
    submitAnswer({
      questionId: currentQ.id,
      text: answerText,
      timestamp: Date.now(),
    });

    // Evaluate
    setIsEvaluating(true);
    try {
      const res = await fetch('/api/evaluate-answer', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'x-gemini-api-key': localStorage.getItem('gemini-api-key') || ''
        },
        body: JSON.stringify({
          question: currentQ.text,
          answer: answerText,
          role: session.config.role.title,
          difficulty: session.config.difficulty,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error);

      const evaluation: Evaluation = {
        ...data.evaluation,
        questionId: currentQ.id,
      };

      addEvaluation(evaluation);
      setShowEvaluation(evaluation);

      // Add AI feedback message
      addMessage({
        id: `eval-${currentQ.id}`,
        role: 'ai',
        content: buildEvaluationMessage(evaluation),
        timestamp: Date.now(),
        questionId: currentQ.id,
        evaluation,
      });
    } catch (err) {
      addMessage({
        id: `err-${currentQ.id}`,
        role: 'ai',
        content: `⚠️ I couldn't evaluate that response. ${err instanceof Error ? err.message : 'Please try again.'}`,
        timestamp: Date.now(),
      });
    }
    setIsEvaluating(false);
  };

  const handleNextQuestion = useCallback(() => {
    if (!session) return;

    setShowEvaluation(null);
    const nextIndex = session.currentQuestionIndex + 1;

    if (nextIndex >= session.questions.length) {
      // End of interview
      handleEndInterview();
      return;
    }

    nextQuestion();
    const nextQ = session.questions[nextIndex];

    addMessage({
      id: `q-${nextQ.id}`,
      role: 'ai',
      content: `**Question ${nextIndex + 1}/${session.questions.length}** • _${nextQ.category}_\n\n${nextQ.text}`,
      timestamp: Date.now(),
      questionId: nextQ.id,
    });

    inputRef.current?.focus();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [session, nextQuestion, addMessage]);

  const handleEndInterview = async () => {
    if (!session) return;
    setIsGeneratingSummary(true);

    try {
      const res = await fetch('/api/session-summary', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'x-gemini-api-key': localStorage.getItem('gemini-api-key') || ''
        },
        body: JSON.stringify({
          role: session.config.role.title,
          difficulty: session.config.difficulty,
          evaluations: session.evaluations,
          questions: session.questions,
          answers: session.answers,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error);

      completeSession(data.summary);
      router.push('/dashboard');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to generate summary');
      setIsGeneratingSummary(false);
    }
  };

  const handleSkipQuestion = () => {
    if (!session) return;
    const currentQ = session.questions[session.currentQuestionIndex];

    addMessage({
      id: `skip-${currentQ.id}`,
      role: 'user',
      content: '_Skipped this question_',
      timestamp: Date.now(),
      questionId: currentQ.id,
    });

    submitAnswer({
      questionId: currentQ.id,
      text: '[SKIPPED]',
      timestamp: Date.now(),
    });

    handleNextQuestion();
  };

  // Voice input
  const toggleVoiceInput = () => {
    if (isListening) {
      recognitionRef.current?.stop();
      setIsListening(false);
      return;
    }

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const win = window as any;
    const SpeechRecognitionAPI = win.SpeechRecognition || win.webkitSpeechRecognition;
    if (!SpeechRecognitionAPI) {
      setError('Voice input is not supported in your browser.');
      return;
    }

    const recognition = new SpeechRecognitionAPI();
    recognition.continuous = true;
    recognition.interimResults = true;

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    recognition.onresult = (event: any) => {
      let transcript = '';
      for (let i = 0; i < event.results.length; i++) {
        transcript += event.results[i][0].transcript;
      }
      setInput(transcript);
    };

    recognition.onerror = () => {
      setIsListening(false);
    };

    recognition.onend = () => {
      setIsListening(false);
    };

    recognition.start();
    recognitionRef.current = recognition;
    setIsListening(true);
  };

  const formatTime = (seconds: number) => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  if (!session) return null;

  if (isLoading) {
    return <LoadingScreen message="AI is preparing your interview questions..." />;
  }

  if (isGeneratingSummary) {
    return <LoadingScreen message="Generating your performance summary..." />;
  }

  const progress = session.questions.length > 0
    ? ((session.currentQuestionIndex + (session.evaluations.length > session.currentQuestionIndex ? 1 : 0)) / session.questions.length) * 100
    : 0;

  const timeLimitSeconds = session.config.timeLimit * 60;
  const remainingSeconds = session.config.timeLimit > 0 ? Math.max(0, timeLimitSeconds - elapsedTime) : 0;
  const isRunningOut = session.config.timeLimit > 0 && remainingSeconds <= 120;
  const displayTime = session.config.timeLimit > 0 ? remainingSeconds : elapsedTime;

  return (
    <div className="min-h-screen flex flex-col">
      {/* Top Bar */}
      <div className="glass sticky top-16 z-40" style={{ borderBottom: '1px solid var(--border)' }}>
        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <span className="text-xl">{session.config.role.icon}</span>
            <div>
              <h2 className="font-semibold text-sm">{session.config.role.title}</h2>
              <p className="text-xs capitalize" style={{ color: 'var(--muted)' }}>
                {session.config.difficulty} • Q{session.currentQuestionIndex + 1}/{session.questions.length}
              </p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            {/* Progress bar */}
            <div className="hidden sm:block w-32">
              <div className="progress-bar">
                <div className="progress-bar-fill" style={{ width: `${progress}%` }} />
              </div>
            </div>

            {/* Timer */}
            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-colors duration-300" style={{
              background: isRunningOut ? 'rgba(255, 107, 107, 0.1)' : 'var(--card)',
              border: `1px solid ${isRunningOut ? 'rgba(255, 107, 107, 0.3)' : 'var(--border)'}`
            }}>
              <Clock className="w-3.5 h-3.5" style={{ color: isRunningOut ? 'var(--danger)' : 'var(--muted)' }} />
              <span className="text-sm font-mono" style={{ color: isRunningOut ? 'var(--danger)' : 'var(--foreground)' }}>
                {formatTime(displayTime)}
              </span>
            </div>

            {/* End button */}
            <button
              onClick={handleEndInterview}
              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-300 cursor-pointer"
              style={{
                background: 'rgba(255, 107, 107, 0.1)',
                border: '1px solid rgba(255, 107, 107, 0.2)',
                color: 'var(--danger)',
              }}
            >
              End
            </button>
          </div>
        </div>
      </div>

      {/* Error bar */}
      {error && (
        <div className="max-w-5xl mx-auto px-4 mt-4">
          <div className="flex items-center gap-3 p-4 rounded-xl" style={{ background: 'rgba(255, 107, 107, 0.1)', border: '1px solid rgba(255, 107, 107, 0.2)' }}>
            <AlertCircle className="w-5 h-5 shrink-0" style={{ color: 'var(--danger)' }} />
            <p className="text-sm" style={{ color: 'var(--danger)' }}>{error}</p>
            <button onClick={() => setError(null)} className="ml-auto cursor-pointer">
              <XCircle className="w-4 h-4" style={{ color: 'var(--danger)' }} />
            </button>
          </div>
        </div>
      )}

      {/* Messages */}
      <div className="flex-1 overflow-y-auto py-6 px-4">
        <div className="max-w-3xl mx-auto space-y-4">
          <AnimatePresence initial={false}>
            {session.messages.map((msg) => (
              <ChatBubble key={msg.id} message={msg} roleColor={session.config.role.color} />
            ))}
          </AnimatePresence>

          {/* Evaluating indicator */}
          {isEvaluating && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="flex items-start gap-3"
            >
              <div className="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style={{ background: 'var(--gradient-primary)' }}>
                <span className="text-sm">🤖</span>
              </div>
              <div className="glass-light px-4 py-3 rounded-2xl rounded-tl-md">
                <div className="typing-dots flex gap-1">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </motion.div>
          )}

          <div ref={messagesEndRef} />
        </div>
      </div>

      {/* Evaluation Drawer */}
      <AnimatePresence>
        {showEvaluation && (
          <motion.div
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 100, opacity: 0 }}
            className="glass sticky bottom-0 z-30"
            style={{ borderTop: '1px solid var(--border)' }}
          >
            <div className="max-w-3xl mx-auto p-4">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <ScoreRing score={showEvaluation.score} maxScore={10} size={56} strokeWidth={5} showPercentage={false} />
                  <div>
                    <p className="font-semibold text-sm">Score: {showEvaluation.score}/10</p>
                    <div className="flex gap-3 mt-1">
                      {[
                        { label: 'Relevance', value: showEvaluation.relevance },
                        { label: 'Clarity', value: showEvaluation.clarity },
                        { label: 'Accuracy', value: showEvaluation.technicalAccuracy },
                      ].map((m) => (
                        <span key={m.label} className="text-xs" style={{ color: 'var(--muted)' }}>
                          {m.label}: <span style={{ color: m.value >= 7 ? 'var(--success)' : m.value >= 4 ? 'var(--warning)' : 'var(--danger)' }}>{m.value}/10</span>
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
                <button
                  onClick={handleNextQuestion}
                  className="btn-primary flex items-center gap-2 text-sm cursor-pointer"
                >
                  {session.currentQuestionIndex + 1 >= session.questions.length ? (
                    <>
                      <Trophy className="w-4 h-4" />
                      Finish
                    </>
                  ) : (
                    <>
                      Next Question
                      <ChevronRight className="w-4 h-4" />
                    </>
                  )}
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Input Area */}
      {!showEvaluation && session.status !== 'completed' && (
        <div className="glass sticky bottom-0 z-20" style={{ borderTop: '1px solid var(--border)' }}>
          <div className="max-w-3xl mx-auto p-4">
            <div className="flex items-end gap-3">
              <div className="flex-1 relative">
                <textarea
                  ref={inputRef}
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSubmitAnswer();
                    }
                  }}
                  placeholder="Type your answer... (Shift+Enter for new line)"
                  rows={2}
                  className="w-full resize-none rounded-xl px-4 py-3 text-sm focus:outline-none transition-all duration-300"
                  style={{
                    background: 'var(--card)',
                    border: '1px solid var(--border)',
                    color: 'var(--foreground)',
                  }}
                  onFocus={(e) => {
                    e.currentTarget.style.borderColor = 'var(--primary)';
                    e.currentTarget.style.boxShadow = '0 0 20px rgba(108, 92, 231, 0.1)';
                  }}
                  onBlur={(e) => {
                    e.currentTarget.style.borderColor = 'var(--border)';
                    e.currentTarget.style.boxShadow = 'none';
                  }}
                  disabled={isEvaluating}
                />
              </div>

              {/* Voice Button */}
              <button
                onClick={toggleVoiceInput}
                className="w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 shrink-0 cursor-pointer"
                style={{
                  background: isListening ? 'var(--danger)' : 'var(--card)',
                  border: `1px solid ${isListening ? 'var(--danger)' : 'var(--border)'}`,
                  color: isListening ? 'white' : 'var(--muted)',
                }}
                title={isListening ? 'Stop listening' : 'Voice input'}
              >
                {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
              </button>

              {/* Skip Button */}
              <button
                onClick={handleSkipQuestion}
                className="w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 shrink-0 cursor-pointer"
                style={{
                  background: 'var(--card)',
                  border: '1px solid var(--border)',
                  color: 'var(--muted)',
                }}
                title="Skip question"
              >
                <SkipForward className="w-4 h-4" />
              </button>

              {/* Send Button */}
              <button
                onClick={handleSubmitAnswer}
                disabled={!input.trim() || isEvaluating}
                className="w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 shrink-0 cursor-pointer disabled:opacity-40"
                style={{
                  background: input.trim() ? 'var(--gradient-primary)' : 'var(--card)',
                  border: `1px solid ${input.trim() ? 'transparent' : 'var(--border)'}`,
                  color: input.trim() ? 'white' : 'var(--muted)',
                }}
              >
                <Send className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function buildEvaluationMessage(evaluation: Evaluation): string {
  const scoreEmoji = evaluation.score >= 8 ? '🌟' : evaluation.score >= 6 ? '👍' : evaluation.score >= 4 ? '💡' : '📚';
  
  let msg = `${scoreEmoji} **Score: ${evaluation.score}/10**\n\n`;
  msg += `📊 Relevance: ${evaluation.relevance}/10 • Clarity: ${evaluation.clarity}/10 • Accuracy: ${evaluation.technicalAccuracy}/10 • Confidence: ${evaluation.confidence}/10\n\n`;

  if (evaluation.strengths.length > 0) {
    msg += `✅ **Strengths:**\n${evaluation.strengths.map(s => `• ${s}`).join('\n')}\n\n`;
  }

  if (evaluation.weaknesses.length > 0) {
    msg += `⚠️ **Areas to Improve:**\n${evaluation.weaknesses.map(w => `• ${w}`).join('\n')}\n\n`;
  }

  if (evaluation.suggestions.length > 0) {
    msg += `💡 **Suggestions:**\n${evaluation.suggestions.map(s => `• ${s}`).join('\n')}\n\n`;
  }

  if (evaluation.sampleAnswer) {
    msg += `📝 **Sample Answer:**\n_${evaluation.sampleAnswer}_`;
  }

  return msg;
}

function ChatBubble({ message, roleColor }: { message: ChatMessage; roleColor: string }) {
  const isAI = message.role === 'ai';

  return (
    <motion.div
      initial={{ opacity: 0, y: 10, scale: 0.98 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.3 }}
      className={`flex items-start gap-3 ${isAI ? '' : 'flex-row-reverse'}`}
    >
      {/* Avatar */}
      <div
        className="w-8 h-8 rounded-full flex items-center justify-center shrink-0 text-sm"
        style={{
          background: isAI ? 'var(--gradient-primary)' : roleColor,
        }}
      >
        {isAI ? '🤖' : '👤'}
      </div>

      {/* Bubble */}
      <div
        className={`max-w-[80%] px-4 py-3 rounded-2xl text-sm leading-relaxed ${isAI ? 'rounded-tl-md' : 'rounded-tr-md'}`}
        style={{
          background: isAI ? 'var(--card)' : `${roleColor}15`,
          border: `1px solid ${isAI ? 'var(--border)' : `${roleColor}30`}`,
        }}
      >
        <div
          dangerouslySetInnerHTML={{
            __html: formatMessage(message.content),
          }}
        />
      </div>
    </motion.div>
  );
}

function formatMessage(text: string): string {
  return text
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/_(.*?)_/g, '<em>$1</em>')
    .replace(/\n/g, '<br/>');
}