import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { CheckCircle, User, FileText, BookOpen, Sparkles } from "lucide-react";
import { Badge } from "@/components/ui/badge";

export default function CompletionStep({ data, onComplete, onBack, isSubmitting }) {
  const { profile, documents, training } = data;

  return (
    <div className="space-y-6">
      <div className="text-center">
        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <Sparkles className="w-8 h-8 text-green-600" />
        </div>
        <h2 className="text-2xl font-bold text-slate-900 mb-2">You're All Set! 🎉</h2>
        <p className="text-slate-500">Review your information before completing onboarding</p>
      </div>

      {/* Summary Cards */}
      <div className="space-y-4">
        {/* Profile Summary */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                <User className="w-5 h-5 text-blue-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-slate-900 mb-2">Profile Information</h3>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>
                    <p className="text-slate-500">Name</p>
                    <p className="font-medium">{profile.full_name}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Email</p>
                    <p className="font-medium">{profile.email}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Position</p>
                    <p className="font-medium">{profile.position}</p>
                  </div>
                  <div>
                    <p className="text-slate-500">Location</p>
                    <p className="font-medium">{profile.city}</p>
                  </div>
                </div>
              </div>
              <CheckCircle className="w-5 h-5 text-green-600" />
            </div>
          </CardContent>
        </Card>

        {/* Documents Summary */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                <FileText className="w-5 h-5 text-purple-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-slate-900 mb-2">Documents Uploaded</h3>
                <div className="flex flex-wrap gap-2">
                  {documents.map((doc, idx) => (
                    <Badge key={idx} variant="outline" className="text-xs">
                      {doc.name}
                    </Badge>
                  ))}
                  {documents.length === 0 && (
                    <p className="text-sm text-slate-500">No documents uploaded</p>
                  )}
                </div>
              </div>
              <CheckCircle className="w-5 h-5 text-green-600" />
            </div>
          </CardContent>
        </Card>

        {/* Training Summary */}
        <Card>
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
                <BookOpen className="w-5 h-5 text-amber-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-slate-900 mb-2">Training Completed</h3>
                <p className="text-sm text-slate-600">
                  {training.completed.length} training modules completed
                </p>
                {training.acknowledged && (
                  <Badge className="mt-2 bg-green-500">Compliance Acknowledged</Badge>
                )}
              </div>
              <CheckCircle className="w-5 h-5 text-green-600" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Next Steps */}
      <Card className="bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
        <CardContent className="p-4">
          <h3 className="font-semibold text-slate-900 mb-2">What Happens Next?</h3>
          <ul className="space-y-2 text-sm text-slate-600">
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
              <span>Your profile will be activated and available for shift assignments</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
              <span>You'll receive an email confirmation with your login credentials</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
              <span>Our team will review your documents within 24-48 hours</span>
            </li>
            <li className="flex items-start gap-2">
              <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
              <span>You can start accepting shift invitations immediately</span>
            </li>
          </ul>
        </CardContent>
      </Card>

      <div className="flex justify-between pt-4">
        <Button variant="outline" onClick={onBack} disabled={isSubmitting}>
          Back
        </Button>
        <Button 
          onClick={onComplete} 
          disabled={isSubmitting}
          className="bg-gradient-to-r from-[#0A39DF] to-blue-600"
        >
          {isSubmitting ? "Creating Profile..." : "Complete Onboarding"}
        </Button>
      </div>
    </div>
  );
}