import { Control, FieldErrors, UseFormSetValue, UseFormWatch } from 'react-hook-form';
import { OrganizationFormData } from '@/types.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import FormField from '@/components/form/FormField.tsx';
import ImageGallery from '@/components/ui/ImageGallery.tsx';
import ImageUpload from '@/components/ui/ImageUpload.tsx';
import { BasicInfoSection } from '@/components/add-organization/steps/BasicInfoSection.tsx';
import { LocationSection } from '@/components/add-organization/steps/LocationSection.tsx';
import { TagsSection } from '@/components/add-organization/steps/TagsSection.tsx';

interface Step1Props {
  control: Control<OrganizationFormData>;
  errors: FieldErrors<OrganizationFormData>;
  watch: UseFormWatch<OrganizationFormData>;
  setValue: UseFormSetValue<OrganizationFormData>;
  generateDescription: (payload: [string, string, string]) => void;
  isGenerating: boolean;
}

const Step1 = ({
  control,
  errors,
  watch,
  setValue,
  generateDescription,
  isGenerating,
}: Step1Props) => {
  const { t } = useTranslation();
  return (
    <div className="space-y-8">
      {/* Basic Information */}
      <BasicInfoSection
        control={control}
        errors={errors}
        watch={watch}
        generateDescription={generateDescription}
        isGenerating={isGenerating}
      />

      {/* Location */}
      <LocationSection control={control} errors={errors} watch={watch} setValue={setValue} />

      {/* Tags and Business Focus */}
      <TagsSection control={control} errors={errors} setValue={setValue} />

      {/* Logo Upload */}
      <div>
        <h3 className="text-lg font-semibold mb-4">{t('organization.logo')}</h3>
        <FormField
          control={control}
          errors={errors}
          name="logoUrl"
          label="Logo"
          component={ImageUpload}
        />
      </div>

      {/* Gallery Images */}
      <div>
        <h3 className="text-lg font-semibold mb-4">{t('organization.galleryImages')}</h3>
        <FormField
          control={control}
          errors={errors}
          name="galleryImages"
          label="Gallery Images"
          component={(props: { value?: string[]; onChange?: (images: string[]) => void }) => (
            <ImageGallery
              images={props.value || []}
              onChange={props.onChange}
              maxImages={10}
              editable={true}
              className="w-full"
            />
          )}
        />
        <p className="text-sm text-muted-foreground mt-2">{t('organization.galleryImagesHint')}</p>
      </div>
    </div>
  );
};

export default Step1;