// frontend/src/components/recipes/IngredientList.tsx
import React from 'react';
import {
  Plus,
  Minus,
  Edit2,
  Trash2,
  GripVertical,
  Info,
  AlertCircle,
  Package,
  Droplets,
  Scale,
  Euro
} from 'lucide-react';

import { RecipeIngredient } from '../../api/services/recipes.service';

interface IngredientListProps {
  ingredients: RecipeIngredient[];
  editable?: boolean;
  showCosts?: boolean;
  showGroups?: boolean;
  batchMultiplier?: number;
  onAddIngredient?: () => void;
  onEditIngredient?: (ingredient: RecipeIngredient) => void;
  onRemoveIngredient?: (ingredientId: string) => void;
  onReorderIngredients?: (ingredients: RecipeIngredient[]) => void;
  className?: string;
}

const IngredientList: React.FC<IngredientListProps> = ({
  ingredients,
  editable = false,
  showCosts = false,
  showGroups = true,
  batchMultiplier = 1,
  onAddIngredient,
  onEditIngredient,
  onRemoveIngredient,
  onReorderIngredients,
  className = ''
}) => {
  // Group ingredients by ingredient_group
  const groupedIngredients = React.useMemo(() => {
    if (!showGroups) {
      return { 'All Ingredients': ingredients };
    }

    const groups: Record<string, RecipeIngredient[]> = {};
    
    ingredients.forEach(ingredient => {
      const group = ingredient.ingredient_group || 'Other';
      if (!groups[group]) {
        groups[group] = [];
      }
      groups[group].push(ingredient);
    });

    // Sort ingredients within each group by order
    Object.keys(groups).forEach(group => {
      groups[group].sort((a, b) => a.ingredient_order - b.ingredient_order);
    });

    return groups;
  }, [ingredients, showGroups]);

  // Get unit icon
  const getUnitIcon = (unit: string) => {
    switch (unit.toLowerCase()) {
      case 'g':
      case 'kg':
        return <Scale className="w-4 h-4" />;
      case 'ml':
      case 'l':
        return <Droplets className="w-4 h-4" />;
      case 'units':
      case 'pieces':
      case 'pcs':
        return <Package className="w-4 h-4" />;
      default:
        return <Scale className="w-4 h-4" />;
    }
  };

  // Format quantity with multiplier
  const formatQuantity = (quantity: number, unit: string) => {
    const adjustedQuantity = quantity * batchMultiplier;
    return `${adjustedQuantity} ${unit}`;
  };

  // Calculate total cost
  const getTotalCost = () => {
    return ingredients.reduce((total, ingredient) => {
      const cost = ingredient.total_cost || 0;
      return total + (cost * batchMultiplier);
    }, 0);
  };

  return (
    <div className={`bg-white rounded-lg border ${className}`}>
      {/* Header */}
      <div className="p-4 border-b bg-gray-50 rounded-t-lg">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Ingredients</h3>
            <p className="text-sm text-gray-600">
              {ingredients.length} ingredient{ingredients.length !== 1 ? 's' : ''}
              {batchMultiplier !== 1 && (
                <span className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
                  ×{batchMultiplier} batch
                </span>
              )}
            </p>
          </div>
          
          <div className="flex items-center space-x-2">
            {showCosts && (
              <div className="text-right">
                <div className="text-sm text-gray-600">Total Cost</div>
                <div className="text-lg font-semibold text-gray-900 flex items-center">
                  <Euro className="w-4 h-4 mr-1" />
                  {getTotalCost().toFixed(2)}
                </div>
              </div>
            )}
            
            {editable && onAddIngredient && (
              <button
                onClick={onAddIngredient}
                className="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2"
              >
                <Plus className="w-4 h-4" />
                <span>Add Ingredient</span>
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Ingredients List */}
      <div className="divide-y">
        {Object.entries(groupedIngredients).map(([groupName, groupIngredients]) => (
          <div key={groupName}>
            {/* Group Header */}
            {showGroups && Object.keys(groupedIngredients).length > 1 && (
              <div className="px-4 py-2 bg-gray-25 border-b">
                <h4 className="text-sm font-medium text-gray-700 uppercase tracking-wide">
                  {groupName}
                </h4>
              </div>
            )}

            {/* Group Ingredients */}
            {groupIngredients.map((ingredient, index) => (
              <div
                key={ingredient.id}
                className="p-4 hover:bg-gray-50 transition-colors"
              >
                <div className="flex items-center space-x-4">
                  {/* Drag Handle */}
                  {editable && onReorderIngredients && (
                    <div className="cursor-move text-gray-400 hover:text-gray-600">
                      <GripVertical className="w-4 h-4" />
                    </div>
                  )}

                  {/* Order Number */}
                  <div className="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center text-xs font-medium text-gray-600">
                    {ingredient.ingredient_order}
                  </div>

                  {/* Ingredient Info */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center space-x-2 mb-1">
                      <h4 className="font-medium text-gray-900">
                        {ingredient.ingredient_id} {/* This would be ingredient name from inventory */}
                      </h4>
                      
                      {ingredient.is_optional && (
                        <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">
                          Optional
                        </span>
                      )}
                    </div>

                    {/* Quantity */}
                    <div className="flex items-center space-x-2 text-sm text-gray-600">
                      {getUnitIcon(ingredient.unit)}
                      <span className="font-medium">
                        {formatQuantity(ingredient.quantity, ingredient.unit)}
                      </span>
                      
                      {ingredient.alternative_quantity && ingredient.alternative_unit && (
                        <span className="text-gray-500">
                          (≈ {formatQuantity(ingredient.alternative_quantity, ingredient.alternative_unit)})
                        </span>
                      )}
                    </div>

                    {/* Preparation Method */}
                    {ingredient.preparation_method && (
                      <div className="text-sm text-gray-600 mt-1">
                        <span className="font-medium">Prep:</span> {ingredient.preparation_method}
                      </div>
                    )}

                    {/* Notes */}
                    {ingredient.ingredient_notes && (
                      <div className="text-sm text-gray-600 mt-1 flex items-start">
                        <Info className="w-3 h-3 mr-1 mt-0.5 flex-shrink-0" />
                        <span>{ingredient.ingredient_notes}</span>
                      </div>
                    )}

                    {/* Substitutions */}
                    {ingredient.substitution_options && (
                      <div className="text-sm text-blue-600 mt-1">
                        <span className="font-medium">Substitutions available</span>
                      </div>
                    )}
                  </div>

                  {/* Cost */}
                  {showCosts && (
                    <div className="text-right">
                      <div className="text-sm font-medium text-gray-900">
                        €{((ingredient.total_cost || 0) * batchMultiplier).toFixed(2)}
                      </div>
                      {ingredient.unit_cost && (
                        <div className="text-xs text-gray-600">
                          €{ingredient.unit_cost.toFixed(2)}/{ingredient.unit}
                        </div>
                      )}
                      {ingredient.cost_updated_at && (
                        <div className="text-xs text-gray-500">
                          {new Date(ingredient.cost_updated_at).toLocaleDateString()}
                        </div>
                      )}
                    </div>
                  )}

                  {/* Actions */}
                  {editable && (
                    <div className="flex items-center space-x-2">
                      <button
                        onClick={() => onEditIngredient?.(ingredient)}
                        className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
                        title="Edit ingredient"
                      >
                        <Edit2 className="w-4 h-4" />
                      </button>
                      
                      <button
                        onClick={() => onRemoveIngredient?.(ingredient.id)}
                        className="p-1 text-gray-400 hover:text-red-600 transition-colors"
                        title="Remove ingredient"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        ))}

        {/* Empty State */}
        {ingredients.length === 0 && (
          <div className="p-8 text-center">
            <Package className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">No ingredients yet</h3>
            <p className="text-gray-600 mb-4">
              Add ingredients to start building your recipe
            </p>
            {editable && onAddIngredient && (
              <button
                onClick={onAddIngredient}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Add First Ingredient
              </button>
            )}
          </div>
        )}
      </div>

      {/* Summary */}
      {ingredients.length > 0 && (
        <div className="p-4 bg-gray-50 border-t rounded-b-lg">
          <div className="flex items-center justify-between text-sm">
            <div className="flex items-center space-x-4">
              <span className="text-gray-600">
                {ingredients.length} total ingredients
              </span>
              
              {ingredients.filter(i => i.is_optional).length > 0 && (
                <span className="text-yellow-600">
                  {ingredients.filter(i => i.is_optional).length} optional
                </span>
              )}
              
              {ingredients.some(i => i.substitution_options) && (
                <span className="text-blue-600">
                  {ingredients.filter(i => i.substitution_options).length} with substitutions
                </span>
              )}
            </div>

            {showCosts && (
              <div className="font-medium text-gray-900">
                Total: €{getTotalCost().toFixed(2)}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default IngredientList;