'use client'

import { motion } from 'motion/react'
import { UseFormReturn } from 'react-hook-form'
import {
  User,
  Mail,
  Phone,
  MapPin,
  Briefcase,
  Waves,
  Users,
  GraduationCap,
  Calendar,
  Heart,
  MessageSquare,
  CheckCircle2,
} from 'lucide-react'
import { WizardStepContent } from '@/components/forms/form-wizard'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import type { ApplicationFormData } from '@/server/routers/application'
import { countries } from '@/components/ui/country-select'

const oceanIssueLabels: Record<string, string> = {
  POLLUTION_REDUCTION: 'Reduction of pollution',
  CLIMATE_MITIGATION: 'Climate change mitigation',
  TECHNOLOGY_INNOVATION: 'Technology & innovations',
  SUSTAINABLE_SHIPPING: 'Sustainable shipping & yachting',
  BLUE_CARBON: 'Blue carbon',
  HABITAT_RESTORATION: 'Marine habitat restoration',
  COMMUNITY_CAPACITY: 'Coastal community capacity',
  SUSTAINABLE_FISHING: 'Sustainable fishing & aquaculture',
  CONSUMER_AWARENESS: 'Consumer awareness & education',
  OCEAN_ACIDIFICATION: 'Ocean acidification mitigation',
  OTHER: 'Other',
}

const categoryLabels: Record<string, string> = {
  BUSINESS_CONCEPT: 'Business Concepts',
  STARTUP: 'Start-ups',
}

interface StepReviewProps {
  form: UseFormReturn<ApplicationFormData>
  programName: string
}

export function StepReview({ form, programName }: StepReviewProps) {
  const { formState: { errors }, setValue, watch } = form
  const data = watch()

  const countryName = countries.find((c) => c.code === data.country)?.name || data.country

  return (
    <WizardStepContent
      title="Review your application"
      description="Please review your information before submitting."
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="mx-auto max-w-lg space-y-6"
      >
        {/* Contact Info Section */}
        <div className="rounded-lg border bg-card p-4">
          <h3 className="mb-4 font-semibold flex items-center gap-2">
            <User className="h-4 w-4" />
            Contact Information
          </h3>
          <div className="space-y-3 text-sm">
            <div className="flex items-center gap-2">
              <User className="h-4 w-4 text-muted-foreground" />
              <span>{data.contactName}</span>
            </div>
            <div className="flex items-center gap-2">
              <Mail className="h-4 w-4 text-muted-foreground" />
              <span>{data.contactEmail}</span>
            </div>
            <div className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-muted-foreground" />
              <span>{data.contactPhone}</span>
            </div>
            <div className="flex items-center gap-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <span>{data.city ? `${data.city}, ${countryName}` : countryName}</span>
            </div>
          </div>
        </div>

        {/* Project Info Section */}
        <div className="rounded-lg border bg-card p-4">
          <h3 className="mb-4 font-semibold flex items-center gap-2">
            <Briefcase className="h-4 w-4" />
            Project Details
          </h3>
          <div className="space-y-3 text-sm">
            <div>
              <span className="text-muted-foreground">Project Name:</span>
              <p className="font-medium">{data.projectName}</p>
            </div>
            {data.teamName && (
              <div>
                <span className="text-muted-foreground">Team Name:</span>
                <p className="font-medium">{data.teamName}</p>
              </div>
            )}
            <div className="flex items-center gap-2">
              <Badge variant="secondary">
                {categoryLabels[data.competitionCategory]}
              </Badge>
            </div>
            <div className="flex items-center gap-2">
              <Waves className="h-4 w-4 text-muted-foreground" />
              <span>{oceanIssueLabels[data.oceanIssue]}</span>
            </div>
            <div>
              <span className="text-muted-foreground">Description:</span>
              <p className="mt-1 text-sm text-foreground/80 whitespace-pre-wrap">
                {data.description}
              </p>
            </div>
          </div>
        </div>

        {/* Team Members Section */}
        {data.teamMembers && data.teamMembers.length > 0 && (
          <div className="rounded-lg border bg-card p-4">
            <h3 className="mb-4 font-semibold flex items-center gap-2">
              <Users className="h-4 w-4" />
              Team Members ({data.teamMembers.length})
            </h3>
            <div className="space-y-2">
              {data.teamMembers.map((member, index) => (
                <div key={index} className="flex items-center justify-between text-sm">
                  <div>
                    <span className="font-medium">{member.name}</span>
                    <span className="text-muted-foreground"> - {member.email}</span>
                  </div>
                  <Badge variant="outline" className="text-xs">
                    {member.role === 'MEMBER' ? 'Member' : 'Advisor'}
                  </Badge>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Additional Info Section */}
        <div className="rounded-lg border bg-card p-4">
          <h3 className="mb-4 font-semibold flex items-center gap-2">
            <CheckCircle2 className="h-4 w-4" />
            Additional Information
          </h3>
          <div className="space-y-3 text-sm">
            {data.institution && (
              <div className="flex items-center gap-2">
                <GraduationCap className="h-4 w-4 text-muted-foreground" />
                <span>{data.institution}</span>
              </div>
            )}
            {data.startupCreatedDate && (
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span>Founded: {new Date(data.startupCreatedDate).toLocaleDateString()}</span>
              </div>
            )}
            <div className="flex items-center gap-2">
              <Heart className={`h-4 w-4 ${data.wantsMentorship ? 'text-primary' : 'text-muted-foreground'}`} />
              <span>
                {data.wantsMentorship
                  ? 'Interested in mentorship'
                  : 'Not interested in mentorship'}
              </span>
            </div>
            {data.referralSource && (
              <div className="flex items-center gap-2">
                <MessageSquare className="h-4 w-4 text-muted-foreground" />
                <span>Heard about us via: {data.referralSource}</span>
              </div>
            )}
          </div>
        </div>

        {/* GDPR Consent */}
        <div className="rounded-lg border-2 border-primary/20 bg-primary/5 p-4">
          <div className="flex items-start gap-3">
            <Checkbox
              id="gdprConsent"
              checked={data.gdprConsent}
              onCheckedChange={(checked) => setValue('gdprConsent', checked === true)}
              className="mt-1"
            />
            <div className="flex-1">
              <Label htmlFor="gdprConsent" className="text-sm font-medium">
                I consent to the processing of my personal data <span className="text-destructive">*</span>
              </Label>
              <p className="mt-1 text-xs text-muted-foreground">
                By submitting this application, I agree that {programName} may process my personal
                data in accordance with their privacy policy. My data will be used solely for the
                purpose of evaluating my application and communicating with me about the program.
              </p>
            </div>
          </div>
          {errors.gdprConsent && (
            <p className="mt-2 text-sm text-destructive">{errors.gdprConsent.message}</p>
          )}
        </div>
      </motion.div>
    </WizardStepContent>
  )
}
