import React, { useState, useMemo } from 'react';
import { ChefHat, BookOpen, Search, Sparkles, X } from 'lucide-react';
import type { RecipeTemplate } from '../../setup-wizard/data/recipeTemplates';
import { getAllRecipeTemplates, matchIngredientToTemplate } from '../../setup-wizard/data/recipeTemplates';
import type { RecipeCreate, RecipeIngredientCreate, MeasurementUnit } from '../../../../api/types/recipes';

interface RecipeTemplateSelectorProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectTemplate: (recipeData: Partial<RecipeCreate>) => void;
  onStartFromScratch: () => void;
  availableIngredients: Array<{ id: string; name: string }>;
}

export const RecipeTemplateSelector: React.FC<RecipeTemplateSelectorProps> = ({
  isOpen,
  onClose,
  onSelectTemplate,
  onStartFromScratch,
  availableIngredients
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string>('all');

  const allTemplates = useMemo(() => getAllRecipeTemplates(), []);

  // Flatten all templates
  const templates = useMemo(() => {
    const flat: RecipeTemplate[] = [];
    Object.values(allTemplates).forEach(categoryTemplates => {
      flat.push(...categoryTemplates);
    });
    return flat;
  }, [allTemplates]);

  // Filter templates
  const filteredTemplates = useMemo(() => {
    return templates.filter(template => {
      const matchesSearch = template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           template.description.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesCategory = selectedCategory === 'all' ||
                             template.category.toLowerCase() === selectedCategory.toLowerCase();
      return matchesSearch && matchesCategory;
    });
  }, [templates, searchTerm, selectedCategory]);

  const categories = useMemo(() => {
    const cats = new Set(templates.map(t => t.category));
    return ['all', ...Array.from(cats)];
  }, [templates]);

  const handleSelectTemplate = (template: RecipeTemplate) => {
    // Match template ingredients to actual inventory
    const matchedIngredients: RecipeIngredientCreate[] = template.ingredients
      .map((templateIng, index) => {
        const matchedId = matchIngredientToTemplate(templateIng, availableIngredients);
        return {
          ingredient_id: matchedId || '',
          quantity: templateIng.quantity,
          unit: templateIng.unit,
          ingredient_order: index + 1,
          is_optional: false
        };
      });

    // Build recipe data from template
    const recipeData: Partial<RecipeCreate> = {
      name: template.name,
      category: template.category.toLowerCase(),
      description: template.description,
      difficulty_level: template.difficulty,
      yield_quantity: template.yieldQuantity,
      yield_unit: template.yieldUnit,
      prep_time_minutes: template.prepTime || 0,
      cook_time_minutes: template.cookTime || 0,
      total_time_minutes: template.totalTime || 0,
      preparation_notes: template.instructions || '',
      ingredients: matchedIngredients
    };

    onSelectTemplate(recipeData);
    onClose();
  };

  const getDifficultyLabel = (level: number) => {
    const labels = ['', 'Fácil', 'Medio', 'Difícil', 'Muy Difícil', 'Extremo'];
    return labels[level] || '';
  };

  const getDifficultyColor = (level: number) => {
    if (level <= 2) return 'text-green-600 bg-green-50';
    if (level === 3) return 'text-yellow-600 bg-yellow-50';
    return 'text-red-600 bg-red-50';
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative w-full max-w-4xl max-h-[90vh] bg-[var(--bg-primary)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
        {/* Header */}
        <div className="px-6 py-5 border-b border-[var(--border-secondary)] bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-[var(--color-primary)] flex items-center justify-center">
                <BookOpen className="w-5 h-5 text-white" />
              </div>
              <div>
                <h2 className="text-xl font-semibold text-[var(--text-primary)]">
                  Biblioteca de Recetas
                </h2>
                <p className="text-sm text-[var(--text-secondary)]">
                  Comienza con una receta clásica o crea la tuya desde cero
                </p>
              </div>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-[var(--bg-secondary)] rounded-lg transition-colors"
            >
              <X className="w-5 h-5 text-[var(--text-secondary)]" />
            </button>
          </div>
        </div>

        {/* Search and Filter */}
        <div className="px-6 py-4 border-b border-[var(--border-secondary)] space-y-4">
          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Buscar recetas..."
              className="w-full pl-10 pr-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          {/* Category Filter */}
          <div className="flex items-center gap-2 flex-wrap">
            {categories.map(category => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  selectedCategory === category
                    ? 'bg-[var(--color-primary)] text-white'
                    : 'bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]'
                }`}
              >
                {category === 'all' ? 'Todas' : category}
              </button>
            ))}
          </div>
        </div>

        {/* Templates Grid */}
        <div className="flex-1 overflow-y-auto p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            {filteredTemplates.map(template => (
              <div
                key={template.id}
                onClick={() => handleSelectTemplate(template)}
                className="p-5 border border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] hover:shadow-md transition-all cursor-pointer group bg-[var(--bg-primary)]"
              >
                {/* Header */}
                <div className="flex items-start justify-between mb-3">
                  <div className="flex-1">
                    <h3 className="font-semibold text-[var(--text-primary)] group-hover:text-[var(--color-primary)] transition-colors mb-1">
                      {template.name}
                    </h3>
                    <p className="text-sm text-[var(--text-secondary)] line-clamp-2">
                      {template.description}
                    </p>
                  </div>
                  <ChefHat className="w-5 h-5 text-[var(--text-tertiary)] flex-shrink-0 ml-2" />
                </div>

                {/* Details */}
                <div className="flex items-center gap-3 text-xs text-[var(--text-tertiary)] mb-3">
                  <span className="flex items-center gap-1">
                    <span className="font-medium">{template.yieldQuantity}</span>
                    <span>{template.yieldUnit === 'pieces' ? 'piezas' : template.yieldUnit}</span>
                  </span>
                  <span>•</span>
                  <span>{template.totalTime || 60} min</span>
                  <span>•</span>
                  <span className={`px-2 py-0.5 rounded-full ${getDifficultyColor(template.difficulty)}`}>
                    {getDifficultyLabel(template.difficulty)}
                  </span>
                </div>

                {/* Ingredients Count */}
                <div className="flex items-center justify-between pt-3 border-t border-[var(--border-secondary)]">
                  <span className="text-sm text-[var(--text-secondary)]">
                    {template.ingredients.length} ingredientes
                  </span>
                  <span className="text-xs text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity">
                    Click para usar →
                  </span>
                </div>
              </div>
            ))}
          </div>

          {filteredTemplates.length === 0 && (
            <div className="text-center py-12">
              <BookOpen className="w-16 h-16 text-[var(--text-tertiary)] mx-auto mb-4" />
              <p className="text-[var(--text-secondary)]">No se encontraron recetas</p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
              <Sparkles className="w-4 h-4" />
              <span>{filteredTemplates.length} recetas disponibles</span>
            </div>
            <button
              onClick={() => {
                onStartFromScratch();
                onClose();
              }}
              className="px-4 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
            >
              Crear desde cero
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
