'use client';

import { useState, useEffect, useCallback, useMemo } from 'react';
import { Plus, Minus, Package, ChevronDown, ChevronUp, Search, X } from 'lucide-react';
import api from '../../lib/api-client';

interface Unit {
  id: number;
  unit_name: string;
  unit_type: string;
  unit_size: string;
  unit_measure: string;
  is_common: number;
  commodity_category: string;
}

interface DeliveryUnit {
  unit_name: string;
  unit_type: string;
  unit_size: number;
  unit_measure: string;
  quantity: number;
  notes?: string;
}

interface Props {
  commodityName: string;
  onUnitsChange: (units: DeliveryUnit[]) => void;
  disabled?: boolean;
  contractUom?: string; // e.g. "100kg Bag"
  contractUomSize?: number; // e.g. 100
  contractUomMeasure?: string; // e.g. "kg"
  filterByType?: string; // e.g. "Bucket" - prioritizes this unit type
  expectedContractQty?: number; // e.g. 50
  onNormalizationChange?: (normalizedQty: number, note: string) => void;
}

/**
 * DeliveryUnitInput - Smart unit breakdown input for deliveries
 * 
 * Features:
 * - Intelligent unit suggestions based on commodity type
 * - Contract-Aware: Auto-fills default contract UOM
 * - Smart Filter: Suggests units matching the contract package type
 * - Smart Normalization: Converts varied inputs to contract standards
 * - Auto-Note Generation: Explains the math for transparency
 */
export function DeliveryUnitInput({ 
  commodityName, 
  onUnitsChange, 
  disabled,
  contractUom,
  contractUomSize,
  contractUomMeasure,
  filterByType,
  expectedContractQty,
  onNormalizationChange
}: Props) {
  const [isExpanded, setIsExpanded] = useState(true); // Default to expanded for visibility
  const [units, setUnits] = useState<DeliveryUnit[]>([]);
  const [suggestions, setSuggestions] = useState<Unit[]>([]);
  const [loading, setLoading] = useState(false);
  const [category, setCategory] = useState<string>('');
  const [baseUnit, setBaseUnit] = useState<string>('kg');
  
  // Initialize with Contract UOM if empty
  useEffect(() => {
    if (units.length === 0 && contractUom && contractUomSize && contractUomMeasure) {
      setUnits([{
        unit_name: contractUom,
        unit_type: 'contract_default',
        unit_size: contractUomSize,
        unit_measure: contractUomMeasure,
        quantity: 0, // User should fill this
      }]);
    }
  }, [contractUom, contractUomSize, contractUomMeasure]); // Only runs when contract props change

  // Smart Normalization & Note Generation
  useEffect(() => {
    if (!contractUomSize || !contractUomMeasure || units.length === 0) return;

    let totalNormalized = 0;
    const notesParts: string[] = [];

    units.forEach(unit => {
      if (unit.quantity <= 0) return;

      let normalizedQty = 0;
      
      // Standardize units to match contract measure
      let unitSizeInContractBase = unit.unit_size;
      
      // Handle conversions (g -> kg, ml -> L)
      if (unit.unit_measure !== contractUomMeasure) {
        if (unit.unit_measure === 'g' && contractUomMeasure === 'kg') unitSizeInContractBase /= 1000;
        else if (unit.unit_measure === 'ml' && contractUomMeasure === 'L') unitSizeInContractBase /= 1000;
        else if (unit.unit_measure === 'kg' && contractUomMeasure === 'g') unitSizeInContractBase *= 1000;
        else if (unit.unit_measure === 'L' && contractUomMeasure === 'ml') unitSizeInContractBase *= 1000;
        // Add more conversions if needed
      }

      normalizedQty = (unit.quantity * unitSizeInContractBase) / contractUomSize;
      totalNormalized += normalizedQty;

      notesParts.push(`${unit.quantity} x ${unit.unit_name} (${unit.unit_size}${unit.unit_measure})`);
    });

    const smartNote = notesParts.length > 0 
      ? `Received: ${notesParts.join(' + ')}. Converted to ${totalNormalized.toFixed(2)} x ${contractUom} (Contract Standard).`
      : '';

    if (onNormalizationChange) {
      onNormalizationChange(totalNormalized, smartNote);
    }
  }, [units, contractUom, contractUomSize, contractUomMeasure, onNormalizationChange]);
  useEffect(() => {
    if (!commodityName) return;
    
    const loadSuggestions = async () => {
      setLoading(true);
      try {
        const response = await api.get('/commodity-units/suggestions', {
          params: { commodity: commodityName, limit: 50 }
        });
        
        if (response.data.success) {
          setSuggestions(response.data.data.units || []);
          setCategory(response.data.data.category || 'generic');
          
          // Set base unit from category
          const categoryBaseUnits: Record<string, string> = {
            grains: 'kg',
            legumes: 'kg',
            roots: 'kg',
            oils: 'L',
            canned: 'pcs',
            dairy: 'pcs',
            beverages: 'pcs',
            sweeteners: 'kg',
            flour: 'kg',
            cereal: 'kg',
            generic: 'pcs',
          };
          setBaseUnit(categoryBaseUnits[response.data.data.category] || 'pcs');
        }
      } catch (err) {
        console.error('Failed to load unit suggestions:', err);
        // Use fallback suggestions
        setSuggestions([]);
      } finally {
        setLoading(false);
      }
    };
    
    loadSuggestions();
  }, [commodityName]);

  // Notify parent when units change
  useEffect(() => {
    onUnitsChange(units);
  }, [units, onUnitsChange]);

  const addUnit = useCallback(() => {
    // Determine the default unit to add
    // Priority: 1. Filter Match, 2. Common, 3. Generic
    
    let defaultUnit = {
      unit_name: '1 unit',
      unit_type: 'unit',
      unit_size: '1',
      unit_measure: baseUnit,
    };

    if (filterByType) {
       // Look for a suggestion matching the filtered type
       const match = suggestions.find(s => 
         s.unit_type.toLowerCase() === filterByType.toLowerCase()
       );
       if (match) {
         defaultUnit = {
           unit_name: match.unit_name,
           unit_type: match.unit_type,
           unit_size: match.unit_size as any,
           unit_measure: match.unit_measure
         };
       } else {
         // Create a synthetic default for the type
         defaultUnit = {
           unit_name: `1 ${filterByType}`,
           unit_type: filterByType.toLowerCase(),
           unit_size: '1',
           unit_measure: baseUnit
         };
       }
    } else {
       const commonUnit = suggestions.find(s => s.is_common === 1);
       if (commonUnit) {
         defaultUnit = {
            unit_name: commonUnit.unit_name,
            unit_type: commonUnit.unit_type,
            unit_size: commonUnit.unit_size as any,
            unit_measure: commonUnit.unit_measure
         };
       }
    }
    
    setUnits(prev => [...prev, {
      unit_name: defaultUnit.unit_name,
      unit_type: defaultUnit.unit_type,
      unit_size: parseFloat(defaultUnit.unit_size),
      unit_measure: defaultUnit.unit_measure,
      quantity: 1,
    }]);
  }, [suggestions, baseUnit, filterByType]);

  const removeUnit = useCallback((index: number) => {
    setUnits(prev => prev.filter((_, i) => i !== index));
  }, []);

  const updateUnit = useCallback((index: number, field: keyof DeliveryUnit, value: any) => {
    setUnits(prev => prev.map((unit, i) => 
      i === index ? { ...unit, [field]: value } : unit
    ));
  }, []);

  const selectSuggestion = useCallback((index: number, suggestion: Unit) => {
    setUnits(prev => prev.map((unit, i) => 
      i === index ? {
        ...unit,
        unit_name: suggestion.unit_name,
        unit_type: suggestion.unit_type,
        unit_size: parseFloat(suggestion.unit_size),
        unit_measure: suggestion.unit_measure,
      } : unit
    ));
  }, []);

  // Calculate total
  const total = useMemo(() => {
    return units.reduce((sum, unit) => {
      let lineTotal = unit.quantity * unit.unit_size;
      
      // Convert g/ml to kg/L
      if (unit.unit_measure === 'g' || unit.unit_measure === 'ml') {
        lineTotal = lineTotal / 1000;
      }
      
      return sum + lineTotal;
    }, 0);
  }, [units]);

  // Get common units for quick selection
  const commonUnits = useMemo(() => 
    suggestions.filter(s => s.is_common === 1).slice(0, 6),
    [suggestions]
  );

  if (!commodityName) return null;

  return (
    <div className="rounded-xl border border-blue-200 bg-blue-50/50">
      {/* Toggle Header */}
      <button
        type="button"
        onClick={() => setIsExpanded(!isExpanded)}
        className="flex w-full items-center justify-between px-4 py-3 text-left"
        disabled={disabled}
      >
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
            <Package className="h-5 w-5" />
          </div>
          <div>
            <span className="block text-base font-bold text-slate-800">
              Delivery Breakdown
            </span>
            <span className="text-xs text-slate-500">How was it packaged?</span>
          </div>
          {units.length > 0 && (
            <span className="ml-2 rounded-full bg-blue-600 px-2.5 py-0.5 text-xs font-bold text-white shadow-sm">
              {units.length} lines
            </span>
          )}
        </div>
        {isExpanded ? (
          <ChevronUp className="h-5 w-5 text-slate-400" />
        ) : (
          <ChevronDown className="h-5 w-5 text-slate-400" />
        )}
      </button>

      {/* Expandable Content */}
      {isExpanded && (
        <div className="border-t border-blue-100 p-4">
          {/* Helper Text */}
          <div className="mb-4 rounded-lg bg-white p-3 shadow-sm border border-slate-100">
             <p className="text-sm font-medium text-slate-700">📦 Record the exact packaging</p>
             <p className="text-xs text-slate-500 mt-1">
               E.g. If you received 10 bags of 50kg Rice, enter <strong>10</strong> as Qty and select <strong>50kg Bag</strong>.
             </p>
          </div>

          {/* Quick Add Buttons */}
          {commonUnits.length > 0 && units.length === 0 && (
            <div className="mb-4">
              <p className="mb-2 text-xs font-medium text-slate-600">Quick add common units:</p>
              <div className="flex flex-wrap gap-2">
                {commonUnits.slice(0, 4).map((suggestion) => (
                  <button
                    key={suggestion.id}
                    type="button"
                    onClick={() => {
                      setUnits([{
                        unit_name: suggestion.unit_name,
                        unit_type: suggestion.unit_type,
                        unit_size: parseFloat(suggestion.unit_size),
                        unit_measure: suggestion.unit_measure,
                        quantity: 1,
                      }]);
                    }}
                    className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100"
                    disabled={disabled}
                  >
                    + {suggestion.unit_name}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Unit Lines */}
          {units.map((unit, index) => (
            <UnitLine
              key={index}
              unit={unit}
              index={index}
              suggestions={suggestions}
              filterByType={filterByType}
              baseUnit={baseUnit}
              onUpdate={updateUnit}
              onRemove={removeUnit}
              onSelectSuggestion={selectSuggestion}
              disabled={disabled}
            />
          ))}

          {/* Add Unit Button */}
          <button
            type="button"
            onClick={addUnit}
            className="mt-3 flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-200 py-2 text-sm font-medium text-slate-500 hover:border-brand hover:text-brand"
            disabled={disabled || loading}
          >
            <Plus className="h-4 w-4" />
            Add Another Unit
          </button>

          {/* Total Summary & Smart Context */}
          {/* Hidden as per user request
          {units.length > 0 && (
            <div className={`mt-4 rounded-lg p-3 ${
              contractUom ? 'bg-blue-50 border border-blue-100' : 'bg-slate-50'
            }`}>
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-slate-600">
                  Total Delivery Volume:
                </span>
                <span className="text-lg font-bold text-brand">
                  {total.toFixed(2)} {baseUnit}
                </span>
              </div>
              
              {contractUom && contractUomSize && (
                <div className="mt-2 text-xs text-slate-600">
                  <div className="flex items-center gap-2 mb-1">
                    <Sparkles size={12} className="text-blue-500" />
                    <span className="font-semibold text-blue-700">Auto-Conversion Active:</span>
                  </div>
                  <p className="pl-5">
                    Your entries equate to approx. 
                    <strong className="mx-1 text-slate-900">
                      {(total / (contractUomMeasure === baseUnit ? contractUomSize : contractUomSize)).toFixed(1)}
                    </strong> 
                    standard contract units ({contractUom}).
                  </p>
                </div>
              )}

              <p className="mt-2 text-xs text-slate-400 border-t border-slate-200/50 pt-2">
                {units.map((u, i) => 
                  `${u.quantity} × ${u.unit_name}${i < units.length - 1 ? ' + ' : ''}`
                ).join('')}
              </p>
            </div>
          )}
          */}
        </div>
      )}
    </div>
  );
}

// Sparkles icon needed for the UI
import { Sparkles } from 'lucide-react';

// Unit Line Component
interface UnitLineProps {
  unit: DeliveryUnit;
  index: number;
  suggestions: Unit[];
  filterByType?: string;
  baseUnit?: string;
  onUpdate: (index: number, field: keyof DeliveryUnit, value: any) => void;
  onRemove: (index: number) => void;
  onSelectSuggestion: (index: number, suggestion: Unit) => void;
  disabled?: boolean;
}

function UnitLine({ unit, index, suggestions, filterByType, baseUnit, onUpdate, onRemove, onSelectSuggestion, disabled }: UnitLineProps) {
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const filteredSuggestions = useMemo(() => {
    let baseList = suggestions;
    
    // If a type is filtered, generate standard variants dynamically if they don't explicitly exist
    // E.g. if filter="Bucket", ensure we have options like 1, 2, 5, 10, 20 L/Kg variations
    let computedList = [...baseList];

    if (filterByType) {
       // Filter DB suggestions to show matching type first
       const exactTypeMatches = baseList.filter(s => s.unit_type.toLowerCase() === filterByType.toLowerCase());
       const others = baseList.filter(s => s.unit_type.toLowerCase() !== filterByType.toLowerCase());
       
       // Dynamic generation of standard sizes for this container
       const standardSizes = [1, 2, 2.5, 4, 4.5, 5, 10, 15, 20, 25, 50];
       const dynamicSuggestions: Unit[] = [];
       
       const typeLabel = filterByType.charAt(0).toUpperCase() + filterByType.slice(1).toLowerCase();
       const measure = baseUnit || 'kg'; // Fallback to category base unit

       standardSizes.forEach(size => {
          // Don't duplicate if already in DB matches
          const exists = exactTypeMatches.some(m => Math.abs(parseFloat(m.unit_size) - size) < 0.1);
          if (!exists) {
            dynamicSuggestions.push({
              id: -1 * size, // temp negative ID
              unit_name: `${size}${measure} ${typeLabel}`,
              unit_type: filterByType.toLowerCase(),
              unit_size: String(size),
              unit_measure: measure,
              is_common: 0,
              commodity_category: 'dynamic'
            });
          }
       });

       computedList = [...exactTypeMatches, ...dynamicSuggestions, ...others];
    }

    if (!searchQuery) return computedList.slice(0, 15);
    const query = searchQuery.toLowerCase();
    
    return computedList.filter(s => 
      s.unit_name.toLowerCase().includes(query) ||
      s.unit_type.toLowerCase().includes(query)
    ).slice(0, 15);
  }, [suggestions, searchQuery, filterByType, baseUnit]);

  const qtyInputId = `qty-input-${index}`;
  const unitInputId = `unit-input-${index}`;

  const formattedTotal = useMemo(() => {
    const total = unit.quantity * unit.unit_size;
    const measure = unit.unit_measure || '';
    
    if (measure.toLowerCase() === 'g' && total >= 1000) {
      return `${(total / 1000).toLocaleString(undefined, {maximumFractionDigits: 2})} kg`;
    }
    if (measure.toLowerCase() === 'ml' && total >= 1000) {
      return `${(total / 1000).toLocaleString(undefined, {maximumFractionDigits: 2})} L`;
    }
    
    return `${total.toLocaleString(undefined, {maximumFractionDigits: 1})} ${measure}`;
  }, [unit.quantity, unit.unit_size, unit.unit_measure]);

  return (
    <div className="mb-3 rounded-lg border border-slate-200 bg-slate-50 p-3">
      <div className="flex items-start gap-2">
        {/* Quantity Input */}
        <div className="w-20">
          <label htmlFor={qtyInputId} className="mb-1 block text-xs font-medium text-slate-500">Qty</label>
          <input
            id={qtyInputId}
            type="number"
            min="1"
            value={unit.quantity}
            onChange={(e) => onUpdate(index, 'quantity', parseInt(e.target.value) || 1)}
            className="w-full rounded-lg border border-slate-200 px-2 py-1.5 text-sm focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand/20"
            disabled={disabled}
            aria-label="Quantity"
          />
        </div>

        {/* Unit Selector */}
        <div className="relative flex-1">
          <label htmlFor={unitInputId} className="mb-1 block text-xs font-medium text-slate-500">Unit Type</label>
          <div className="relative">
            <input
              id={unitInputId}
              type="text"
              value={showSuggestions ? searchQuery : unit.unit_name}
              onChange={(e) => setSearchQuery(e.target.value)}
              onFocus={() => {
                setShowSuggestions(true);
                setSearchQuery('');
              }}
              onBlur={() => {
                setTimeout(() => setShowSuggestions(false), 200);
              }}
              placeholder="Search units..."
              className="w-full rounded-lg border border-slate-200 px-2 py-1.5 pr-8 text-sm focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand/20"
              disabled={disabled}
              aria-label="Unit Type"
            />
            <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" aria-hidden="true" />
          </div>
          
          {/* Suggestions Dropdown */}
          {showSuggestions && (
            <div className="absolute left-0 right-0 top-full z-10 mt-1 max-h-48 overflow-y-auto rounded-lg border border-slate-200 bg-white shadow-lg">
              {filteredSuggestions.length === 0 ? (
                <p className="p-2 text-xs text-slate-500">No units found</p>
              ) : (
                filteredSuggestions.map((suggestion) => (
                  <button
                    key={suggestion.id}
                    type="button"
                    onClick={() => {
                      onSelectSuggestion(index, suggestion);
                      setShowSuggestions(false);
                      setSearchQuery('');
                    }}
                    className="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-slate-50"
                  >
                    <span className="font-medium text-slate-700">
                      {suggestion.unit_name}
                    </span>
                    <span className="text-xs text-slate-400">
                      {suggestion.unit_size} {suggestion.unit_measure}
                    </span>
                  </button>
                ))
              )}
            </div>
          )}
        </div>

        {/* Line Total Display - Hidden as per user request */}
        {/* <div className="w-24 text-right">
          <span className="mb-1 block text-xs font-medium text-slate-500">Line Total</span>
          <p className="py-1.5 text-sm font-semibold text-slate-700">
            {formattedTotal}
          </p>
        </div> */}

        {/* Remove Button */}
        <button
          type="button"
          onClick={() => onRemove(index)}
          className="mt-5 rounded p-1 text-slate-400 hover:bg-red-50 hover:text-red-500"
          disabled={disabled}
          aria-label="Remove unit"
          title="Remove this unit"
        >
          <X className="h-4 w-4" aria-hidden="true" />
        </button>
      </div>
    </div>
  );
}

export type { DeliveryUnit };