"use client";

import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import { heroFormSchema } from '@/lib/validators';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from '@/components/ui/form';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

type FormSchemaType = z.infer<typeof heroFormSchema>;

interface IdentitySectionProps {
  form: UseFormReturn<FormSchemaType>;
}

export const IdentitySection = ({ form }: IdentitySectionProps) => {
  return (
    <div className="p-4 border rounded-lg">
      <h3 className="text-lg font-semibold mb-4">Core Identity</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <FormField
          control={form.control}
          name="heroName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Hero Name</FormLabel>
              <FormControl>
                <Input placeholder="e.g., Captain Comet" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="heroGender"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Gender</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a gender" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="Male">Male</SelectItem>
                  <SelectItem value="Female">Female</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="heroColor"
          render={({ field }) => (
            <FormItem className="md:col-span-2">
              <FormLabel>Hero Color</FormLabel>
               <FormControl>
                  <Input type="color" className="p-1 h-10 w-full" {...field} />
              </FormControl>
              <FormDescription>Click to pick a custom color.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <FormField
          control={form.control}
          name="heroDescription"
          render={({ field }) => (
            <FormItem className="md:col-span-2">
              <FormLabel>Hero Description</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="A brief history and description of the hero..."
                  className="min-h-[100px]"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="powerName"
          render={({ field }) => (
            <FormItem className="md:col-span-2">
              <FormLabel>Superpower Name</FormLabel>
              <FormControl>
                <Input placeholder="e.g., Nova Surge" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="powerDescription"
          render={({ field }) => (
            <FormItem className="md:col-span-2">
              <FormLabel>Superpower Description</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Describe what the hero's power does."
                  className="min-h-[100px]"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </div>
    </div>
  );
};