import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
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 { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DatePicker } from '@/components/ui/date-picker';
import { SlugField } from '@/components/ui/slug-field';
import { toast } from '@/hooks/use-toast';
import { MapPin, Save, X, Plus } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Combobox } from '@/components/ui/combobox';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useOperators, usePropertyOwners } from '@/hooks/useAutocompleteData';
import { useUserRole } from '@/hooks/useUserRole';

const parkSchema = z.object({
  name: z.string().min(1, 'Park name is required'),
  slug: z.string().min(1, 'Slug is required'), // Auto-generated, validated on submit
  description: z.string().optional(),
  park_type: z.string().min(1, 'Park type is required'),
  status: z.string().min(1, 'Status is required'),
  opening_date: z.string().optional(),
  closing_date: z.string().optional(),
  website_url: z.string().url().optional().or(z.literal('')),
  phone: z.string().optional(),
  email: z.string().email().optional().or(z.literal('')),
  operator_id: z.string().uuid().optional(),
  property_owner_id: z.string().uuid().optional(),
  images: z.object({
    uploaded: z.array(z.object({
      url: z.string(),
      cloudflare_id: z.string().optional(),
      file: z.any().optional(),
      isLocal: z.boolean().optional(),
      caption: z.string().optional(),
    })),
    banner_assignment: z.number().nullable().optional(),
    card_assignment: z.number().nullable().optional(),
  }).optional()
});

type ParkFormData = z.infer<typeof parkSchema>;

interface ParkFormProps {
  onSubmit: (data: ParkFormData & { 
    operator_id?: string;
    property_owner_id?: string;
    _compositeSubmission?: any;
  }) => Promise<void>;
  onCancel?: () => void;
  initialData?: Partial<ParkFormData & { 
    id?: string;
    operator_id?: string;
    property_owner_id?: string;
    banner_image_url?: string;
    card_image_url?: string;
  }>;
  isEditing?: boolean;
}

const parkTypes = [
  'Theme Park',
  'Amusement Park', 
  'Water Park',
  'Family Entertainment Center',
  'Adventure Park',
  'Safari Park',
  'Carnival',
  'Fair'
];

const statusOptions = [
  'Operating',
  'Seasonal',
  'Closed Temporarily', 
  'Closed Permanently',
  'Under Construction',
  'Planned'
];

export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
  const { isModerator } = useUserRole();
  const [submitting, setSubmitting] = useState(false);
  
  // Operator state
  const [selectedOperatorId, setSelectedOperatorId] = useState<string>(initialData?.operator_id || '');
  const [tempNewOperator, setTempNewOperator] = useState<any>(null);
  const [isOperatorModalOpen, setIsOperatorModalOpen] = useState(false);

  // Property Owner state
  const [selectedPropertyOwnerId, setSelectedPropertyOwnerId] = useState<string>(initialData?.property_owner_id || '');
  const [tempNewPropertyOwner, setTempNewPropertyOwner] = useState<any>(null);
  const [isPropertyOwnerModalOpen, setIsPropertyOwnerModalOpen] = useState(false);

  // Fetch data
  const { operators, loading: operatorsLoading } = useOperators();
  const { propertyOwners, loading: ownersLoading } = usePropertyOwners();

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors }
  } = useForm<ParkFormData>({
    resolver: zodResolver(parkSchema),
    defaultValues: {
      name: initialData?.name || '',
      slug: initialData?.slug || '',
      description: initialData?.description || '',
      park_type: initialData?.park_type || '',
      status: initialData?.status || 'Operating',
      opening_date: initialData?.opening_date || '',
      closing_date: initialData?.closing_date || '',
      website_url: initialData?.website_url || '',
      phone: initialData?.phone || '',
      email: initialData?.email || '',
      operator_id: initialData?.operator_id || undefined,
      property_owner_id: initialData?.property_owner_id || undefined,
      images: { uploaded: [] }
    }
  });


  const handleFormSubmit = async (data: ParkFormData) => {
    setSubmitting(true);
    try {
      // Build composite submission if new entities were created
      const submissionContent: any = {
        park: data,
      };
      
      // Add new operator if created
      if (tempNewOperator) {
        submissionContent.new_operator = tempNewOperator;
        submissionContent.park.operator_id = null;
      }
      
      // Add new property owner if created
      if (tempNewPropertyOwner) {
        submissionContent.new_property_owner = tempNewPropertyOwner;
        submissionContent.park.property_owner_id = null;
      }

      await onSubmit({
        ...data,
        operator_id: tempNewOperator ? undefined : (selectedOperatorId || undefined),
        property_owner_id: tempNewPropertyOwner ? undefined : (selectedPropertyOwnerId || undefined),
        _compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
      });
      
      toast({
        title: isEditing ? "Park Updated" : "Park Created",
        description: isEditing 
          ? "The park information has been updated successfully."
          : "The new park has been created successfully."
      });
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to save park information.",
        variant: "destructive"
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MapPin className="w-5 h-5" />
          {isEditing ? 'Edit Park' : 'Create New Park'}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit(handleFormSubmit)} 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">Park Name *</Label>
              <Input
                id="name"
                {...register('name')}
                placeholder="Enter park 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 park..."
              rows={4}
            />
          </div>

          {/* Park Type and Status */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label>Park Type *</Label>
              <Select onValueChange={(value) => setValue('park_type', value)} defaultValue={initialData?.park_type}>
                <SelectTrigger>
                  <SelectValue placeholder="Select park type" />
                </SelectTrigger>
                <SelectContent>
                  {parkTypes.map((type) => (
                    <SelectItem key={type} value={type}>
                      {type}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.park_type && (
                <p className="text-sm text-destructive">{errors.park_type.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label>Status *</Label>
              <Select onValueChange={(value) => setValue('status', value)} defaultValue={initialData?.status || 'Operating'}>
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  {statusOptions.map((status) => (
                    <SelectItem key={status} value={status}>
                      {status}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.status && (
                <p className="text-sm text-destructive">{errors.status.message}</p>
              )}
            </div>
          </div>

          {/* Dates */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label>Opening Date</Label>
              <DatePicker
                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : '')}
                placeholder="Select opening date"
                disableFuture={true}
                fromYear={1800}
              />
            </div>

            <div className="space-y-2">
              <Label>Closing Date (if applicable)</Label>
              <DatePicker
                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : '')}
                placeholder="Select closing date"
                disablePast={false}
                fromYear={1800}
              />
            </div>
          </div>

          {/* Operator & Property Owner Selection */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Operator & Property Owner</h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Operator Column */}
              <div className="space-y-2">
                <Label>Park Operator</Label>
                
                {tempNewOperator ? (
                  <div className="flex items-center gap-2 p-3 border rounded-md bg-blue-50 dark:bg-blue-950">
                    <Badge variant="secondary">New</Badge>
                    <span className="font-medium">{tempNewOperator.name}</span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => setTempNewOperator(null)}
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                ) : (
                  <Combobox
                    options={operators}
                    value={watch('operator_id')}
                    onValueChange={(value) => {
                      setValue('operator_id', value);
                      setSelectedOperatorId(value);
                    }}
                    placeholder="Select operator"
                    searchPlaceholder="Search operators..."
                    emptyText="No operators found"
                    loading={operatorsLoading}
                  />
                )}
                
                {!tempNewOperator && (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={() => setIsOperatorModalOpen(true)}
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Create New Operator
                  </Button>
                )}
              </div>

              {/* Property Owner Column */}
              <div className="space-y-2">
                <Label>Property Owner</Label>
                
                {tempNewPropertyOwner ? (
                  <div className="flex items-center gap-2 p-3 border rounded-md bg-green-50 dark:bg-green-950">
                    <Badge variant="secondary">New</Badge>
                    <span className="font-medium">{tempNewPropertyOwner.name}</span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => setTempNewPropertyOwner(null)}
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                ) : (
                  <Combobox
                    options={propertyOwners}
                    value={watch('property_owner_id')}
                    onValueChange={(value) => {
                      setValue('property_owner_id', value);
                      setSelectedPropertyOwnerId(value);
                    }}
                    placeholder="Select property owner"
                    searchPlaceholder="Search property owners..."
                    emptyText="No property owners found"
                    loading={ownersLoading}
                  />
                )}
                
                {!tempNewPropertyOwner && (
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="w-full"
                    onClick={() => setIsPropertyOwnerModalOpen(true)}
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Create New Property Owner
                  </Button>
                )}
              </div>
            </div>
          </div>

          {/* Contact Information */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-2">
              <Label htmlFor="website_url">Website URL</Label>
              <Input
                id="website_url"
                type="url"
                {...register('website_url')}
                placeholder="https://..."
              />
              {errors.website_url && (
                <p className="text-sm text-destructive">{errors.website_url.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="phone">Phone Number</Label>
              <Input
                id="phone"
                {...register('phone')}
                placeholder="+1 (555) 123-4567"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                {...register('email')}
                placeholder="contact@park.com"
              />
              {errors.email && (
                <p className="text-sm text-destructive">{errors.email.message}</p>
              )}
            </div>
          </div>

          {/* Images */}
          <EntityMultiImageUploader
            mode={isEditing ? 'edit' : 'create'}
            value={watch('images')}
            onChange={(images: ImageAssignments) => setValue('images', images)}
            entityType="park"
            entityId={isEditing ? initialData?.id : undefined}
            currentBannerUrl={initialData?.banner_image_url}
            currentCardUrl={initialData?.card_image_url}
          />

          {/* Form Actions */}
          <div className="flex gap-4 pt-6">
            <Button type="submit" disabled={submitting} className="flex-1">
              <Save className="w-4 h-4 mr-2" />
              {submitting ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
            </Button>
            
            {onCancel && (
              <Button type="button" variant="outline" onClick={onCancel}>
                <X className="w-4 h-4 mr-2" />
                Cancel
              </Button>
            )}
          </div>
        </form>

        {/* Operator Modal - Placeholder */}
        <Dialog open={isOperatorModalOpen} onOpenChange={setIsOperatorModalOpen}>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Create New Operator</DialogTitle>
              <DialogDescription>
                Add a new park operator company
              </DialogDescription>
            </DialogHeader>
            <p className="text-muted-foreground">Operator form coming soon...</p>
          </DialogContent>
        </Dialog>

        {/* Property Owner Modal - Placeholder */}
        <Dialog open={isPropertyOwnerModalOpen} onOpenChange={setIsPropertyOwnerModalOpen}>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Create New Property Owner</DialogTitle>
              <DialogDescription>
                Add a new park property owner company
              </DialogDescription>
            </DialogHeader>
            <p className="text-muted-foreground">Property owner form coming soon...</p>
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  );
}