'use client'

import { motion } from 'motion/react'
import { UseFormReturn } from 'react-hook-form'
import { Calendar, GraduationCap, Heart } from 'lucide-react'
import { WizardStepContent } from '@/components/forms/form-wizard'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import type { ApplicationFormData } from '@/server/routers/application'
import type { WizardConfig } from '@/types/wizard-config'

interface StepAdditionalProps {
  form: UseFormReturn<ApplicationFormData>
  isBusinessConcept: boolean
  isStartup: boolean
  config?: WizardConfig
}

export function StepAdditional({ form, isBusinessConcept, isStartup, config }: StepAdditionalProps) {
  const { register, formState: { errors }, setValue, watch } = form
  const wantsMentorship = watch('wantsMentorship')

  return (
    <WizardStepContent
      title="A few more details"
      description="Help us understand your background and needs."
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="mx-auto max-w-md space-y-8"
      >
        {/* Institution (for Business Concepts) */}
        {isBusinessConcept && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-2"
          >
            <div className="flex items-center gap-2">
              <GraduationCap className="h-5 w-5 text-muted-foreground" />
              <Label htmlFor="institution">
                University/School <span className="text-destructive">*</span>
              </Label>
            </div>
            <Input
              id="institution"
              placeholder="MIT, Stanford, INSEAD..."
              {...register('institution')}
              className="h-12 text-base"
            />
            {errors.institution && (
              <p className="text-sm text-destructive">{errors.institution.message}</p>
            )}
            <p className="text-xs text-muted-foreground">
              Enter the name of your university or educational institution.
            </p>
          </motion.div>
        )}

        {/* Startup Created Date (for Startups) */}
        {isStartup && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-2"
          >
            <div className="flex items-center gap-2">
              <Calendar className="h-5 w-5 text-muted-foreground" />
              <Label htmlFor="startupCreatedDate">
                When was your startup created? <span className="text-destructive">*</span>
              </Label>
            </div>
            <Input
              id="startupCreatedDate"
              type="date"
              {...register('startupCreatedDate')}
              className="h-12 text-base"
            />
            {errors.startupCreatedDate && (
              <p className="text-sm text-destructive">{errors.startupCreatedDate.message}</p>
            )}
            <p className="text-xs text-muted-foreground">
              Enter the date your startup was officially registered or founded.
            </p>
          </motion.div>
        )}

        {/* Mentorship */}
        {config?.features?.enableMentorship !== false && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="rounded-lg border bg-card p-6"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Heart className="h-5 w-5 text-primary" />
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <Label htmlFor="wantsMentorship" className="text-base font-medium">
                    Would you like mentorship support?
                  </Label>
                  <Switch
                    id="wantsMentorship"
                    checked={wantsMentorship}
                    onCheckedChange={(checked) => setValue('wantsMentorship', checked)}
                  />
                </div>
                <p className="mt-2 text-sm text-muted-foreground">
                  Our mentors are industry experts who can help guide your project.
                  This is optional but highly recommended.
                </p>
              </div>
            </div>
          </motion.div>
        )}

        {/* Referral Source */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="space-y-2"
        >
          <Label htmlFor="referralSource">
            How did you hear about us? <span className="text-muted-foreground text-xs">(optional)</span>
          </Label>
          <Input
            id="referralSource"
            placeholder="Friend, Social media, Event..."
            {...register('referralSource')}
            className="h-12 text-base"
          />
        </motion.div>
      </motion.div>
    </WizardStepContent>
  )
}
