import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { SlugField } from '@/components/ui/slug-field';
import { Building2, Save, X } from 'lucide-react';
import { Combobox } from '@/components/ui/combobox';
import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
import { useUserRole } from '@/hooks/useUserRole';
import { EntityImageUploader } from '@/components/upload/EntityImageUploader';

const propertyOwnerSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  slug: z.string().min(1, 'Slug is required'),
  description: z.string().optional(),
  person_type: z.enum(['company', 'individual', 'firm', 'organization']),
  website_url: z.string().url().optional().or(z.literal('')),
  founded_year: z.number().min(1800).max(new Date().getFullYear()).optional(),
  headquarters_location: z.string().optional(),
  logo_url: z.string().optional(),
  banner_image_id: z.string().optional(),
  banner_image_url: z.string().optional(),
  card_image_id: z.string().optional(),
  card_image_url: z.string().optional()
});

type PropertyOwnerFormData = z.infer<typeof propertyOwnerSchema>;

interface PropertyOwnerFormProps {
  onSubmit: (data: PropertyOwnerFormData) => void;
  onCancel: () => void;
  initialData?: Partial<PropertyOwnerFormData>;
}

export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyOwnerFormProps) {
  const { isModerator } = useUserRole();
  const { headquarters } = useCompanyHeadquarters();
  
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors }
  } = useForm<PropertyOwnerFormData>({
    resolver: zodResolver(propertyOwnerSchema),
    defaultValues: {
      name: initialData?.name || '',
      slug: initialData?.slug || '',
      description: initialData?.description || '',
      person_type: initialData?.person_type || 'company',
      website_url: initialData?.website_url || '',
      founded_year: initialData?.founded_year || undefined,
      headquarters_location: initialData?.headquarters_location || '',
      logo_url: initialData?.logo_url || '',
      banner_image_id: initialData?.banner_image_id || '',
      banner_image_url: initialData?.banner_image_url || '',
      card_image_id: initialData?.card_image_id || '',
      card_image_url: initialData?.card_image_url || ''
    }
  });


  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Building2 className="w-5 h-5" />
          {initialData ? 'Edit Property Owner' : 'Create New Property Owner'}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          {/* Basic Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="name">Name *</Label>
              <Input
                id="name"
                {...register('name')}
                placeholder="Enter property owner name"
              />
              {errors.name && (
                <p className="text-sm text-destructive">{errors.name.message}</p>
              )}
            </div>

            <SlugField
              name={watch('name')}
              slug={watch('slug')}
              onSlugChange={(slug) => setValue('slug', slug)}
              isModerator={isModerator()}
            />
          </div>

          {/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              {...register('description')}
              placeholder="Describe the property owner..."
              rows={3}
            />
          </div>

          {/* Person Type */}
          <div className="space-y-2">
            <Label>Entity Type *</Label>
            <RadioGroup
              value={watch('person_type')}
              onValueChange={(value) => setValue('person_type', value as any)}
              className="grid grid-cols-2 md:grid-cols-4 gap-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="company" id="company" />
                <Label htmlFor="company" className="cursor-pointer">Company</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="individual" id="individual" />
                <Label htmlFor="individual" className="cursor-pointer">Individual</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="firm" id="firm" />
                <Label htmlFor="firm" className="cursor-pointer">Firm</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="organization" id="organization" />
                <Label htmlFor="organization" className="cursor-pointer">Organization</Label>
              </div>
            </RadioGroup>
          </div>

          {/* Additional Details */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="founded_year">Founded Year</Label>
              <Input
                id="founded_year"
                type="number"
                min="1800"
                max={new Date().getFullYear()}
                {...register('founded_year', { valueAsNumber: true })}
                placeholder="e.g. 1972"
              />
              {errors.founded_year && (
                <p className="text-sm text-destructive">{errors.founded_year.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="headquarters_location">Headquarters Location</Label>
              <Combobox
                options={headquarters}
                value={watch('headquarters_location')}
                onValueChange={(value) => setValue('headquarters_location', value)}
                placeholder="Select or type location"
                searchPlaceholder="Search locations..."
                emptyText="No locations found"
              />
            </div>
          </div>

          {/* Website */}
          <div className="space-y-2">
            <Label htmlFor="website_url">Website URL</Label>
            <Input
              id="website_url"
              type="url"
              {...register('website_url')}
              placeholder="https://example.com"
            />
            {errors.website_url && (
              <p className="text-sm text-destructive">{errors.website_url.message}</p>
            )}
          </div>

          {/* Images */}
          <EntityImageUploader
            images={{
              logo: { url: watch('logo_url') },
              banner: { url: watch('banner_image_url'), id: watch('banner_image_id') },
              card: { url: watch('card_image_url'), id: watch('card_image_id') }
            }}
            onImagesChange={(images) => {
              if (images.logo_url !== undefined) setValue('logo_url', images.logo_url);
              if (images.banner_image_id !== undefined) setValue('banner_image_id', images.banner_image_id);
              if (images.banner_image_url !== undefined) setValue('banner_image_url', images.banner_image_url);
              if (images.card_image_id !== undefined) setValue('card_image_id', images.card_image_id);
              if (images.card_image_url !== undefined) setValue('card_image_url', images.card_image_url);
            }}
            showLogo={true}
            entityType="property_owner"
          />

          {/* Actions */}
          <div className="flex gap-3 justify-end">
            <Button type="button" variant="outline" onClick={onCancel}>
              <X className="w-4 h-4 mr-2" />
              Cancel
            </Button>
            <Button type="submit">
              <Save className="w-4 h-4 mr-2" />
              Save Property Owner
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}