import React from "react";
import { ArrowLeft, CheckCircle2, XCircle, Clock, ListChecks, ThumbsUp, TrendingUp, Lightbulb, Code, FileCode2, Code2, Layout, GitBranch, ArrowRight } from "lucide-react";
import Link from "next/link";

interface ExamResultsProps {
  score: number;
  correct: number;
  incorrect: number;
  timeSpent: number;
  totalQuestions: number;
  onReview: () => void;
}

export function ExamResults({ score, correct, incorrect, timeSpent, totalQuestions, onReview }: ExamResultsProps) {
  const formatTime = (seconds: number) => {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m}m ${s}s`;
  };

  const radius = 60;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (score / 100) * circumference;

  const detailedScores = [
    { name: "HTML & CSS", icon: <FileCode2 className="w-5 h-5 text-[#fc6123]" />, score: 85, correct: 17, total: 20, bg: "bg-red-50" },
    { name: "JavaScript", icon: <Code className="w-5 h-5 text-yellow-500" />, score: 70, correct: 14, total: 20, bg: "bg-yellow-50" },
    { name: "React", icon: <Code2 className="w-5 h-5 text-blue-500" />, score: 80, correct: 16, total: 20, bg: "bg-blue-50" },
    { name: "Responsive Design", icon: <Layout className="w-5 h-5 text-green-500" />, score: 75, correct: 15, total: 20, bg: "bg-green-50" },
    { name: "Git & Version Control", icon: <GitBranch className="w-5 h-5 text-purple-500" />, score: 65, correct: 13, total: 20, bg: "bg-purple-50" },
  ];

  return (
    <div className="min-h-screen bg-[#f8f9fa] py-8 px-6 lg:px-12">
      <div className="max-w-7xl mx-auto">
        <Link href="/interview-prep" className="inline-flex items-center gap-2 text-sm text-gray-500 font-medium hover:text-gray-900 transition-colors mb-6">
          <ArrowLeft className="w-4 h-4" /> Back to Practice Tests
        </Link>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column */}
          <div className="lg:col-span-2 flex flex-col gap-6">
            
            {/* Top Stats Card */}
            <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 flex flex-col md:flex-row gap-8">
              {/* Score Chart */}
              <div className="flex-1 flex flex-col items-center justify-center">
                <div className="text-left w-full mb-6">
                  <h1 className="text-2xl font-bold text-gray-900">Test Completed!</h1>
                  <p className="text-gray-500 text-sm mt-1">Great effort! Keep practicing to improve your skills.</p>
                </div>
                
                <div className="relative flex items-center justify-center">
                  <svg className="transform -rotate-90 w-48 h-48">
                    <circle cx="96" cy="96" r={radius} className="stroke-gray-100" strokeWidth="12" fill="none" />
                    <circle 
                      cx="96" cy="96" r={radius} 
                      className="stroke-[#fc6123] transition-all duration-1000 ease-out" 
                      strokeWidth="12" fill="none" 
                      strokeDasharray={circumference} 
                      strokeDashoffset={strokeDashoffset} 
                      strokeLinecap="round" 
                    />
                  </svg>
                  <div className="absolute flex flex-col items-center justify-center text-center">
                    <span className="text-gray-500 text-sm font-medium">Your Score</span>
                    <span className="text-4xl font-bold text-gray-900 leading-tight">{score}%</span>
                    <span className="text-sm font-semibold text-gray-700">Good Job! 🎉</span>
                  </div>
                </div>
              </div>

              {/* Stat Boxes */}
              <div className="flex-1 flex flex-col gap-3 justify-center">
                <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl bg-white shadow-sm">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
                      <CheckCircle2 className="w-5 h-5 text-green-500" />
                    </div>
                    <span className="text-sm font-medium text-gray-600">Correct Answers</span>
                  </div>
                  <div className="text-xl font-bold text-gray-900">{correct} <span className="text-sm text-gray-400 font-medium">/{totalQuestions}</span></div>
                </div>

                <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl bg-white shadow-sm">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
                      <XCircle className="w-5 h-5 text-red-500" />
                    </div>
                    <span className="text-sm font-medium text-gray-600">Incorrect Answers</span>
                  </div>
                  <div className="text-xl font-bold text-gray-900">{incorrect} <span className="text-sm text-gray-400 font-medium">/{totalQuestions}</span></div>
                </div>

                <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl bg-white shadow-sm">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-yellow-50 flex items-center justify-center">
                      <Clock className="w-5 h-5 text-yellow-500" />
                    </div>
                    <span className="text-sm font-medium text-gray-600">Time Taken</span>
                  </div>
                  <div className="text-xl font-bold text-gray-900">{formatTime(timeSpent)} <span className="text-sm text-gray-400 font-medium">/ 60m</span></div>
                </div>

                <div className="flex items-center justify-between p-4 border border-gray-100 rounded-xl bg-white shadow-sm">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center">
                      <ListChecks className="w-5 h-5 text-purple-500" />
                    </div>
                    <span className="text-sm font-medium text-gray-600">Questions Attempted</span>
                  </div>
                  <div className="text-xl font-bold text-gray-900">{correct + incorrect} <span className="text-sm text-gray-400 font-medium">/{totalQuestions}</span></div>
                </div>
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex gap-4">
              <Link href="/seeker/dashboard" className="flex-1 bg-white border border-gray-200 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors shadow-sm">
                <Layout className="w-4 h-4" /> Back to Dashboard
              </Link>
              <button onClick={onReview} className="flex-1 bg-[#fc6123] hover:bg-[#e5561e] text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2 shadow-sm transition-colors">
                <CheckCircle2 className="w-4 h-4" /> Review Answers
              </button>
            </div>

            {/* Strengths & Improvements */}
            <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
              <h2 className="text-lg font-bold text-gray-900 mb-6">Strengths & Improvements</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center shrink-0">
                    <ThumbsUp className="w-5 h-5 text-green-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 mb-2">Strengths</h3>
                    <ul className="text-sm text-gray-600 space-y-2 list-disc list-inside">
                      <li>Strong understanding of HTML & CSS.</li>
                      <li>Good grasp of React concepts.</li>
                      <li>Responsive design knowledge is solid.</li>
                    </ul>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center shrink-0">
                    <TrendingUp className="w-5 h-5 text-orange-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 mb-2">Areas to Improve</h3>
                    <ul className="text-sm text-gray-600 space-y-2 list-disc list-inside">
                      <li>Work more on JavaScript fundamentals.</li>
                      <li>Practice Git commands and workflows.</li>
                      <li>Improve time management in tests.</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            {/* Banner */}
            <div className="bg-[#fff0eb] border border-[#ffdbce] rounded-2xl p-6 flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 rounded-full bg-[#fc6123] flex items-center justify-center shrink-0">
                  <Lightbulb className="w-5 h-5 text-white" />
                </div>
                <span className="font-bold text-gray-900">Keep practicing! Consistency is the key to success.</span>
              </div>
              <Link href="/interview-prep" className="bg-[#fc6123] hover:bg-[#e5561e] text-white px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2 transition-colors">
                Explore More Tests <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

          </div>

          {/* Right Column - Detailed Performance */}
          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 flex flex-col h-full">
            <h2 className="text-lg font-bold text-gray-900 mb-8">Detailed Performance</h2>
            
            <div className="flex flex-col gap-8 flex-1">
              {detailedScores.map((cat, idx) => (
                <div key={idx}>
                  <div className="flex justify-between items-center mb-2">
                    <div className="flex items-center gap-3">
                      <div className={`w-10 h-10 rounded-full ${cat.bg} flex items-center justify-center`}>
                        {cat.icon}
                      </div>
                      <div className="font-semibold text-gray-900 text-sm">{cat.name}</div>
                    </div>
                    <div className="font-bold text-gray-900 text-sm">{cat.score}%</div>
                  </div>
                  
                  <div className="w-full bg-gray-100 h-1.5 rounded-full mb-1">
                    <div className="bg-[#fc6123] h-full rounded-full" style={{ width: `${cat.score}%` }}></div>
                  </div>
                  
                  <div className="text-[11px] text-gray-400 font-medium">{cat.correct} / {cat.total}</div>
                </div>
              ))}
            </div>
          </div>
          
        </div>
      </div>
    </div>
  );
}