import React, { useEffect, useState } from 'react';
import { Problem, TutorResponse } from '../types';
import { getTutorExplanation } from '../services/geminiService';
import { Bot, Loader2, X } from 'lucide-react';
import { Button } from './Button';

interface TutorModalProps {
  problem: Problem;
  onClose: () => void;
  isOpen: boolean;
}

export const TutorModal: React.FC<TutorModalProps> = ({ problem, onClose, isOpen }) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<TutorResponse | null>(null);

  useEffect(() => {
    if (isOpen && problem) {
      setLoading(true);
      getTutorExplanation(problem)
        .then(setData)
        .finally(() => setLoading(false));
    }
  }, [isOpen, problem]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in duration-200">
        <div className="bg-indigo-600 p-4 flex items-center justify-between text-white">
          <div className="flex items-center gap-2">
            <Bot />
            <span className="font-bold text-lg">Math Coach</span>
          </div>
          <button onClick={onClose} className="hover:bg-indigo-500 p-1 rounded">
            <X size={20} />
          </button>
        </div>
        
        <div className="p-6">
          <div className="text-center mb-6">
            <p className="text-slate-500 text-sm uppercase tracking-wide font-bold mb-1">The problem was</p>
            <div className="text-4xl font-black text-slate-800">
              {problem.a} {problem.operator} {problem.b} = <span className="text-red-500">{problem.answer}</span>
            </div>
          </div>

          {loading ? (
            <div className="flex flex-col items-center justify-center py-8 text-indigo-500">
              <Loader2 className="animate-spin mb-2" size={32} />
              <p>Thinking...</p>
            </div>
          ) : data ? (
            <div className="space-y-4">
              <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
                <p className="text-indigo-900 font-medium leading-relaxed">{data.explanation}</p>
              </div>
              <p className="text-center text-slate-500 italic">"{data.encouragement}"</p>
            </div>
          ) : (
             <p className="text-red-500 text-center">Could not load explanation.</p>
          )}

          <div className="mt-8">
            <Button onClick={onClose} className="w-full">Got it!</Button>
          </div>
        </div>
      </div>
    </div>
  );
};