import { useState } from 'react';
import { FileEdit, Download, ChevronRight, Check, ArrowLeft, Eye, User, Briefcase, GraduationCap, Award } from 'lucide-react';

export default function CVMaker() {
  const [currentView, setCurrentView] = useState('landing'); // 'landing', 'templates', 'editor'
  const [selectedTemplate, setSelectedTemplate] = useState(null);
  const [previewTemplate, setPreviewTemplate] = useState(null); // Add this state
  const [cvData, setCvData] = useState({
    personalInfo: {
      fullName: '',
      title: '',
      email: '',
      phone: '',
      profileImage: '' // Added for profile image
    },
    summary: '',
    experience: [
      {
        id: 1,
        title: '',
        company: '',
        description: ''
      }
    ],
    education: [
      {
        id: 1,
        degree: '',
        school: '',
        year: ''
      }
    ],
    skills: ['']
  });

  const templates = [
    {
      id: 1,
      name: "Professional",
      description: "Clean and minimal design perfect for any industry",
      image: "https://images.pexels.com/photos/3771807/pexels-photo-3771807.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      color: "blue",
      preview: (data) => (
        <div className="bg-white p-8 rounded-lg shadow-lg">
          <div className="flex items-start gap-6">
            <div className="w-32 h-32 rounded-full overflow-hidden bg-gray-200 flex-shrink-0">
              <img 
                src={data.personalInfo.profileImage || "https://via.placeholder.com/128"} 
                alt="Profile" 
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <h2 className="text-2xl font-bold text-gray-900">{data.personalInfo.fullName || "Your Name"}</h2>
              <p className="text-blue-600 font-medium">{data.personalInfo.title || "Professional Title"}</p>
              <div className="mt-2 text-gray-600">
                <p>{data.personalInfo.email || "email@example.com"}</p>
                <p>{data.personalInfo.phone || "+1 234 567 890"}</p>
              </div>
            </div>
          </div>
          <div className="mt-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">Professional Summary</h3>
            <p className="text-gray-600">{data.summary || "Your professional summary goes here..."}</p>
          </div>
        </div>
      )
    },
    {
      id: 2,
      name: "Creative",
      description: "Modern and bold layout for creative professionals",
      image: "https://images.pexels.com/photos/3771823/pexels-photo-3771823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      color: "purple",
      preview: (data) => (
        <div className="bg-gradient-to-br from-purple-50 to-white p-8 rounded-lg shadow-lg">
          <div className="flex flex-col items-center text-center">
            <div className="w-40 h-40 rounded-full overflow-hidden bg-gray-200 border-4 border-purple-500">
              <img 
                src={data.personalInfo.profileImage || "https://via.placeholder.com/160"} 
                alt="Profile" 
                className="w-full h-full object-cover"
              />
            </div>
            <h2 className="mt-4 text-3xl font-bold text-gray-900">{data.personalInfo.fullName || "Your Name"}</h2>
            <p className="text-purple-600 font-medium text-lg">{data.personalInfo.title || "Professional Title"}</p>
            <div className="mt-2 text-gray-600">
              <p>{data.personalInfo.email || "email@example.com"}</p>
              <p>{data.personalInfo.phone || "+1 234 567 890"}</p>
            </div>
          </div>
          <div className="mt-6 text-center">
            <h3 className="text-xl font-semibold text-gray-900 mb-2">About Me</h3>
            <p className="text-gray-600">{data.summary || "Your professional summary goes here..."}</p>
          </div>
        </div>
      )
    },
    {
      id: 3,
      name: "Executive",
      description: "Sophisticated design for senior positions",
      image: "https://images.pexels.com/photos/3771815/pexels-photo-3771815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      color: "gray",
      preview: (data) => (
        <div className="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
          <div className="flex items-center gap-8">
            <div className="w-36 h-36 rounded-lg overflow-hidden bg-gray-800">
              <img 
                src={data.personalInfo.profileImage || "https://via.placeholder.com/144"} 
                alt="Profile" 
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold">{data.personalInfo.fullName || "Your Name"}</h2>
              <p className="text-gray-400 text-xl mt-1">{data.personalInfo.title || "Professional Title"}</p>
              <div className="mt-4 text-gray-300">
                <p>{data.personalInfo.email || "email@example.com"}</p>
                <p>{data.personalInfo.phone || "+1 234 567 890"}</p>
              </div>
            </div>
          </div>
          <div className="mt-8">
            <h3 className="text-xl font-semibold mb-3">Executive Summary</h3>
            <p className="text-gray-300">{data.summary || "Your professional summary goes here..."}</p>
          </div>
        </div>
      )
    }
  ];

  const handleInputChange = (section, field, value, index = null) => {
    setCvData(prev => {
      if (index !== null) {
        const newSection = [...prev[section]];
        newSection[index] = { ...newSection[index], [field]: value };
        return { ...prev, [section]: newSection };
      }
      return {
        ...prev,
        [section]: typeof prev[section] === 'object' && !Array.isArray(prev[section])
          ? { ...prev[section], [field]: value }
          : value
      };
    });
  };

  const addListItem = (section) => {
    setCvData(prev => ({
      ...prev,
      [section]: [...prev[section], {
        id: prev[section].length + 1,
        title: '',
        company: '',
        description: ''
      }]
    }));
  };

  const handleDownloadPDF = () => {
    // Here you would implement actual PDF generation
    alert('Downloading your CV...');
  };

  // Landing Page Component
  const LandingPage = () => (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
      {/* Updated title to include special offer */}
      <div className="text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-6">
          Create Your Professional CV in Minutes
        </h1>
        <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
          Choose from our professionally designed templates and customize your CV with our easy-to-use editor.
        </p>
        <button
          onClick={() => setCurrentView('templates')}
          className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors flex items-center gap-2 mx-auto"
        >
          <FileEdit size={24} />
          Create Your CV
          <ChevronRight size={20} />
        </button>
      </div>
    </div>
  );

  // Template Selection Component with Live Preview
  const TemplateSelection = () => (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold text-gray-900 mb-4">
          Choose Your Template
        </h2>
        <p className="text-gray-600">
          Select from our professionally designed templates to get started
        </p>
      </div>

      <div className="grid md:grid-cols-3 gap-8">
        {templates.map((template) => (
          <div 
            key={template.id}
            className="group relative bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300"
          >
            {/* Template Preview Image */}
            <div className="aspect-[3/4] relative overflow-hidden">
              <img 
                src={template.image} 
                alt={template.name}
                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <button
                  onClick={() => setPreviewTemplate(template)}
                  className="bg-white text-gray-900 px-4 py-2 rounded-lg flex items-center gap-2 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300"
                >
                  <Eye size={20} />
                  Preview Template
                </button>
              </div>
            </div>

            {/* Template Info */}
            <div className="p-6">
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                {template.name}
              </h3>
              <p className="text-gray-600 mb-4">
                {template.description}
              </p>
              <button
                onClick={() => {
                  setSelectedTemplate(template.id);
                  setCurrentView('editor');
                }}
                className={`w-full py-2 px-4 rounded-lg font-medium transition-colors
                  ${selectedTemplate === template.id
                    ? 'bg-blue-600 text-white hover:bg-blue-700'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
              >
                Use This Template
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Live Preview Modal */}
      {previewTemplate && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-semibold">{previewTemplate.name} Template</h3>
              <button 
                onClick={() => setPreviewTemplate(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                ✕
              </button>
            </div>
            {previewTemplate.preview(cvData)}
            <div className="mt-6 flex justify-end gap-4">
              <button
                onClick={() => setPreviewTemplate(null)}
                className="px-4 py-2 text-gray-600 hover:text-gray-800"
              >
                Close
              </button>
              <button
                onClick={() => {
                  setSelectedTemplate(previewTemplate.id);
                  setPreviewTemplate(null);
                  setCurrentView('editor');
                }}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                Use This Template
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );

  // CV Editor Component
  const CVEditor = () => (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex justify-between items-center mb-8">
        <button
          onClick={() => setCurrentView('templates')}
          className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
        >
          <ArrowLeft size={20} />
          Back to Templates
        </button>
        <button
          onClick={handleDownloadPDF}
          className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          <Download size={20} />
          Download PDF
        </button>
      </div>

      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">Personal Information</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input
            type="text"
            placeholder="Full Name"
            value={cvData.personalInfo.fullName}
            onChange={(e) => handleInputChange('personalInfo', 'fullName', e.target.value)}
            className="w-full p-2 border rounded-lg"
          />
          <input
            type="text"
            placeholder="Professional Title"
            value={cvData.personalInfo.title}
            onChange={(e) => handleInputChange('personalInfo', 'title', e.target.value)}
            className="w-full p-2 border rounded-lg"
          />
          <input
            type="email"
            placeholder="Email"
            value={cvData.personalInfo.email}
            onChange={(e) => handleInputChange('personalInfo', 'email', e.target.value)}
            className="w-full p-2 border rounded-lg"
          />
          <input
            type="tel"
            placeholder="Phone"
            value={cvData.personalInfo.phone}
            onChange={(e) => handleInputChange('personalInfo', 'phone', e.target.value)}
            className="w-full p-2 border rounded-lg"
          />
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">Professional Summary</h3>
        <textarea
          placeholder="Write a brief professional summary..."
          value={cvData.summary}
          onChange={(e) => handleInputChange('summary', null, e.target.value)}
          className="w-full p-2 border rounded-lg h-32"
        />
      </div>

      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">Experience</h3>
        {cvData.experience.map((exp, index) => (
          <div key={exp.id} className="mb-4">
            <input
              type="text"
              placeholder="Job Title"
              value={exp.title}
              onChange={(e) => handleInputChange('experience', 'title', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
            <input
              type="text"
              placeholder="Company"
              value={exp.company}
              onChange={(e) => handleInputChange('experience', 'company', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
            <textarea
              placeholder="Job Description"
              value={exp.description}
              onChange={(e) => handleInputChange('experience', 'description', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
          </div>
        ))}
        <button
          onClick={() => addListItem('experience')}
          className="text-blue-600 hover:text-blue-700"
        >
          + Add Experience
        </button>
      </div>

      {/* Education Section */}
      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">Education</h3>
        {cvData.education.map((edu, index) => (
          <div key={edu.id} className="mb-4">
            <input
              type="text"
              placeholder="Degree"
              value={edu.degree}
              onChange={(e) => handleInputChange('education', 'degree', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
            <input
              type="text"
              placeholder="School"
              value={edu.school}
              onChange={(e) => handleInputChange('education', 'school', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
            <input
              type="text"
              placeholder="Year"
              value={edu.year}
              onChange={(e) => handleInputChange('education', 'year', e.target.value, index)}
              className="w-full p-2 border rounded-lg mb-2"
            />
          </div>
        ))}
        <button
          onClick={() => addListItem('education')}
          className="text-blue-600 hover:text-blue-700"
        >
          + Add Education
        </button>
      </div>

      {/* Skills Section */}
      <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">Skills</h3>
        {cvData.skills.map((skill, index) => (
          <div key={index} className="mb-2">
            <input
              type="text"
              value={skill}
              onChange={(e) => {
                const newSkills = [...cvData.skills];
                newSkills[index] = e.target.value;
                setCvData({ ...cvData, skills: newSkills });
              }}
              className="w-full p-2 border rounded-lg"
            />
          </div>
        ))}
        <button
          onClick={() => {
            setCvData(prev => ({ ...prev, skills: [...prev.skills, ''] }));
          }}
          className="text-blue-600 hover:text-blue-700"
        >
          + Add Skill
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      <nav className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center">
          <div 
            className="font-semibold text-xl text-gray-800 cursor-pointer"
            onClick={() => setCurrentView('landing')}
          >
            CV Maker
          </div>
        </div>
      </nav>

      {currentView === 'landing' && <LandingPage />}
      {currentView === 'templates' && <TemplateSelection />}
      {currentView === 'editor' && <CVEditor />}
    </div>
  );
}