import React, { useState } from 'react';
import { ClayCard } from './ClayCard';
import { Button } from './Button';
import { ArrowRight, ArrowLeft, TrendingUp, Users, BookOpen } from 'lucide-react';

export interface QuizResult {
  yearsInBusiness: string;
  dealsLast12Months: number;
  leadsPerMonth: number;
  hoursProspecting: number;
  performanceLevel: 'below' | 'at' | 'above';
  recommendedAction: 'coaching' | 'team' | 'none';
}

interface QuizProps {
  onComplete: (result: QuizResult) => void;
  calendlyCoachingLink?: string;
  calendlyTeamLink?: string;
}

interface Question {
  id: keyof Pick<QuizResult, 'yearsInBusiness' | 'dealsLast12Months' | 'leadsPerMonth' | 'hoursProspecting'>;
  question: string;
  type: 'select' | 'number';
  options?: { value: string; label: string }[];
  placeholder?: string;
}

const questions: Question[] = [
  {
    id: 'yearsInBusiness',
    question: 'How long have you been in real estate?',
    type: 'select',
    options: [
      { value: '0-1', label: 'Less than 1 year' },
      { value: '1-3', label: '1-3 years' },
      { value: '3-5', label: '3-5 years' },
      { value: '5-10', label: '5-10 years' },
      { value: '10+', label: '10+ years' },
    ],
  },
  {
    id: 'dealsLast12Months',
    question: 'How many deals did you close in the last 12 months?',
    type: 'number',
    placeholder: 'Enter number of deals',
  },
  {
    id: 'leadsPerMonth',
    question: 'How many leads do you generate per month?',
    type: 'number',
    placeholder: 'Enter number of leads',
  },
  {
    id: 'hoursProspecting',
    question: 'How many hours per week do you spend prospecting?',
    type: 'number',
    placeholder: 'Enter hours per week',
  },
];

// Peer benchmarks based on years of experience
const getPeerBenchmarks = (years: string) => {
  const benchmarks: Record<string, { deals: number; leads: number; hours: number }> = {
    '0-1': { deals: 3, leads: 10, hours: 15 },
    '1-3': { deals: 8, leads: 20, hours: 12 },
    '3-5': { deals: 12, leads: 30, hours: 10 },
    '5-10': { deals: 18, leads: 40, hours: 10 },
    '10+': { deals: 24, leads: 50, hours: 8 },
  };
  return benchmarks[years] || benchmarks['1-3'];
};

const calculatePerformanceLevel = (
  answers: Partial<QuizResult>
): { level: 'below' | 'at' | 'above'; action: 'coaching' | 'team' | 'none' } => {
  const benchmarks = getPeerBenchmarks(answers.yearsInBusiness || '1-3');

  let score = 0;

  // Compare deals (weight: 40%)
  const dealsRatio = (answers.dealsLast12Months || 0) / benchmarks.deals;
  if (dealsRatio >= 1.2) score += 40;
  else if (dealsRatio >= 0.8) score += 25;
  else score += 10;

  // Compare leads (weight: 35%)
  const leadsRatio = (answers.leadsPerMonth || 0) / benchmarks.leads;
  if (leadsRatio >= 1.2) score += 35;
  else if (leadsRatio >= 0.8) score += 22;
  else score += 8;

  // Compare prospecting hours (weight: 25%)
  const hoursRatio = (answers.hoursProspecting || 0) / benchmarks.hours;
  if (hoursRatio >= 1.2) score += 25;
  else if (hoursRatio >= 0.8) score += 16;
  else score += 6;

  // Determine performance level
  let level: 'below' | 'at' | 'above';
  let action: 'coaching' | 'team' | 'none';

  if (score >= 80) {
    level = 'above';
    action = 'none';
  } else if (score >= 55) {
    level = 'at';
    action = 'coaching';
  } else {
    level = 'below';
    action = 'team';
  }

  return { level, action };
};

export const Quiz: React.FC<QuizProps> = ({
  onComplete,
  calendlyCoachingLink = 'https://calendly.com/coaching',
  calendlyTeamLink = 'https://calendly.com/team',
}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [answers, setAnswers] = useState<Partial<QuizResult>>({});
  const [showResults, setShowResults] = useState(false);
  const [result, setResult] = useState<QuizResult | null>(null);

  const currentQuestion = questions[currentStep];
  const isLastQuestion = currentStep === questions.length - 1;
  const progress = ((currentStep + 1) / questions.length) * 100;

  const handleAnswer = (value: string | number) => {
    setAnswers((prev) => ({
      ...prev,
      [currentQuestion.id]: value,
    }));
  };

  const getCurrentAnswer = () => {
    return answers[currentQuestion.id];
  };

  const canProceed = () => {
    const answer = getCurrentAnswer();
    return answer !== undefined && answer !== '';
  };

  const handleNext = () => {
    if (!canProceed()) return;

    if (isLastQuestion) {
      const { level, action } = calculatePerformanceLevel(answers);
      const finalResult: QuizResult = {
        yearsInBusiness: answers.yearsInBusiness || '',
        dealsLast12Months: Number(answers.dealsLast12Months) || 0,
        leadsPerMonth: Number(answers.leadsPerMonth) || 0,
        hoursProspecting: Number(answers.hoursProspecting) || 0,
        performanceLevel: level,
        recommendedAction: action,
      };
      setResult(finalResult);
      setShowResults(true);
      onComplete(finalResult);
    } else {
      setCurrentStep((prev) => prev + 1);
    }
  };

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep((prev) => prev - 1);
    }
  };

  const handleCalendlyClick = (link: string) => {
    window.open(link, '_blank', 'noopener,noreferrer');
  };

  if (showResults && result) {
    return (
      <div className="max-w-xl mx-auto py-10 px-4 animate-fadeIn">
        <ClayCard>
          <div className="text-center">
            <div
              className={`w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner ${
                result.performanceLevel === 'above'
                  ? 'bg-green-100 text-green-600'
                  : result.performanceLevel === 'at'
                  ? 'bg-yellow-100 text-yellow-600'
                  : 'bg-indigo-100 text-indigo-600'
              }`}
            >
              <TrendingUp size={40} />
            </div>

            <h2 className="text-2xl font-bold text-gray-800 mb-4">Your Results</h2>

            {result.performanceLevel === 'above' && (
              <div className="mb-6">
                <p className="text-gray-600 leading-relaxed">
                  Great work! Based on your responses, you're performing above your peers.
                  Keep up the excellent momentum!
                </p>
              </div>
            )}

            {result.performanceLevel === 'at' && (
              <div className="mb-6">
                <p className="text-gray-600 leading-relaxed">
                  You're performing at peer level. With some additional coaching,
                  you could take your business to the next level.
                </p>
              </div>
            )}

            {result.performanceLevel === 'below' && (
              <div className="mb-6">
                <p className="text-gray-600 leading-relaxed">
                  Based on your peers, you may benefit from additional support.
                  Would you like to learn more about coaching or joining our team?
                </p>
              </div>
            )}

            {result.performanceLevel !== 'above' && (
              <div className="space-y-3 mt-8">
                <Button
                  fullWidth
                  variant="primary"
                  onClick={() => handleCalendlyClick(calendlyCoachingLink)}
                  className="gap-3"
                >
                  <BookOpen size={20} />
                  Learn about coaching
                </Button>
                <Button
                  fullWidth
                  variant="secondary"
                  onClick={() => handleCalendlyClick(calendlyTeamLink)}
                  className="gap-3"
                >
                  <Users size={20} />
                  Learn about joining the team
                </Button>
              </div>
            )}

            <div className="mt-8 pt-6 border-t border-gray-200">
              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">
                Your Responses
              </h3>
              <div className="grid grid-cols-2 gap-4 text-left">
                <div className="bg-gray-50 rounded-xl p-3">
                  <p className="text-xs text-gray-500">Experience</p>
                  <p className="font-semibold text-gray-800">{result.yearsInBusiness} years</p>
                </div>
                <div className="bg-gray-50 rounded-xl p-3">
                  <p className="text-xs text-gray-500">Deals (12 mo)</p>
                  <p className="font-semibold text-gray-800">{result.dealsLast12Months}</p>
                </div>
                <div className="bg-gray-50 rounded-xl p-3">
                  <p className="text-xs text-gray-500">Leads/Month</p>
                  <p className="font-semibold text-gray-800">{result.leadsPerMonth}</p>
                </div>
                <div className="bg-gray-50 rounded-xl p-3">
                  <p className="text-xs text-gray-500">Prospecting Hrs/Wk</p>
                  <p className="font-semibold text-gray-800">{result.hoursProspecting}</p>
                </div>
              </div>
            </div>
          </div>
        </ClayCard>
      </div>
    );
  }

  return (
    <div className="max-w-xl mx-auto py-10 px-4">
      {/* Progress Bar */}
      <div className="mb-8">
        <div className="flex justify-between text-sm text-gray-500 mb-2">
          <span>Question {currentStep + 1} of {questions.length}</span>
          <span>{Math.round(progress)}% complete</span>
        </div>
        <div className="h-2 bg-gray-200 rounded-full overflow-hidden shadow-inner">
          <div
            className="h-full bg-indigo-600 rounded-full transition-all duration-500 ease-out"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      <ClayCard>
        <div className="mb-6">
          <h2 className="text-xl font-bold text-gray-800 mb-2">
            {currentQuestion.question}
          </h2>
        </div>

        <div className="space-y-4 mb-8">
          {currentQuestion.type === 'select' && currentQuestion.options && (
            <div className="space-y-3">
              {currentQuestion.options.map((option) => (
                <ClayCard
                  key={option.value}
                  onClick={() => handleAnswer(option.value)}
                  selected={getCurrentAnswer() === option.value}
                  className="!p-4 !rounded-xl"
                >
                  <span className="text-gray-700 font-medium">{option.label}</span>
                </ClayCard>
              ))}
            </div>
          )}

          {currentQuestion.type === 'number' && (
            <input
              type="number"
              min="0"
              className="input-field"
              placeholder={currentQuestion.placeholder}
              value={getCurrentAnswer() ?? ''}
              onChange={(e) => handleAnswer(e.target.value ? Number(e.target.value) : '')}
            />
          )}
        </div>

        <div className="flex gap-3">
          {currentStep > 0 && (
            <Button variant="secondary" onClick={handleBack}>
              <ArrowLeft size={18} />
              Back
            </Button>
          )}
          <Button
            fullWidth
            variant="primary"
            onClick={handleNext}
            disabled={!canProceed()}
          >
            {isLastQuestion ? 'See Results' : 'Continue'}
            <ArrowRight size={18} />
          </Button>
        </div>
      </ClayCard>

      {/* Input field styles */}
      <style>{`
        .input-field {
          width: 100%;
          padding: 16px 20px;
          border-radius: 16px;
          background-color: #F9FAFB;
          border: 1px solid transparent;
          box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
          outline: none;
          transition: all 0.2s;
          font-size: 16px;
        }
        .input-field:focus {
          background-color: #fff;
          box-shadow: 0 0 0 2px #6366f1;
        }
        .input-field::placeholder {
          color: #9CA3AF;
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.4s ease-out;
        }
      `}</style>
    </div>
  );
};