import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import type { RideModelTechnicalSpec } from '@/types/database';
import { getErrorMessage } from '@/lib/errorHandler';
import { handleError } from '@/lib/errorHandler';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { SlugField } from '@/components/ui/slug-field';
import { Layers, Save, X } from 'lucide-react';
import { useUserRole } from '@/hooks/useUserRole';
import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
import { TechnicalSpecsEditor } from './editors/TechnicalSpecsEditor';
import { TechnicalSpecification } from '@/types/company';

const rideModelSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  slug: z.string().min(1, 'Slug is required'),
  category: z.string().min(1, 'Category is required'),
  ride_type: z.string().min(1, 'Ride type is required'),
  description: z.string().optional(),
  source_url: z.string().url().optional().or(z.literal('')),
  submission_notes: z.string().max(1000).optional().or(z.literal('')),
  images: z.object({
    uploaded: z.array(z.object({
      url: z.string(),
      cloudflare_id: z.string().optional(),
      file: z.instanceof(File).optional(),
      isLocal: z.boolean().optional(),
      caption: z.string().optional()
    })),
    banner_assignment: z.number().nullable().optional(),
    card_assignment: z.number().nullable().optional()
  }).optional()
});

type RideModelFormData = z.infer<typeof rideModelSchema>;

interface RideModelFormProps {
  manufacturerName: string;
  manufacturerId?: string;
  onSubmit: (data: RideModelFormData & { manufacturer_id?: string; _technical_specifications?: TechnicalSpecification[] }) => void;
  onCancel: () => void;
  initialData?: Partial<RideModelFormData & {
    id?: string;
    banner_image_url?: string;
    card_image_url?: string;
  }>;
}

const categories = [
  'roller_coaster',
  'flat_ride',
  'water_ride',
  'dark_ride',
  'kiddie_ride',
  'transportation'
];

export function RideModelForm({ 
  manufacturerName, 
  manufacturerId, 
  onSubmit, 
  onCancel, 
  initialData 
}: RideModelFormProps) {
  const { isModerator } = useUserRole();
  const [technicalSpecs, setTechnicalSpecs] = useState<{
    spec_name: string;
    spec_value: string;
    spec_type: 'string' | 'number' | 'boolean' | 'date';
    category?: string;
    unit?: string;
    display_order: number;
  }[]>([]);
  
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors }
  } = useForm<RideModelFormData>({
    resolver: zodResolver(rideModelSchema),
    defaultValues: {
      name: initialData?.name || '',
      slug: initialData?.slug || '',
      category: initialData?.category || '',
      ride_type: initialData?.ride_type || '',
      description: initialData?.description || '',
      source_url: initialData?.source_url || '',
      submission_notes: initialData?.submission_notes || '',
      images: initialData?.images || { uploaded: [] }
    }
  });


  const handleFormSubmit = (data: RideModelFormData) => {    
    try {
      // Include relational technical specs with extended type
      onSubmit({
        ...data,
        manufacturer_id: manufacturerId,
        _technical_specifications: technicalSpecs
      });
    } catch (error: unknown) {
      handleError(error, {
        action: initialData?.id ? 'Update Ride Model' : 'Create Ride Model'
      });
      
      // Re-throw so parent can handle modal closing
      throw error;
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Layers className="w-5 h-5" />
          {initialData ? 'Edit Ride Model' : 'Create New Ride Model'}
        </CardTitle>
        <div className="flex items-center gap-2 mt-2">
          <span className="text-sm text-muted-foreground">For manufacturer:</span>
          <Badge variant="secondary">{manufacturerName}</Badge>
        </div>
      </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">Model Name *</Label>
              <Input
                id="name"
                {...register('name')}
                placeholder="e.g. Mega Coaster, Sky Screamer"
              />
              {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>

          {/* Category and Type */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label>Category *</Label>
              <Select 
                onValueChange={(value) => setValue('category', value)} 
                defaultValue={initialData?.category}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              {errors.category && (
                <p className="text-sm text-destructive">{errors.category.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="ride_type">Ride Type *</Label>
              <Input
                id="ride_type"
                {...register('ride_type')}
                placeholder="e.g. Inverted, Wing Coaster, Pendulum"
              />
              {errors.ride_type && (
                <p className="text-sm text-destructive">{errors.ride_type.message}</p>
              )}
            </div>
          </div>

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

          {/* Technical Specs */}
          <div className="border-t pt-6">
            <TechnicalSpecsEditor
              specs={technicalSpecs}
              onChange={setTechnicalSpecs}
              commonSpecs={[
                'Typical Track Length',
                'Typical Height',
                'Typical Speed',
                'Standard Train Configuration',
                'Typical Capacity',
                'Typical Duration'
              ]}
            />
            <p className="text-xs text-muted-foreground mt-2">
              General specifications for this model that apply to all installations
            </p>
          </div>

          {/* Submission Context - For Reviewers */}
          <div className="space-y-4 border-t pt-6">
            <div className="flex items-center gap-2 mb-4">
              <Badge variant="secondary" className="text-xs">
                For Moderator Review
              </Badge>
              <p className="text-xs text-muted-foreground">
                Help reviewers verify your submission
              </p>
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="source_url" className="flex items-center gap-2">
                Source URL
                <span className="text-xs text-muted-foreground font-normal">
                  (Optional)
                </span>
              </Label>
              <Input
                id="source_url"
                type="url"
                {...register('source_url')}
                placeholder="https://example.com/article"
              />
              <p className="text-xs text-muted-foreground">
                Where did you find this information? (e.g., official website, news article, press release)
              </p>
              {errors.source_url && (
                <p className="text-sm text-destructive">{errors.source_url.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="submission_notes" className="flex items-center gap-2">
                Notes for Reviewers
                <span className="text-xs text-muted-foreground font-normal">
                  (Optional)
                </span>
              </Label>
              <Textarea
                id="submission_notes"
                {...register('submission_notes')}
                placeholder="Add any context to help moderators verify this information (e.g., 'Confirmed via manufacturer catalog', 'Model specifications approximate')"
                rows={3}
                maxLength={1000}
              />
              <p className="text-xs text-muted-foreground">
                {watch('submission_notes')?.length || 0}/1000 characters
              </p>
              {errors.submission_notes && (
                <p className="text-sm text-destructive">{errors.submission_notes.message}</p>
              )}
            </div>
          </div>

          {/* Images */}
          <EntityMultiImageUploader
            mode={initialData ? 'edit' : 'create'}
            value={watch('images') || { uploaded: [] }}
            onChange={(images) => setValue('images', images)}
            entityType="ride_model"
            entityId={initialData?.id}
            currentBannerUrl={initialData?.banner_image_url}
            currentCardUrl={initialData?.card_image_url}
          />

          {/* 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 Model
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}