// ================================================================
// frontend/src/components/dashboard/StockReceiptModal.tsx
// ================================================================
/**
 * Stock Receipt Modal - Lot-Level Tracking
 *
 * Complete workflow for receiving deliveries with lot-level expiration tracking.
 * Critical for food safety compliance.
 *
 * Features:
 * - Multi-line item support (one per ingredient)
 * - Lot splitting (e.g., 50kg → 2×25kg lots with different expiration dates)
 * - Mandatory expiration dates
 * - Quantity validation (lot quantities must sum to actual quantity)
 * - Discrepancy tracking (expected vs actual)
 * - Draft save functionality
 * - Warehouse location tracking
 */

import React, { useState, useEffect } from 'react';
import {
  X,
  Plus,
  Trash2,
  Save,
  CheckCircle,
  AlertTriangle,
  Package,
  Calendar,
  MapPin,
  FileText,
  Truck,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../ui/Button';

// ============================================================
// Types
// ============================================================

export interface StockLot {
  id?: string;
  lot_number?: string;
  supplier_lot_number?: string;
  quantity: number;
  unit_of_measure: string;
  expiration_date: string; // ISO date string (YYYY-MM-DD)
  best_before_date?: string;
  warehouse_location?: string;
  storage_zone?: string;
  quality_notes?: string;
}

export interface StockReceiptLineItem {
  id?: string;
  ingredient_id: string;
  ingredient_name: string;
  po_line_id?: string;
  expected_quantity: number;
  actual_quantity: number;
  unit_of_measure: string;
  has_discrepancy: boolean;
  discrepancy_reason?: string;
  unit_cost?: number;
  total_cost?: number;
  lots: StockLot[];
}

export interface StockReceipt {
  id?: string;
  tenant_id: string;
  po_id: string;
  po_number?: string;
  received_at?: string;
  received_by_user_id: string;
  status?: 'draft' | 'confirmed' | 'cancelled';
  supplier_id?: string;
  supplier_name?: string;
  notes?: string;
  has_discrepancies?: boolean;
  line_items: StockReceiptLineItem[];
}

interface StockReceiptModalProps {
  isOpen: boolean;
  onClose: () => void;
  receipt: Partial<StockReceipt>;
  mode?: 'create' | 'edit';
  onSaveDraft?: (receipt: StockReceipt) => Promise<void>;
  onConfirm?: (receipt: StockReceipt) => Promise<void>;
}

// ============================================================
// Helper Functions
// ============================================================

function calculateLotQuantitySum(lots: StockLot[]): number {
  return lots.reduce((sum, lot) => sum + (lot.quantity || 0), 0);
}

function hasDiscrepancy(expected: number, actual: number): boolean {
  return Math.abs(expected - actual) > 0.01;
}

// ============================================================
// Sub-Components
// ============================================================

interface LotInputProps {
  lot: StockLot;
  lineItemUoM: string;
  onChange: (updatedLot: StockLot) => void;
  onRemove: () => void;
  canRemove: boolean;
}

function LotInput({ lot, lineItemUoM, onChange, onRemove, canRemove }: LotInputProps) {
  const { t } = useTranslation('inventory');

  return (
    <div
      className="p-4 rounded-lg border-2"
      style={{
        backgroundColor: 'var(--bg-secondary)',
        borderColor: 'var(--border-secondary)',
      }}
    >
      {/* Lot Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <Package className="w-4 h-4" style={{ color: 'var(--color-info)' }} />
          <span className="font-semibold text-sm" style={{ color: 'var(--text-primary)' }}>
            {t('lot_details')}
          </span>
        </div>
        {canRemove && (
          <button
            onClick={onRemove}
            className="p-1 rounded hover:bg-red-100 transition-colors"
            style={{ color: 'var(--color-error)' }}
          >
            <Trash2 className="w-4 h-4" />
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Quantity (Required) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            {t('quantity')} ({lineItemUoM}) *
          </label>
          <input
            type="number"
            step="0.01"
            min="0"
            value={lot.quantity || ''}
            onChange={(e) => onChange({ ...lot, quantity: parseFloat(e.target.value) || 0 })}
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
            required
          />
        </div>

        {/* Expiration Date (Required) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            <Calendar className="w-3 h-3 inline mr-1" />
            {t('expiration_date')} *
          </label>
          <input
            type="date"
            value={lot.expiration_date || ''}
            onChange={(e) => onChange({ ...lot, expiration_date: e.target.value })}
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
            required
          />
        </div>

        {/* Lot Number (Optional) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            {t('lot_number')}
          </label>
          <input
            type="text"
            value={lot.lot_number || ''}
            onChange={(e) => onChange({ ...lot, lot_number: e.target.value })}
            placeholder="LOT-2024-001"
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
          />
        </div>

        {/* Supplier Lot Number (Optional) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            {t('supplier_lot_number')}
          </label>
          <input
            type="text"
            value={lot.supplier_lot_number || ''}
            onChange={(e) => onChange({ ...lot, supplier_lot_number: e.target.value })}
            placeholder="SUPP-LOT-123"
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
          />
        </div>

        {/* Warehouse Location (Optional) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            <MapPin className="w-3 h-3 inline mr-1" />
            {t('warehouse_location')}
          </label>
          <input
            type="text"
            value={lot.warehouse_location || ''}
            onChange={(e) => onChange({ ...lot, warehouse_location: e.target.value })}
            placeholder="A-01-03"
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
          />
        </div>

        {/* Storage Zone (Optional) */}
        <div>
          <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
            {t('storage_zone')}
          </label>
          <input
            type="text"
            value={lot.storage_zone || ''}
            onChange={(e) => onChange({ ...lot, storage_zone: e.target.value })}
            placeholder="Cold Storage"
            className="w-full px-3 py-2 rounded-lg border"
            style={{
              backgroundColor: 'var(--bg-primary)',
              borderColor: 'var(--border-primary)',
              color: 'var(--text-primary)',
            }}
          />
        </div>
      </div>

      {/* Quality Notes (Optional, full width) */}
      <div className="mt-3">
        <label className="block text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
          <FileText className="w-3 h-3 inline mr-1" />
          {t('quality_notes')}
        </label>
        <textarea
          value={lot.quality_notes || ''}
          onChange={(e) => onChange({ ...lot, quality_notes: e.target.value })}
          placeholder={t('quality_notes_placeholder')}
          rows={2}
          className="w-full px-3 py-2 rounded-lg border resize-none"
          style={{
            backgroundColor: 'var(--bg-primary)',
            borderColor: 'var(--border-primary)',
            color: 'var(--text-primary)',
          }}
        />
      </div>
    </div>
  );
}

// ============================================================
// Main Component
// ============================================================

export function StockReceiptModal({
  isOpen,
  onClose,
  receipt: initialReceipt,
  mode = 'create',
  onSaveDraft,
  onConfirm,
}: StockReceiptModalProps) {
  const { t } = useTranslation(['inventory', 'common']);
  const [receipt, setReceipt] = useState<Partial<StockReceipt>>(initialReceipt);
  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    setReceipt(initialReceipt);
  }, [initialReceipt]);

  if (!isOpen) return null;

  // ============================================================
  // Handlers
  // ============================================================

  const updateLineItem = (index: number, updates: Partial<StockReceiptLineItem>) => {
    const newLineItems = [...(receipt.line_items || [])];
    newLineItems[index] = { ...newLineItems[index], ...updates };

    // Auto-detect discrepancy
    if (updates.actual_quantity !== undefined || updates.expected_quantity !== undefined) {
      const item = newLineItems[index];
      item.has_discrepancy = hasDiscrepancy(item.expected_quantity, item.actual_quantity);
    }

    setReceipt({ ...receipt, line_items: newLineItems });
  };

  const updateLot = (lineItemIndex: number, lotIndex: number, updatedLot: StockLot) => {
    const newLineItems = [...(receipt.line_items || [])];
    newLineItems[lineItemIndex].lots[lotIndex] = updatedLot;
    setReceipt({ ...receipt, line_items: newLineItems });
  };

  const addLot = (lineItemIndex: number) => {
    const lineItem = receipt.line_items?.[lineItemIndex];
    if (!lineItem) return;

    const newLot: StockLot = {
      quantity: 0,
      unit_of_measure: lineItem.unit_of_measure,
      expiration_date: '',
    };

    const newLineItems = [...(receipt.line_items || [])];
    newLineItems[lineItemIndex].lots.push(newLot);
    setReceipt({ ...receipt, line_items: newLineItems });
  };

  const removeLot = (lineItemIndex: number, lotIndex: number) => {
    const newLineItems = [...(receipt.line_items || [])];
    newLineItems[lineItemIndex].lots.splice(lotIndex, 1);
    setReceipt({ ...receipt, line_items: newLineItems });
  };

  const validate = (): boolean => {
    const errors: Record<string, string> = {};

    if (!receipt.line_items || receipt.line_items.length === 0) {
      errors.general = t('inventory:validation.no_line_items');
      setValidationErrors(errors);
      return false;
    }

    receipt.line_items.forEach((item, idx) => {
      // Check lots exist
      if (!item.lots || item.lots.length === 0) {
        errors[`line_${idx}_lots`] = t('inventory:validation.at_least_one_lot');
      }

      // Check lot quantities sum to actual quantity
      const lotSum = calculateLotQuantitySum(item.lots);
      if (Math.abs(lotSum - item.actual_quantity) > 0.01) {
        errors[`line_${idx}_quantity`] = t('inventory:validation.lot_quantity_mismatch', {
          expected: item.actual_quantity,
          actual: lotSum,
        });
      }

      // Check expiration dates
      item.lots.forEach((lot, lotIdx) => {
        if (!lot.expiration_date) {
          errors[`line_${idx}_lot_${lotIdx}_exp`] = t('inventory:validation.expiration_required');
        }
        if (!lot.quantity || lot.quantity <= 0) {
          errors[`line_${idx}_lot_${lotIdx}_qty`] = t('inventory:validation.quantity_required');
        }
      });
    });

    setValidationErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleSaveDraft = async () => {
    if (!onSaveDraft) return;

    setIsSaving(true);
    try {
      await onSaveDraft(receipt as StockReceipt);
      onClose();
    } catch (error) {
      console.error('Failed to save draft:', error);
      setValidationErrors({ general: t('inventory:errors.save_failed') });
    } finally {
      setIsSaving(false);
    }
  };

  const handleConfirm = async () => {
    if (!validate()) return;
    if (!onConfirm) return;

    setIsSaving(true);
    try {
      await onConfirm(receipt as StockReceipt);
      onClose();
    } catch (error) {
      console.error('Failed to confirm receipt:', error);
      setValidationErrors({ general: t('inventory:errors.confirm_failed') });
    } finally {
      setIsSaving(false);
    }
  };

  // ============================================================
  // Render
  // ============================================================

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
      <div
        className="w-full max-w-5xl max-h-[90vh] overflow-hidden rounded-xl shadow-2xl flex flex-col"
        style={{ backgroundColor: 'var(--bg-primary)' }}
      >
        {/* Header */}
        <div
          className="flex items-center justify-between p-6 border-b"
          style={{ borderColor: 'var(--border-primary)' }}
        >
          <div className="flex items-center gap-3">
            <Truck className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
            <div>
              <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
                {t('inventory:stock_receipt_title')}
              </h2>
              {receipt.po_number && (
                <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
                  {t('inventory:purchase_order')}: {receipt.po_number}
                </p>
              )}
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
            style={{ color: 'var(--text-secondary)' }}
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-6">
          {/* Supplier Info */}
          {receipt.supplier_name && (
            <div
              className="mb-6 p-4 rounded-lg border"
              style={{
                backgroundColor: 'var(--bg-secondary)',
                borderColor: 'var(--border-secondary)',
              }}
            >
              <h3 className="font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
                {t('inventory:supplier_info')}
              </h3>
              <p style={{ color: 'var(--text-secondary)' }}>{receipt.supplier_name}</p>
            </div>
          )}

          {/* Validation Errors */}
          {validationErrors.general && (
            <div
              className="mb-6 p-4 rounded-lg border-2 flex items-start gap-3"
              style={{
                backgroundColor: 'var(--color-error-50)',
                borderColor: 'var(--color-error-300)',
              }}
            >
              <AlertTriangle className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
              <div>
                <p className="font-semibold" style={{ color: 'var(--color-error-900)' }}>
                  {validationErrors.general}
                </p>
              </div>
            </div>
          )}

          {/* Line Items */}
          {receipt.line_items?.map((item, idx) => (
            <div
              key={idx}
              className="mb-6 p-6 rounded-xl border-2"
              style={{
                backgroundColor: 'var(--bg-primary)',
                borderColor: item.has_discrepancy ? 'var(--color-warning-300)' : 'var(--border-primary)',
              }}
            >
              {/* Line Item Header */}
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-lg font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
                    {item.ingredient_name}
                  </h3>
                  <div className="flex items-center gap-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
                    <span>
                      {t('inventory:expected')}: {item.expected_quantity} {item.unit_of_measure}
                    </span>
                    <span>→</span>
                    <span className={item.has_discrepancy ? 'font-semibold' : ''}>
                      {t('inventory:actual')}: {item.actual_quantity} {item.unit_of_measure}
                    </span>
                  </div>
                  {item.has_discrepancy && (
                    <div className="mt-2 flex items-center gap-2">
                      <AlertTriangle className="w-4 h-4" style={{ color: 'var(--color-warning-700)' }} />
                      <span className="text-sm font-semibold" style={{ color: 'var(--color-warning-900)' }}>
                        {t('inventory:discrepancy_detected')}
                      </span>
                    </div>
                  )}
                </div>

                {/* Lot Quantity Summary */}
                <div className="text-right">
                  <div className="text-sm font-medium mb-1" style={{ color: 'var(--text-secondary)' }}>
                    {t('inventory:lot_total')}
                  </div>
                  <div
                    className="text-2xl font-bold"
                    style={{
                      color:
                        Math.abs(calculateLotQuantitySum(item.lots) - item.actual_quantity) < 0.01
                          ? 'var(--color-success)'
                          : 'var(--color-error)',
                    }}
                  >
                    {calculateLotQuantitySum(item.lots).toFixed(2)} {item.unit_of_measure}
                  </div>
                </div>
              </div>

              {/* Discrepancy Reason */}
              {item.has_discrepancy && (
                <div className="mb-4">
                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
                    {t('inventory:discrepancy_reason')}
                  </label>
                  <textarea
                    value={item.discrepancy_reason || ''}
                    onChange={(e) => updateLineItem(idx, { discrepancy_reason: e.target.value })}
                    placeholder={t('inventory:discrepancy_reason_placeholder')}
                    rows={2}
                    className="w-full px-3 py-2 rounded-lg border resize-none"
                    style={{
                      backgroundColor: 'var(--bg-primary)',
                      borderColor: 'var(--border-primary)',
                      color: 'var(--text-primary)',
                    }}
                  />
                </div>
              )}

              {/* Lots */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
                    {t('inventory:lots')} ({item.lots.length})
                  </h4>
                </div>

                {item.lots.map((lot, lotIdx) => (
                  <LotInput
                    key={lotIdx}
                    lot={lot}
                    lineItemUoM={item.unit_of_measure}
                    onChange={(updatedLot) => updateLot(idx, lotIdx, updatedLot)}
                    onRemove={() => removeLot(idx, lotIdx)}
                    canRemove={item.lots.length > 1}
                  />
                ))}

                {/* Add Lot Button */}
                <button
                  onClick={() => addLot(idx)}
                  className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 border-dashed transition-colors hover:border-solid"
                  style={{
                    borderColor: 'var(--border-primary)',
                    color: 'var(--color-primary)',
                    backgroundColor: 'transparent',
                  }}
                >
                  <Plus className="w-4 h-4" />
                  <span className="font-semibold">{t('inventory:add_lot')}</span>
                </button>
              </div>

              {/* Validation Error for this line */}
              {(validationErrors[`line_${idx}_lots`] ||
                validationErrors[`line_${idx}_quantity`]) && (
                <div
                  className="mt-4 p-3 rounded-lg border flex items-start gap-2"
                  style={{
                    backgroundColor: 'var(--color-error-50)',
                    borderColor: 'var(--color-error-300)',
                  }}
                >
                  <AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-error-700)' }} />
                  <p className="text-sm" style={{ color: 'var(--color-error-900)' }}>
                    {validationErrors[`line_${idx}_lots`] ||
                      validationErrors[`line_${idx}_quantity`]}
                  </p>
                </div>
              )}
            </div>
          ))}

          {/* General Notes */}
          <div className="mt-6">
            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>
              {t('inventory:receipt_notes')}
            </label>
            <textarea
              value={receipt.notes || ''}
              onChange={(e) => setReceipt({ ...receipt, notes: e.target.value })}
              placeholder={t('inventory:receipt_notes_placeholder')}
              rows={3}
              className="w-full px-3 py-2 rounded-lg border resize-none"
              style={{
                backgroundColor: 'var(--bg-primary)',
                borderColor: 'var(--border-primary)',
                color: 'var(--text-primary)',
              }}
            />
          </div>
        </div>

        {/* Footer */}
        <div
          className="flex items-center justify-between p-6 border-t"
          style={{ borderColor: 'var(--border-primary)' }}
        >
          <Button variant="ghost" onClick={onClose} disabled={isSaving}>
            {t('common:actions.cancel')}
          </Button>

          <div className="flex items-center gap-3">
            {onSaveDraft && (
              <Button variant="secondary" onClick={handleSaveDraft} disabled={isSaving}>
                <Save className="w-4 h-4 mr-2" />
                {t('common:actions.save_draft')}
              </Button>
            )}

            {onConfirm && (
              <Button variant="default" onClick={handleConfirm} disabled={isSaving}>
                <CheckCircle className="w-4 h-4 mr-2" />
                {t('common:actions.confirm_receipt')}
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}