import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, Circle, Play, BookOpen } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";

const trainingModules = [
  {
    id: 'safety',
    title: 'Workplace Safety',
    duration: '15 min',
    required: true,
    description: 'Learn about workplace safety protocols and emergency procedures',
    topics: ['Emergency exits', 'Fire safety', 'First aid basics', 'Reporting incidents'],
  },
  {
    id: 'hygiene',
    title: 'Food Safety & Hygiene',
    duration: '20 min',
    required: true,
    description: 'Essential food handling and hygiene standards',
    topics: ['Handwashing', 'Cross-contamination', 'Temperature control', 'Storage guidelines'],
  },
  {
    id: 'customer_service',
    title: 'Customer Service Excellence',
    duration: '10 min',
    required: true,
    description: 'Delivering outstanding service to clients and guests',
    topics: ['Communication skills', 'Handling complaints', 'Professional etiquette', 'Teamwork'],
  },
  {
    id: 'compliance',
    title: 'Compliance & Policies',
    duration: '12 min',
    required: true,
    description: 'Company policies and legal compliance requirements',
    topics: ['Code of conduct', 'Anti-discrimination', 'Data privacy', 'Time tracking'],
  },
];

export default function TrainingStep({ data, onNext, onBack }) {
  const [training, setTraining] = useState(data || { completed: [], acknowledged: false });

  const handleModuleComplete = (moduleId) => {
    setTraining(prev => ({
      ...prev,
      completed: prev.completed.includes(moduleId)
        ? prev.completed.filter(id => id !== moduleId)
        : [...prev.completed, moduleId],
    }));
  };

  const handleAcknowledge = (checked) => {
    setTraining(prev => ({ ...prev, acknowledged: checked }));
  };

  const handleNext = () => {
    const allRequired = trainingModules
      .filter(m => m.required)
      .every(m => training.completed.includes(m.id));

    if (!allRequired || !training.acknowledged) {
      return;
    }

    onNext({ type: 'training', data: training });
  };

  const isComplete = (moduleId) => training.completed.includes(moduleId);
  const allRequiredComplete = trainingModules
    .filter(m => m.required)
    .every(m => training.completed.includes(m.id));

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-bold text-slate-900 mb-2">Compliance Training</h2>
        <p className="text-sm text-slate-500">Complete required training modules to ensure readiness</p>
      </div>

      <div className="space-y-3">
        {trainingModules.map(module => (
          <Card 
            key={module.id} 
            className={isComplete(module.id) ? "border-green-500 bg-green-50" : ""}
          >
            <CardContent className="p-4">
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 mt-1">
                  {isComplete(module.id) ? (
                    <CheckCircle className="w-6 h-6 text-green-600" />
                  ) : (
                    <Circle className="w-6 h-6 text-slate-400" />
                  )}
                </div>

                <div className="flex-1">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <h3 className="font-semibold text-slate-900">
                        {module.title}
                        {module.required && <span className="text-red-500 ml-1">*</span>}
                      </h3>
                      <p className="text-sm text-slate-500">{module.duration} · {module.description}</p>
                    </div>
                  </div>

                  <ul className="text-sm text-slate-600 mb-3 ml-4 space-y-1">
                    {module.topics.map((topic, idx) => (
                      <li key={idx} className="list-disc">{topic}</li>
                    ))}
                  </ul>

                  <Button
                    size="sm"
                    variant={isComplete(module.id) ? "outline" : "default"}
                    onClick={() => handleModuleComplete(module.id)}
                    className={isComplete(module.id) ? "" : "bg-[#0A39DF]"}
                  >
                    {isComplete(module.id) ? (
                      <>
                        <CheckCircle className="w-4 h-4 mr-2" />
                        Completed
                      </>
                    ) : (
                      <>
                        <Play className="w-4 h-4 mr-2" />
                        Start Training
                      </>
                    )}
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {allRequiredComplete && (
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <Checkbox
                id="acknowledge"
                checked={training.acknowledged}
                onCheckedChange={handleAcknowledge}
              />
              <label htmlFor="acknowledge" className="text-sm text-slate-700 cursor-pointer">
                I acknowledge that I have completed the required training modules and understand the 
                policies, procedures, and safety guidelines outlined above. I agree to follow all 
                company policies and maintain compliance standards.
              </label>
            </div>
          </CardContent>
        </Card>
      )}

      <div className="flex justify-between pt-4">
        <Button variant="outline" onClick={onBack}>
          Back
        </Button>
        <Button 
          onClick={handleNext} 
          disabled={!allRequiredComplete || !training.acknowledged}
          className="bg-[#0A39DF]"
        >
          Complete Onboarding
        </Button>
      </div>
    </div>
  );
}