import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { Calendar } from './ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
import { motion, AnimatePresence } from 'motion/react';
import {
  ArrowLeft,
  ArrowRight,
  Calendar as CalendarIcon,
  Check,
  Receipt,
  Building,
  MapPin,
  Clock,
  CheckCircle,
  Info,
  FileText,
  DollarSign
} from 'lucide-react';
import { format } from 'date-fns';
import { toast } from 'sonner@2.0.3';
import { getAllDealers, getDealerInfo, formatDealerAddress, type DealerInfo } from '../utils/dealerDatabase';

interface ClaimManagementWizardProps {
  onBack?: () => void;
  onSubmit?: (claimData: any) => void;
}

const CLAIM_TYPES = [
  'Marketing Activity',
  'Promotional Event',
  'Dealer Training',
  'Infrastructure Development',
  'Customer Experience Initiative',
  'Service Campaign'
];

// Fetch dealers from database
const DEALERS = getAllDealers();

const STEP_NAMES = [
  'Claim Details',
  'Review & Submit'
];

export function ClaimManagementWizard({ onBack, onSubmit }: ClaimManagementWizardProps) {
  const [currentStep, setCurrentStep] = useState(1);
  
  const [formData, setFormData] = useState({
    activityName: '',
    activityType: '',
    dealerCode: '',
    dealerName: '',
    dealerEmail: '',
    dealerPhone: '',
    dealerAddress: '',
    activityDate: undefined as Date | undefined,
    location: '',
    requestDescription: '',
    periodStartDate: undefined as Date | undefined,
    periodEndDate: undefined as Date | undefined,
    estimatedBudget: ''
  });

  const totalSteps = STEP_NAMES.length;

  const updateFormData = (field: string, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const isStepValid = () => {
    switch (currentStep) {
      case 1:
        return formData.activityName && 
               formData.activityType && 
               formData.dealerCode && 
               formData.dealerName && 
               formData.activityDate && 
               formData.location && 
               formData.requestDescription;
      case 2:
        return true;
      default:
        return false;
    }
  };

  const nextStep = () => {
    if (currentStep < totalSteps && isStepValid()) {
      setCurrentStep(currentStep + 1);
    }
  };

  const prevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleDealerChange = (dealerCode: string) => {
    const dealer = getDealerInfo(dealerCode);
    if (dealer) {
      updateFormData('dealerCode', dealer.code);
      updateFormData('dealerName', dealer.name);
      updateFormData('dealerEmail', dealer.email);
      updateFormData('dealerPhone', dealer.phone);
      updateFormData('dealerAddress', formatDealerAddress(dealer));
    }
  };

  const handleSubmit = () => {
    const claimData = {
      ...formData,
      templateType: 'claim-management',
      submittedAt: new Date().toISOString(),
      status: 'pending',
      currentStep: 'initiator-review',
      workflowSteps: [
        {
          step: 1,
          name: 'Initiator Evaluation',
          status: 'pending',
          approver: 'Current User (Initiator)',
          description: 'Review and confirm all claim details and documents'
        },
        {
          step: 2,
          name: 'IO Confirmation',
          status: 'waiting',
          approver: 'System',
          description: 'Automatic IO generation upon initiator approval'
        },
        {
          step: 3,
          name: 'Department Lead Approval',
          status: 'waiting',
          approver: 'Department Lead',
          description: 'Budget blocking and final approval'
        },
        {
          step: 4,
          name: 'Document Submission',
          status: 'waiting',
          approver: 'Dealer',
          description: 'Dealer submits completion documents'
        },
        {
          step: 5,
          name: 'Document Verification',
          status: 'waiting',
          approver: 'Initiator',
          description: 'Verify completion documents'
        },
        {
          step: 6,
          name: 'E-Invoice Generation',
          status: 'waiting',
          approver: 'System',
          description: 'Auto-generate e-invoice based on approved amount'
        },
        {
          step: 7,
          name: 'Credit Note Issuance',
          status: 'waiting',
          approver: 'Finance',
          description: 'Issue credit note to dealer'
        }
      ]
    };

    toast.success('Claim Request Created', {
      description: 'Your claim management request has been submitted successfully.'
    });

    if (onSubmit) {
      onSubmit(claimData);
    }
  };

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Receipt className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Details</h2>
              <p className="text-gray-600">
                Provide comprehensive information about your claim request
              </p>
            </div>

            <div className="max-w-3xl mx-auto space-y-6">
              {/* Activity Name and Type */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="activityName" className="text-base font-semibold">Activity Name *</Label>
                  <Input
                    id="activityName"
                    placeholder="e.g., Himalayan Adventure Fest 2024"
                    value={formData.activityName}
                    onChange={(e) => updateFormData('activityName', e.target.value)}
                    className="mt-2 h-12"
                  />
                </div>

                <div>
                  <Label htmlFor="activityType" className="text-base font-semibold">Activity Type *</Label>
                  <Select value={formData.activityType} onValueChange={(value) => updateFormData('activityType', value)}>
                    <SelectTrigger className="mt-2 h-12">
                      <SelectValue placeholder="Select activity type" />
                    </SelectTrigger>
                    <SelectContent>
                      {CLAIM_TYPES.map((type) => (
                        <SelectItem key={type} value={type}>{type}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* Dealer Selection */}
              <div>
                <Label htmlFor="dealer" className="text-base font-semibold">Dealer Code / Dealer Name *</Label>
                <Select value={formData.dealerCode} onValueChange={handleDealerChange}>
                  <SelectTrigger className="mt-2 h-12">
                    <SelectValue placeholder="Select dealer">
                      {formData.dealerCode && (
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-sm">{formData.dealerCode}</span>
                          <span className="text-gray-400">•</span>
                          <span>{formData.dealerName}</span>
                        </div>
                      )}
                    </SelectValue>
                  </SelectTrigger>
                  <SelectContent>
                    {DEALERS.map((dealer) => (
                      <SelectItem key={dealer.code} value={dealer.code}>
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-sm font-semibold">{dealer.code}</span>
                          <span className="text-gray-400">•</span>
                          <span>{dealer.name}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {formData.dealerCode && (
                  <p className="text-sm text-gray-600 mt-2">
                    Selected: <span className="font-semibold">{formData.dealerName}</span> ({formData.dealerCode})
                  </p>
                )}
              </div>

              {/* Date and Location */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="text-base font-semibold">Date *</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className="w-full justify-start text-left mt-2 h-12"
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'Select date'}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={formData.activityDate}
                        onSelect={(date) => updateFormData('activityDate', date)}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>

                <div>
                  <Label htmlFor="location" className="text-base font-semibold">Location *</Label>
                  <Input
                    id="location"
                    placeholder="e.g., Mumbai, Maharashtra"
                    value={formData.location}
                    onChange={(e) => updateFormData('location', e.target.value)}
                    className="mt-2 h-12"
                  />
                </div>
              </div>

              {/* Request Detail */}
              <div>
                <Label htmlFor="requestDescription" className="text-base font-semibold">Request in Detail - Brief Requirement *</Label>
                <Textarea
                  id="requestDescription"
                  placeholder="Provide a detailed description of your claim requirement..."
                  value={formData.requestDescription}
                  onChange={(e) => updateFormData('requestDescription', e.target.value)}
                  className="mt-2 min-h-[120px]"
                />
                <p className="text-xs text-gray-500 mt-1">
                  Include key details about the claim, objectives, and expected outcomes
                </p>
              </div>

              {/* Period (Optional) */}
              <div>
                <div className="flex items-center gap-2 mb-3">
                  <Label className="text-base font-semibold">Period (If Any)</Label>
                  <Badge variant="secondary" className="text-xs">Optional</Badge>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label className="text-sm text-gray-600">Start Date</Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className="w-full justify-start text-left mt-2 h-12"
                        >
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Start date'}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={formData.periodStartDate}
                          onSelect={(date) => updateFormData('periodStartDate', date)}
                          initialFocus
                        />
                      </PopoverContent>
                    </Popover>
                  </div>

                  <div>
                    <Label className="text-sm text-gray-600">End Date</Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className="w-full justify-start text-left mt-2 h-12"
                        >
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'End date'}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={formData.periodEndDate}
                          onSelect={(date) => updateFormData('periodEndDate', date)}
                          initialFocus
                        />
                      </PopoverContent>
                    </Popover>
                  </div>
                </div>
                {(formData.periodStartDate || formData.periodEndDate) && (
                  <p className="text-xs text-gray-600 mt-2">
                    {formData.periodStartDate && formData.periodEndDate 
                      ? `Period: ${format(formData.periodStartDate, 'MMM dd, yyyy')} - ${format(formData.periodEndDate, 'MMM dd, yyyy')}`
                      : 'Please select both start and end dates for the period'}
                  </p>
                )}
              </div>
            </div>
          </motion.div>
        );

      case 2:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-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">Review & Submit</h2>
              <p className="text-gray-600">
                Review your claim details before submission
              </p>
            </div>

            <div className="max-w-3xl mx-auto space-y-6">
              {/* Activity Information */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-blue-50 to-indigo-50">
                  <CardTitle className="flex items-center gap-2">
                    <Receipt className="w-5 h-5 text-blue-600" />
                    Activity Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Name</Label>
                      <p className="font-semibold text-gray-900 mt-1">{formData.activityName}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Type</Label>
                      <Badge variant="secondary" className="mt-1">{formData.activityType}</Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Dealer Information */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-green-50 to-emerald-50">
                  <CardTitle className="flex items-center gap-2">
                    <Building className="w-5 h-5 text-green-600" />
                    Dealer Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Code</Label>
                      <p className="font-semibold text-gray-900 mt-1 font-mono">{formData.dealerCode}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Name</Label>
                      <p className="font-semibold text-gray-900 mt-1">{formData.dealerName}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Email</Label>
                      <p className="text-gray-900 mt-1">{formData.dealerEmail}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Phone</Label>
                      <p className="text-gray-900 mt-1">{formData.dealerPhone}</p>
                    </div>
                    {formData.dealerAddress && (
                      <div className="col-span-2">
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Address</Label>
                        <p className="text-gray-900 mt-1">{formData.dealerAddress}</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Date & Location */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-purple-50 to-pink-50">
                  <CardTitle className="flex items-center gap-2">
                    <CalendarIcon className="w-5 h-5 text-purple-600" />
                    Date & Location
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Date</Label>
                      <p className="font-semibold text-gray-900 mt-1">
                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'N/A'}
                      </p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Location</Label>
                      <div className="flex items-center gap-2 mt-1">
                        <MapPin className="w-4 h-4 text-gray-500" />
                        <p className="font-semibold text-gray-900">{formData.location}</p>
                      </div>
                    </div>
                    {formData.estimatedBudget && (
                      <div className="col-span-2">
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Estimated Budget</Label>
                        <p className="text-xl font-bold text-blue-900 mt-1">{formData.estimatedBudget}</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Request Details */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-orange-50 to-amber-50">
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="w-5 h-5 text-orange-600" />
                    Request Details
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div>
                    <Label className="text-xs text-gray-600 uppercase tracking-wider">Brief Requirement</Label>
                    <div className="mt-2 p-4 bg-gray-50 rounded-lg border">
                      <p className="text-gray-900 whitespace-pre-wrap">{formData.requestDescription}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Period (if provided) */}
              {(formData.periodStartDate || formData.periodEndDate) && (
                <Card className="border-2">
                  <CardHeader className="bg-gradient-to-br from-cyan-50 to-blue-50">
                    <CardTitle className="flex items-center gap-2">
                      <Clock className="w-5 h-5 text-cyan-600" />
                      Period
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6 space-y-4">
                    <div className="grid grid-cols-2 gap-6">
                      <div>
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Start Date</Label>
                        <p className="font-semibold text-gray-900 mt-1">
                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Not specified'}
                        </p>
                      </div>
                      <div>
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">End Date</Label>
                        <p className="font-semibold text-gray-900 mt-1">
                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'Not specified'}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Confirmation Message */}
              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
                <div className="flex items-start gap-3">
                  <Info className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="font-semibold text-blue-900 mb-1">Ready to Submit</p>
                    <p className="text-sm text-blue-800">
                      Please review all the information above. Once submitted, your claim request will enter the approval workflow.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="w-full bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-6 overflow-y-auto">
      <div className="max-w-6xl mx-auto pb-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <Button
            variant="ghost"
            onClick={onBack}
            className="mb-3 sm:mb-4 gap-2 text-sm sm:text-base"
          >
            <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4" />
            <span className="hidden sm:inline">Back to Templates</span>
            <span className="sm:hidden">Back</span>
          </Button>
          
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
            <div>
              <Badge variant="secondary" className="mb-2 text-xs">Claim Management Template</Badge>
              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">New Claim Request</h1>
              <p className="text-sm sm:text-base text-gray-600 mt-1">
                Step {currentStep} of {totalSteps}: <span className="hidden sm:inline">{STEP_NAMES[currentStep - 1]}</span>
              </p>
            </div>
          </div>

          {/* Progress Bar */}
          <div className="mt-4 sm:mt-6">
            <Progress value={(currentStep / totalSteps) * 100} className="h-2" />
            <div className="flex justify-between mt-2 px-1">
              {STEP_NAMES.map((name, index) => (
                <span 
                  key={index} 
                  className={`text-xs sm:text-sm ${
                    index + 1 <= currentStep ? 'text-blue-600 font-medium' : 'text-gray-400'
                  }`}
                >
                  {index + 1}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Step Content */}
        <Card className="mb-6 sm:mb-8">
          <CardContent className="p-4 sm:p-6 lg:p-8">
            <AnimatePresence mode="wait">
              {renderStepContent()}
            </AnimatePresence>
          </CardContent>
        </Card>

        {/* Navigation */}
        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 pb-4 sm:pb-0">
          <Button
            variant="outline"
            onClick={prevStep}
            disabled={currentStep === 1}
            className="gap-2 w-full sm:w-auto order-2 sm:order-1"
          >
            <ArrowLeft className="w-4 h-4" />
            Previous
          </Button>

          {currentStep < totalSteps ? (
            <Button
              onClick={nextStep}
              disabled={!isStepValid()}
              className="gap-2 w-full sm:w-auto order-1 sm:order-2"
            >
              Next
              <ArrowRight className="w-4 h-4" />
            </Button>
          ) : (
            <Button
              onClick={handleSubmit}
              disabled={!isStepValid()}
              className="gap-2 bg-green-600 hover:bg-green-700 w-full sm:w-auto order-1 sm:order-2"
            >
              <Check className="w-4 h-4" />
              Submit Claim Request
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}