MOPC-Portal/src/components/forms/apply-steps/step-project.tsx

'use client'

import { motion } from 'motion/react'
import { UseFormReturn } from 'react-hook-form'
import { WizardStepContent } from '@/components/forms/form-wizard'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import type { ApplicationFormData } from '@/server/routers/application'
import { type DropdownOption, type WizardConfig, DEFAULT_OCEAN_ISSUES } from '@/types/wizard-config'
import { isFieldVisible, getFieldConfig } from '@/lib/wizard-config'

interface StepProjectProps {
  form: UseFormReturn<ApplicationFormData>
  oceanIssues?: DropdownOption[]
  config?: WizardConfig
}

export function StepProject({ form, oceanIssues, config }: StepProjectProps) {
  const issueOptions = oceanIssues ?? DEFAULT_OCEAN_ISSUES
  const { register, formState: { errors }, setValue, watch } = form
  const oceanIssue = watch('oceanIssue')
  const description = watch('description') || ''
  const showTeamName = !config || isFieldVisible(config, 'teamName')
  const descriptionLabel = config ? getFieldConfig(config, 'description').label : undefined

  return (
    <WizardStepContent
      title="Tell us about your project"
      description="Share the details of your ocean protection initiative."
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="mx-auto max-w-lg space-y-6"
      >
        {/* Project Name */}
        <div className="space-y-2">
          <Label htmlFor="projectName">
            Name of your project/startup <span className="text-destructive">*</span>
          </Label>
          <Input
            id="projectName"
            placeholder="Ocean Guardian AI"
            {...register('projectName')}
            className="h-12 text-base"
          />
          {errors.projectName && (
            <p className="text-sm text-destructive">{errors.projectName.message}</p>
          )}
        </div>

        {/* Team Name (optional) */}
        {showTeamName && (
          <div className="space-y-2">
            <Label htmlFor="teamName">
              Team Name <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            <Input
              id="teamName"
              placeholder="Blue Innovation Team"
              {...register('teamName')}
              className="h-12 text-base"
            />
          </div>
        )}

        {/* Ocean Issue */}
        <div className="space-y-2">
          <Label>
            What type of ocean issue does your project address? <span className="text-destructive">*</span>
          </Label>
          <Select
            value={oceanIssue}
            onValueChange={(value) => setValue('oceanIssue', value)}
          >
            <SelectTrigger className="h-12 text-base">
              <SelectValue placeholder="Select an ocean issue" />
            </SelectTrigger>
            <SelectContent>
              {issueOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.oceanIssue && (
            <p className="text-sm text-destructive">{errors.oceanIssue.message}</p>
          )}
        </div>

        {/* Description */}
        <div className="space-y-2">
          <Label htmlFor="description">
            Briefly describe your project idea and objectives <span className="text-destructive">*</span>
          </Label>
          <p className="text-xs text-muted-foreground">
            Keep it brief - you&apos;ll have the opportunity to provide more details later.
          </p>
          <Textarea
            id="description"
            placeholder="Our project aims to..."
            rows={5}
            maxLength={2000}
            {...register('description')}
            className="text-base resize-none"
          />
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>
              {errors.description ? (
                <span className="text-destructive">{errors.description.message}</span>
              ) : (
                'Minimum 20 characters'
              )}
            </span>
            <span>{description.length} characters</span>
          </div>
        </div>
      </motion.div>
    </WizardStepContent>
  )
}