import React, { useState } from "react";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";

interface ExamGuidelinesProps {
  title: string;
  subtitle: string;
  onStart: () => void;
}

export function ExamGuidelines({ title, subtitle, onStart }: ExamGuidelinesProps) {
  const [isChecked, setIsChecked] = useState(false);

  const guidelines = [
    "Each Question Has Its Own Countdown Timer — Once It Hits Zero, The Test Auto-Advances.",
    "MCQ Questions Are Auto-Scored; Short-Answer Questions Are Scored On Completion And Clarity, Not Graded By An AI Reviewer.",
    "You Can Go Back To A Previous Question Once You've Moved On.",
    "Read Each Question Carefully Before Answering.",
    "Do Not Refresh The Page Mid-Test — Your Progress Will Reset.",
    "At The End, You'll Get A Category-Wise Score Breakdown And Targeted Suggestions."
  ];

  return (
    <div className="min-h-screen bg-[#f8f9fa] flex flex-col py-12 px-6">
      <div className="max-w-6xl mx-auto w-full flex-grow flex flex-col justify-center">
        <h1 className="text-[32px] font-semibold text-gray-900 mb-2">{title}</h1>
        <p className="text-gray-600 mb-10">{subtitle}</p>

        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-8">
          <ul className="flex flex-col mb-10">
            {guidelines.map((text, index) => (
              <li 
                key={index} 
                className={`py-4 flex gap-4 text-[15px] font-medium text-gray-700 tracking-tight ${
                  index !== guidelines.length - 1 ? "border-b border-gray-100" : ""
                }`}
              >
                <span className="text-[#fc6123] font-semibold min-w-[24px]">
                  {String(index + 1).padStart(2, '0')}.
                </span>
                {text}
              </li>
            ))}
          </ul>

          <div className="pt-6 border-t border-gray-100">
            <label className="flex items-center gap-3 cursor-pointer group">
              <div className="relative flex items-center justify-center">
                <input 
                  type="checkbox" 
                  className="w-5 h-5 border-2 border-gray-300 rounded appearance-none checked:bg-[#fc6123] checked:border-[#fc6123] transition-colors cursor-pointer"
                  checked={isChecked}
                  onChange={(e) => setIsChecked(e.target.checked)}
                />
                {isChecked && (
                  <svg className="w-3.5 h-3.5 text-white absolute pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                )}
              </div>
              <span className="text-[15px] text-gray-700 font-medium group-hover:text-gray-900 transition-colors">
                I've Read The Guidelines And I'm Ready To Start The Timer.
              </span>
            </label>
          </div>
        </div>

        <div className="flex justify-end items-center gap-6">
          <Link href="/interview-prep" className="text-sm font-semibold text-gray-900 hover:text-[#fc6123] transition-colors flex items-center gap-2">
            <ArrowLeft className="w-4 h-4" /> Back
          </Link>
          <button 
            disabled={!isChecked}
            onClick={onStart}
            className={`px-10 py-3 rounded-lg text-sm font-semibold transition-all ${
              isChecked 
                ? "bg-[#fc6123] hover:bg-[#e5561e] text-white shadow-md hover:shadow-lg" 
                : "bg-gray-200 text-gray-400 cursor-not-allowed"
            }`}
          >
            Start
          </button>
        </div>
      </div>
    </div>
  );
}