/**
 * Edit BOM Page
 * Edit an existing BOM
 */

'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useForm, useFieldArray } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { productionAPI } from '@/lib/api/production';
import { productsAPI } from '@/lib/api/products';
import { Button, Card, CardHeader, CardTitle, CardContent, Input, LoadingPage } from '@/components/ui';
import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
import toast from 'react-hot-toast';

const bomItemSchema = z.object({
  item_type: z.enum(['FABRIC', 'BUTTONS', 'ZIPPER', 'LINING', 'ELASTIC']),
  rm_product_id: z.number().int().positive('Raw material is required'),
  // use_dimensions removed - derived from Product.track_by_dimensions in backend
  quantity_per_unit: z.preprocess(
    (val) => {
      if (val === '' || val === null || val === undefined || (typeof val === 'number' && isNaN(val))) {
        return undefined;
      }
      const num = typeof val === 'string' ? parseFloat(val) : val;
      return isNaN(num) ? undefined : num;
    },
    z.number().positive().optional()
  ), // For special items RM
  required_length: z.preprocess(
    (val) => {
      if (val === '' || val === null || val === undefined || (typeof val === 'number' && isNaN(val))) {
        return undefined;
      }
      const num = typeof val === 'string' ? parseFloat(val) : val;
      return isNaN(num) ? undefined : num;
    },
    z.number().positive().optional()
  ), // For dimension-based RM (Fabric, Lining)
  required_width: z.preprocess(
    (val) => {
      if (val === '' || val === null || val === undefined || (typeof val === 'number' && isNaN(val))) {
        return undefined;
      }
      const num = typeof val === 'string' ? parseFloat(val) : val;
      return isNaN(num) ? undefined : num;
    },
    z.number().positive().optional()
  ), // For dimension-based RM (Fabric, Lining)
  dimension_unit: z.preprocess(
    (val) => {
      // Convert empty string to undefined for optional enum field
      if (val === '' || val === null || val === undefined) {
        return undefined;
      }
      return val;
    },
    z.enum(['inch', 'cm', 'm']).optional()
  ), // For dimension-based RM
});

const bomSchema = z.object({
  // category and type removed - derived from Product in backend
  items: z.array(bomItemSchema).min(1, 'At least one raw material is required'),
});

export default function EditBOMPage() {
  const router = useRouter();
  const params = useParams();
  const bomId = parseInt(params.id);
  const queryClient = useQueryClient();
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Fetch BOM details
  const { data: bom, isLoading, error } = useQuery({
    queryKey: ['bom', bomId],
    queryFn: async () => {
      if (isNaN(bomId)) {
        throw new Error('Invalid BOM ID');
      }
      const response = await productionAPI.getBOM(bomId);
      return response?.data || response;
    },
    enabled: !isNaN(bomId),
  });

  // Fetch Raw Material products
  const { data: rmProductsData } = useQuery({
    queryKey: ['products', 'RM'],
    queryFn: async () => {
      const response = await productsAPI.list({ product_type: 'RM', limit: 100 });
      return response?.data || response;
    },
  });

  const rmProducts = rmProductsData?.products || [];

  const {
    register,
    handleSubmit,
    control,
    reset,
    watch,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(bomSchema),
  });

  const watchedItems = watch('items');

  // Helper function to get product details
  const getProductInfo = (productId) => {
    if (!productId) return null;
    return rmProducts.find(p => p.id === parseInt(productId));
  };

  // Helper function to check if product is dimension-based RM
  const isDimensionBasedRM = (productId) => {
    const product = getProductInfo(productId);
    return product?.product_type === 'RM' && product?.track_by_dimensions === true;
  };

  // Reset form when BOM data is loaded
  useEffect(() => {
    if (bom && bom.items) {
      reset({
        // category and type removed - derived from Product in backend
        items: bom.items.map((item) => {
          const productId = item.rawMaterial?.id || item.rm_product_id || 0;
          const isDimBased = isDimensionBasedRM(productId);
          const itemType = item.item_type || 'FABRIC'; // Default to FABRIC if not set
          
          if (isDimBased) {
            // Dimension-based RM - load dimension fields
            // use_dimensions removed - derived from product in backend
            return {
              item_type: itemType,
              rm_product_id: productId,
              required_length: item.required_length || 0,
              required_width: item.required_width || 0,
              dimension_unit: item.dimension_unit || '',
              // quantity_per_unit not set for dimension-based items
            };
          } else {
            // Special items RM - load quantity
            // use_dimensions removed - derived from product in backend
            return {
              item_type: itemType,
              rm_product_id: productId,
              quantity_per_unit: item.quantity_per_unit || 1,
              // Dimension fields not set for quantity-based items
            };
          }
        }),
      });
    }
  }, [bom, reset, rmProducts]);

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items',
  });

  const updateBOMMutation = useMutation({
    mutationFn: async (data) => {
      // Normalized: category and type removed - backend derives from Product
      // use_dimensions removed - backend derives from Product.track_by_dimensions
      const bomData = {
        items: data.items.map((item) => {
          const productId = parseInt(item.rm_product_id);
          const isDimBased = isDimensionBasedRM(productId);
          const itemType = item.item_type; // FABRIC, BUTTONS, ZIPPER, LINING, ELASTIC
          
          const baseItem = {
            item_type: itemType,
            rm_product_id: productId,
          };

          if (isDimBased) {
            // Dimension-based RM (Fabric, Lining)
            // Backend will derive use_dimensions from product.track_by_dimensions
            return {
              ...baseItem,
              required_length: parseFloat(item.required_length),
              required_width: parseFloat(item.required_width),
              dimension_unit: item.dimension_unit,
              // quantity_per_unit not sent for dimension-based items
            };
          } else {
            // Special items RM (quantity-based) - Buttons, Zipper, Elastic
            // Backend will derive use_dimensions from product.track_by_dimensions
            return {
              ...baseItem,
              quantity_per_unit: parseFloat(item.quantity_per_unit),
              // Dimension fields not sent for quantity-based items
            };
          }
        }),
      };
      return await productionAPI.updateBOM(bomId, bomData);
    },
    onSuccess: () => {
      queryClient.invalidateQueries(['bom', bomId]);
      queryClient.invalidateQueries(['boms']);
      toast.success('BOM updated successfully!');
      router.push(`/production/boms/${bomId}`);
    },
    onError: (error) => {
      const message = error?.response?.data?.message || error.message || 'Failed to update BOM';
      toast.error(message);
    },
  });

  const onSubmit = async (data) => {
    setIsSubmitting(true);
    try {
      await updateBOMMutation.mutateAsync(data);
    } catch (error) {
      // Error handled in mutation
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isLoading) {
    return <LoadingPage message="Loading BOM details..." />;
  }

  if (error) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-950 text-center text-red-600">
        <p>Error: {error.message}</p>
        <Button onClick={() => router.back()} className="mt-4">
          Go Back
        </Button>
      </div>
    );
  }

  if (!bom) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-950 text-center text-gray-600">
        <p>BOM not found.</p>
        <Button onClick={() => router.back()} className="mt-4">
          Go Back
        </Button>
      </div>
    );
  }

  return (
    <div className="p-6 bg-gray-50 dark:bg-gray-950 space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button
          variant="outline"
          onClick={() => router.push(`/production/boms/${bomId}`)}
          className="flex items-center gap-2"
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </Button>
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Edit BOM</h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Update Bill of Materials
            {bom.finishedGoodProduct && (
              <span>
                {'\n'}Product: <strong>{bom.finishedGoodProduct.name}</strong>
              </span>
            )}
          </p>
        </div>
      </div>

      {/* Form */}
      <Card>
        <CardHeader>
          <CardTitle>BOM Items</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            {/* Category and Type Info (Read-only, derived from Product) */}
            {bom.finishedGoodProduct && (
              <div className="grid grid-cols-12 gap-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                <div className="col-span-6">
                  <label className="block text-sm font-medium text-blue-900 dark:text-blue-200 mb-1">
                    Category (from Product)
                  </label>
                  <p className="text-sm text-blue-800 dark:text-blue-300">
                    {(() => {
                      const categories = bom.finishedGoodProduct?.categories || bom.finishedGoodProduct?.productCategories || [];
                      const primaryCategory = categories.find(cat => cat.is_primary === true || cat.is_primary === 1);
                      const categoryToUse = primaryCategory || categories[0];
                      return categoryToUse?.name || categoryToUse?.category?.name || 'N/A';
                    })()}
                  </p>
                </div>
                <div className="col-span-6">
                  <label className="block text-sm font-medium text-blue-900 dark:text-blue-200 mb-1">
                    Type (from Product)
                  </label>
                  <p className="text-sm text-blue-800 dark:text-blue-300">
                    {bom.finishedGoodProduct?.name || 'N/A'}
                  </p>
                </div>
                <p className="col-span-12 mt-2 text-xs text-blue-600 dark:text-blue-400">
                  Note: Category and Type are automatically derived from the product (not stored in BOM)
                </p>
              </div>
            )}

            {/* Raw Materials Section */}
            <div className="border-t pt-6">
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold">Raw Materials</h3>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => append({ item_type: 'FABRIC', rm_product_id: 0 })}
                  className="flex items-center gap-2"
                >
                  <Plus className="w-4 h-4" />
                  Add Raw Material
                </Button>
              </div>

              {fields.map((field, index) => {
                const itemType = watchedItems?.[index]?.item_type || 'FABRIC';
                const isFabricOrLining = itemType === 'FABRIC' || itemType === 'LINING';
                const isDimBased = isFabricOrLining && isDimensionBasedRM(watchedItems?.[index]?.rm_product_id);
                
                return (
                  <div key={field.id} className="grid grid-cols-12 gap-4 mb-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800/50">
                    {/* Item Type */}
                    <div className="col-span-3">
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Item Type <span className="text-red-500">*</span>
                      </label>
                      <select
                        {...register(`items.${index}.item_type`)}
                        className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white dark:border-gray-600 ${
                          errors.items?.[index]?.item_type ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
                        }`}
                        required
                      >
                        <option value="FABRIC">Fabric</option>
                        <option value="BUTTONS">Buttons</option>
                        <option value="ZIPPER">Zipper</option>
                        <option value="LINING">Lining</option>
                        <option value="ELASTIC">Elastic</option>
                      </select>
                      {errors.items?.[index]?.item_type && (
                        <p className="mt-1 text-sm text-red-600">
                          {errors.items[index].item_type.message}
                        </p>
                      )}
                    </div>

                    {/* Raw Material Product */}
                    <div className="col-span-4">
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Raw Material <span className="text-red-500">*</span>
                      </label>
                      <select
                        {...register(`items.${index}.rm_product_id`, { 
                          valueAsNumber: true,
                          onChange: (e) => {
                            const productId = parseInt(e.target.value);
                            const isDim = isDimensionBasedRM(productId);
                            // use_dimensions removed - backend derives from product
                            if (isDim) {
                              // Clear quantity field for dimension-based items
                              setValue(`items.${index}.quantity_per_unit`, undefined);
                            } else {
                              // Clear dimension fields for quantity-based items
                              setValue(`items.${index}.required_length`, undefined);
                              setValue(`items.${index}.required_width`, undefined);
                              setValue(`items.${index}.dimension_unit`, undefined);
                            }
                          }
                        })}
                        className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white dark:border-gray-600 ${
                          errors.items?.[index]?.rm_product_id ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
                        }`}
                        required
                      >
                        <option value="">Select raw material...</option>
                        {rmProducts.map((product) => (
                          <option key={product.id} value={product.id}>
                            {product.name} {product.sku ? `(${product.sku})` : ''}
                          </option>
                        ))}
                      </select>
                      {errors.items?.[index]?.rm_product_id && (
                        <p className="mt-1 text-sm text-red-600">
                          {errors.items[index].rm_product_id.message}
                        </p>
                      )}
                    </div>

                    {/* Conditional fields based on item type and product type */}
                    {isDimBased ? (
                      // Dimension-based RM fields (Fabric, Lining)
                      <div className="col-span-4 space-y-3">
                        <div className="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">
                          Dimension-Based ({itemType})
                        </div>
                        <div className="grid grid-cols-3 gap-3">
                          <div>
                            <Input
                              label="Required Length"
                              type="number"
                              step="0.001"
                              min="0.001"
                              {...register(`items.${index}.required_length`, { valueAsNumber: true })}
                              error={errors.items?.[index]?.required_length?.message}
                              placeholder="0.00"
                              required
                            />
                          </div>
                          <div>
                            <Input
                              label="Required Width"
                              type="number"
                              step="0.001"
                              min="0.001"
                              {...register(`items.${index}.required_width`, { valueAsNumber: true })}
                              error={errors.items?.[index]?.required_width?.message}
                              placeholder="0.00"
                              required
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                              Unit <span className="text-red-500">*</span>
                            </label>
                            <select
                              {...register(`items.${index}.dimension_unit`)}
                              className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-900 dark:text-white dark:border-gray-600 ${
                                errors.items?.[index]?.dimension_unit ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
                              }`}
                              required
                            >
                              <option value="">Select</option>
                              <option value="inch">Inch</option>
                              <option value="cm">cm</option>
                              <option value="m">m</option>
                            </select>
                            {errors.items?.[index]?.dimension_unit && (
                              <p className="mt-1 text-sm text-red-600">{errors.items[index].dimension_unit.message}</p>
                            )}
                          </div>
                        </div>
                        {watchedItems?.[index]?.required_length && watchedItems?.[index]?.required_width && (
                          <p className="text-xs text-gray-500 dark:text-gray-400">
                            Required area: {(parseFloat(watchedItems[index].required_length) * parseFloat(watchedItems[index].required_width)).toFixed(2)} {watchedItems[index].dimension_unit || ''}² per unit
                          </p>
                        )}
                      </div>
                    ) : (
                      // Quantity field for special items RM (Buttons, Zipper, Elastic)
                      <div className="col-span-4">
                        <Input
                          label="Quantity Per Unit"
                          type="number"
                          step="0.001"
                          min="0.001"
                          {...register(`items.${index}.quantity_per_unit`, { valueAsNumber: true })}
                          error={errors.items?.[index]?.quantity_per_unit?.message}
                          required
                          placeholder="1.0"
                        />
                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                          Amount needed per unit of finished good (e.g., 15 buttons, 1 zipper)
                        </p>
                      </div>
                    )}

                    <div className="col-span-1 flex items-end">
                      {fields.length > 1 && (
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => remove(index)}
                          className="text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="flex justify-end gap-4 pt-4 border-t">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push(`/production/boms/${bomId}`)}
                disabled={isSubmitting}
              >
                Cancel
              </Button>
              <Button type="submit" variant="primary" disabled={isSubmitting} loading={isSubmitting}>
                Update BOM
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

