import { motion } from 'framer-motion';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { FormattedDescription } from '@/components/common/FormattedDescription';
import { CheckCircle, Rocket, FileText, Users, Eye, Upload, Flame, Target, TrendingUp, DollarSign } from 'lucide-react';
import { FormData, RequestTemplate } from '@/hooks/useCreateRequestForm';

interface ReviewSubmitStepProps {
  formData: FormData;
  selectedTemplate: RequestTemplate | null;
}

const getPriorityIcon = (priority: string) => {
  switch (priority) {
    case 'high': return <Flame className="w-4 h-4 text-red-600" />;
    case 'medium': return <Target className="w-4 h-4 text-orange-600" />;
    case 'low': return <TrendingUp className="w-4 h-4 text-green-600" />;
    default: return <Target className="w-4 h-4 text-gray-600" />;
  }
};

/**
 * Component: ReviewSubmitStep
 * 
 * Purpose: Step 6 - Review and submit request
 * 
 * Features:
 * - Displays all request information for review
 * - Shows approval workflow summary
 * - Lists participants and documents
 * - Test IDs for testing
 */
export function ReviewSubmitStep({
  formData,
  selectedTemplate
}: ReviewSubmitStepProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className="space-y-6"
      data-testid="review-submit-step"
    >
      <div className="text-center mb-8" data-testid="review-submit-header">
        <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
          <CheckCircle className="w-8 h-8 text-white" />
        </div>
        <h2 className="text-2xl font-bold text-gray-900 mb-2" data-testid="review-submit-title">
          Review & Submit
        </h2>
        <p className="text-gray-600" data-testid="review-submit-description">
          Please review all details before submitting your request for approval.
        </p>
      </div>

      <div className="max-w-5xl mx-auto space-y-8" data-testid="review-submit-content">
        {/* Request Overview */}
        <Card className="border-2 border-green-200 bg-green-50/50" data-testid="review-submit-overview-card">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-green-900" data-testid="review-submit-overview-title">
              <Rocket className="w-5 h-5" />
              Request Overview
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-testid="review-submit-overview-grid">
              <div data-testid="review-submit-overview-type">
                <Label className="text-green-900 font-semibold">Request Type</Label>
                <p className="text-green-800 mt-1">{selectedTemplate?.name}</p>
                <Badge variant="outline" className="mt-2 text-xs border-green-300 text-green-700">
                  {selectedTemplate?.category}
                </Badge>
              </div>
              <div data-testid="review-submit-overview-priority">
                <Label className="text-green-900 font-semibold">Priority</Label>
                <div className="flex items-center gap-2 mt-1">
                  {getPriorityIcon(formData.priority)}
                  <span className="text-green-800 capitalize">{formData.priority}</span>
                </div>
              </div>
              <div data-testid="review-submit-overview-workflow">
                <Label className="text-green-900 font-semibold">Workflow Type</Label>
                <p className="text-green-800 mt-1 capitalize">{formData.workflowType}</p>
                <p className="text-sm text-green-700">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
              </div>
            </div>
            <div data-testid="review-submit-overview-title">
              <Label className="text-green-900 font-semibold">Request Title</Label>
              <p className="text-green-800 font-medium mt-1 text-lg">{formData.title}</p>
            </div>
          </CardContent>
        </Card>

        {/* Basic Information */}
        <Card data-testid="review-submit-basic-info-card">
          <CardHeader>
            <CardTitle className="flex items-center gap-2" data-testid="review-submit-basic-info-title">
              <FileText className="w-5 h-5" />
              Basic Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div data-testid="review-submit-basic-info-description">
              <Label className="font-semibold">Description</Label>
              <div className="mt-1 p-3 bg-gray-50 rounded-lg border">
                <FormattedDescription content={formData.description || ''} />
              </div>
            </div>
            {formData.amount && (
              <div className="p-3 bg-blue-50 rounded-lg border border-blue-200" data-testid="review-submit-basic-info-financial">
                <div className="flex items-center gap-2 mb-3">
                  <DollarSign className="w-4 h-4 text-blue-600" />
                  <Label className="font-semibold text-blue-900">Financial Details</Label>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <span className="text-sm text-blue-700">Amount</span>
                    <p className="font-semibold text-blue-900">{formData.amount} {formData.currency}</p>
                  </div>
                  {formData.costCenter && (
                    <div>
                      <span className="text-sm text-blue-700">Cost Center</span>
                      <p className="font-medium text-blue-900">{formData.costCenter}</p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Approval Workflow */}
        <Card className="border-2 border-orange-200 bg-orange-50/50" data-testid="review-submit-approval-card">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-orange-900" data-testid="review-submit-approval-title">
              <Users className="w-5 h-5" />
              Approval Workflow
            </CardTitle>
            <CardDescription className="text-orange-700">
              Sequential approval hierarchy with TAT (Turn Around Time) for each level
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4" data-testid="review-submit-approval-levels">
              {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
                const level = index + 1;
                const isLast = level === (formData.approverCount || 1);
                const approver = formData.approvers[index];
                
                return (
                  <div key={level} className="p-4 bg-white rounded-lg border border-orange-200" data-testid={`review-submit-approval-level-${level}`}>
                    <div className="flex items-center gap-4">
                      <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
                        approver?.email ? 'bg-green-600' : 'bg-gray-400'
                      }`}>
                        <span className="text-white font-semibold">{level}</span>
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="font-semibold text-gray-900">
                            Approver Level {level}
                          </span>
                          {isLast && (
                            <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
                          )}
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <span className="text-sm text-gray-600">Email Address</span>
                            <p className="text-sm font-medium text-gray-900">
                              {approver?.email || 'Not assigned'}
                            </p>
                          </div>
                          <div>
                            <span className="text-sm text-gray-600">TAT (Turn Around Time)</span>
                            <p className="text-sm font-medium text-gray-900">
                              {approver?.tat ? 
                                `${approver.tat} ${approver.tatType === 'days' ? 'day' : 'hour'}${approver.tat !== 1 ? 's' : ''}` 
                                : 'Not set'
                              }
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </CardContent>
        </Card>

        {/* Participants & Access */}
        <Card data-testid="review-submit-participants-card">
          <CardHeader>
            <CardTitle className="flex items-center gap-2" data-testid="review-submit-participants-title">
              <Eye className="w-5 h-5" />
              Participants & Access Control
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {formData.spectators.length > 0 && (
              <div data-testid="review-submit-participants-spectators">
                <Label className="font-semibold text-sm">Spectators ({formData.spectators.length})</Label>
                <div className="flex flex-wrap gap-2 mt-2">
                  {formData.spectators.map((spectator) => (
                    <Badge key={spectator.id} variant="outline" className="text-xs" data-testid={`review-submit-spectator-${spectator.id}`}>
                      {spectator.name} ({spectator.email})
                    </Badge>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Documents */}
        {formData.documents.length > 0 && (
          <Card data-testid="review-submit-documents-card">
            <CardHeader>
              <CardTitle className="flex items-center gap-2" data-testid="review-submit-documents-title">
                <Upload className="w-5 h-5" />
                Documents & Attachments
              </CardTitle>
              <CardDescription>
                {formData.documents.length} document{formData.documents.length !== 1 ? 's' : ''} attached to this request
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3" data-testid="review-submit-documents-list">
                {formData.documents.map((doc, index) => (
                  <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border" data-testid={`review-submit-document-${index}`}>
                    <FileText className="w-5 h-5 text-gray-500 flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm truncate">{doc.name}</p>
                      <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
                        <span>{(doc.size / (1024 * 1024)).toFixed(2)} MB</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

        {/* Final Confirmation */}
        <Card className="border-2 border-blue-200 bg-blue-50/50" data-testid="review-submit-confirmation-card">
          <CardContent className="pt-6">
            <div className="flex items-start gap-4">
              <CheckCircle className="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
              <div className="flex-1">
                <h3 className="font-semibold text-blue-900 mb-2" data-testid="review-submit-confirmation-title">
                  Ready to Submit Request
                </h3>
                <p className="text-sm text-blue-700 mb-4" data-testid="review-submit-confirmation-message">
                  Once submitted, your request will enter the approval workflow and notifications will be sent to all relevant participants.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm" data-testid="review-submit-confirmation-summary">
                  <div>
                    <span className="text-blue-700">Request Type:</span>
                    <p className="font-medium text-blue-900">{selectedTemplate?.name}</p>
                  </div>
                  <div>
                    <span className="text-blue-700">Approval Levels:</span>
                    <p className="font-medium text-blue-900">{formData.approverCount || 1}</p>
                  </div>
                  <div>
                    <span className="text-blue-700">Documents:</span>
                    <p className="font-medium text-blue-900">{formData.documents.length} attached</p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </motion.div>
  );
}

