import React, { useState, useEffect } from 'react';
import Swal from 'sweetalert2';
import { useStore } from '../context/StoreContext';
import { X, Calendar, AlertTriangle, ArrowUpRight, Check, Package, AlertCircle } from 'lucide-react';
import { SearchableSelect } from './SearchableSelect';
import { requiredRule, minValueRule, validateForm, isInvalid } from '../rules';

interface Props {
  isOpen: boolean;
  onClose: () => void;
  defaultProductId?: string;
  defaultVariantId?: string;
}

export const OutboundModal: React.FC<Props> = ({ isOpen, onClose, defaultProductId, defaultVariantId }) => {
  const { db, addOutboundRecord } = useStore();

  const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
  const [selectedProductId, setSelectedProductId] = useState<string>('');
  const [selectedVariantId, setSelectedVariantId] = useState<string>('');
  const [quantity, setQuantity] = useState<number>(1);
  const [reason, setReason] = useState<'Kedaluwarsa / Expired' | 'Barang Rusak' | 'Penyesuaian Stok' | 'Lainnya'>('Kedaluwarsa / Expired');
  const [notes, setNotes] = useState<string>('');
  const [errors, setErrors] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});

  const products = db.products || [];
  const selectedProduct = products.find(p => p.id === selectedProductId);
  const selectedVariant = selectedProduct?.variants.find(v => v.id === selectedVariantId);

  useEffect(() => {
    if (isOpen) {
      setDate(new Date().toISOString().slice(0, 10));
      setQuantity(1);
      setReason('Kedaluwarsa / Expired');
      setNotes('');
      setErrors(null);

      if (defaultProductId) {
        setSelectedProductId(defaultProductId);
        if (defaultVariantId) {
          setSelectedVariantId(defaultVariantId);
        } else {
          const prod = products.find(p => p.id === defaultProductId);
          if (prod && prod.variants.length > 0) {
            setSelectedVariantId(prod.variants[0].id);
          }
        }
      } else if (products.length > 0) {
        setSelectedProductId(products[0].id);
        if (products[0].variants.length > 0) {
          setSelectedVariantId(products[0].variants[0].id);
        }
      }
    }
  }, [isOpen, defaultProductId, defaultVariantId]);

  if (!isOpen) return null;

  // Build options for product select
  const productOptions = products.map(p => ({
    value: p.id,
    label: `${p.name} (${p.category})`
  }));

  // Build options for variant select
  const variantOptions = (selectedProduct?.variants || []).map(v => ({
    value: v.id,
    label: `${v.variantName} (Stok: ${v.stock} ${v.unit || 'Pcs'}) - Barcode: ${v.barcode}`
  }));

  const handleProductChange = (prodId: string) => {
    setSelectedProductId(prodId);
    const prod = products.find(p => p.id === prodId);
    if (prod && prod.variants.length > 0) {
      setSelectedVariantId(prod.variants[0].id);
    } else {
      setSelectedVariantId('');
    }
  };

  const buyPrice = selectedVariant?.buyPrice || 0;
  const totalLossCost = quantity * buyPrice;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors(null);

    const { isValid, errors: formErrs } = validateForm(
      {
        date,
        selectedProductId,
        selectedVariantId,
        quantity
      },
      {
        date: [requiredRule('Tanggal keluar wajib diisi!')],
        selectedProductId: [requiredRule('Pilih barang terlebih dahulu!')],
        selectedVariantId: [requiredRule('Pilih varian barang terlebih dahulu!')],
        quantity: [requiredRule('Jumlah barang keluar wajib diisi!'), minValueRule(1, 'Jumlah minimal 1!')]
      }
    );

    if (!isValid) {
      setFieldErrors(formErrs as Record<string, string>);
      setErrors('Harap perbaiki data yang belum lengkap di bawah ini!');
      return;
    }

    if (!selectedProduct || !selectedVariant) {
      const msg = 'Pilih barang & varian terlebih dahulu!';
      setErrors(msg);
      return;
    }

    setFieldErrors({});

    if (quantity > selectedVariant.stock) {
      const res = await Swal.fire({
        title: 'Stok Kurang',
        text: `Jumlah barang keluar (${quantity}) melebihi stok yang ada (${selectedVariant.stock}). Tetap lanjutkan?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d97706',
        cancelButtonColor: '#64748b',
        confirmButtonText: 'Lanjutkan',
        cancelButtonText: 'Batal'
      });
      if (!res.isConfirmed) return;
    }

    addOutboundRecord({
      date,
      productId: selectedProduct.id,
      productName: selectedProduct.name,
      variantId: selectedVariant.id,
      variantName: selectedVariant.variantName,
      quantity,
      unit: selectedVariant.unit,
      buyPrice,
      totalLossCost,
      reason,
      notes
    });

    Swal.fire({
      icon: 'success',
      title: 'Barang Keluar Dicatat!',
      text: `Pencatatan ${quantity} ${selectedVariant.unit} ${selectedProduct.name} (${reason}) berhasil disimpan.`,
      timer: 1800,
      showConfirmButton: false
    });

    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm p-3 overflow-y-auto">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg border border-slate-100 my-auto flex flex-col overflow-hidden">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-amber-600 to-rose-700 text-white p-4 flex items-center justify-between shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="p-2 bg-white/20 rounded-xl">
              <ArrowUpRight className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="font-bold text-base sm:text-lg">Catat Barang Keluar / Expired</h3>
              <p className="text-amber-100 text-xs">Pencatatan produk kedaluwarsa, rusak, atau penyesuaian stok</p>
            </div>
          </div>
          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-white/20 text-white transition">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Form Body */}
        <form onSubmit={handleSubmit} noValidate className="p-4 sm:p-5 space-y-4 overflow-y-auto">

          {errors && (
            <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl flex items-center gap-2 text-rose-800 text-xs">
              <AlertTriangle className="w-4 h-4 text-rose-600 shrink-0" />
              <span>{errors}</span>
            </div>
          )}

          {/* Date Picker */}
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-1 flex items-center gap-1.5">
              <Calendar className="w-3.5 h-3.5 text-slate-500" /> Tanggal Kejadian / Keluar
            </label>
            <input
              type="date"
              value={date}
              onChange={(e) => {
                setDate(e.target.value);
                if (fieldErrors.date) setFieldErrors(prev => ({ ...prev, date: '' }));
              }}
              className={`w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold focus:ring-2 focus:ring-amber-500 focus:bg-white ${isInvalid(fieldErrors.date)}`}
            />
            {fieldErrors.date && (
              <span className="invalid-feedback">
                <AlertCircle className="w-3 h-3" /> {fieldErrors.date}
              </span>
            )}
          </div>

          {/* Select Product */}
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-1">
              Pilih Barang <span className="text-rose-500">*</span>
            </label>
            <SearchableSelect
              options={productOptions}
              value={selectedProductId}
              onChange={(val) => {
                handleProductChange(val);
                if (fieldErrors.selectedProductId) setFieldErrors(prev => ({ ...prev, selectedProductId: '' }));
              }}
              placeholder="Cari Barang..."
              searchPlaceholder="Ketik nama barang..."
              className={isInvalid(fieldErrors.selectedProductId)}
            />
            {fieldErrors.selectedProductId && (
              <span className="invalid-feedback">
                <AlertCircle className="w-3 h-3" /> {fieldErrors.selectedProductId}
              </span>
            )}
          </div>

          {/* Select Variant */}
          {selectedProduct && (
            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1">
                Pilih Varian & Ukuran <span className="text-rose-500">*</span>
              </label>
              <SearchableSelect
                options={variantOptions}
                value={selectedVariantId}
                onChange={(val) => {
                  setSelectedVariantId(val);
                  if (fieldErrors.selectedVariantId) setFieldErrors(prev => ({ ...prev, selectedVariantId: '' }));
                }}
                placeholder="Pilih Varian..."
                searchPlaceholder="Cari varian..."
                className={isInvalid(fieldErrors.selectedVariantId)}
              />
              {fieldErrors.selectedVariantId && (
                <span className="invalid-feedback">
                  <AlertCircle className="w-3 h-3" /> {fieldErrors.selectedVariantId}
                </span>
              )}
            </div>
          )}

          {/* Current Stock Banner */}
          {selectedVariant && (
            <div className="p-3 bg-slate-100 rounded-xl border border-slate-200 text-xs flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Package className="w-4 h-4 text-slate-600" />
                <span className="font-semibold text-slate-700">Stok Tersedia Saat Ini:</span>
              </div>
              <span className={`font-extrabold px-2.5 py-0.5 rounded-full ${
                selectedVariant.stock <= selectedVariant.minStock
                  ? 'bg-rose-100 text-rose-800'
                  : 'bg-emerald-100 text-emerald-800'
              }`}>
                {selectedVariant.stock} {selectedVariant.unit}
              </span>
            </div>
          )}

          {/* Reason & Quantity */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1">
                Alasan Keluar <span className="text-rose-500">*</span>
              </label>
              <select
                value={reason}
                onChange={(e) => setReason(e.target.value as any)}
                className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-800 focus:ring-2 focus:ring-amber-500"
              >
                <option value="Kedaluwarsa / Expired">⚠️ Kedaluwarsa / Expired</option>
                <option value="Barang Rusak">💔 Barang Rusak / Pecah</option>
                <option value="Penyesuaian Stok">📉 Penyesuaian Stok / Loss</option>
                <option value="Lainnya">📦 Penggunaan / Lainnya</option>
              </select>
            </div>

            <div>
              <label className="block text-xs font-bold text-slate-700 mb-1">
                Jumlah Barang Out <span className="text-rose-500">*</span>
              </label>
              <div className="flex items-center gap-1.5">
                <input
                  type="number"
                  min="1"
                  value={quantity}
                  onChange={(e) => {
                    setQuantity(Math.max(1, Number(e.target.value)));
                    if (fieldErrors.quantity) setFieldErrors(prev => ({ ...prev, quantity: '' }));
                  }}
                  className={`w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-extrabold text-slate-900 focus:ring-2 focus:ring-amber-500 focus:bg-white ${isInvalid(fieldErrors.quantity)}`}
                />
                <span className="text-xs font-bold text-slate-600 shrink-0">
                  {selectedVariant?.unit || 'Pcs'}
                </span>
              </div>
              {fieldErrors.quantity && (
                <span className="invalid-feedback">
                  <AlertCircle className="w-3 h-3" /> {fieldErrors.quantity}
                </span>
              )}
            </div>
          </div>

          {/* Loss Value Info Box */}
          <div className="bg-amber-50 border border-amber-200/90 rounded-xl p-3 space-y-1">
            <div className="text-[11px] font-bold text-amber-900 flex items-center justify-between">
              <span>Estimasi Nilai Kerugian (Harga Modal):</span>
              <span className="text-xs font-extrabold text-rose-700">
                Rp {totalLossCost.toLocaleString('id-ID')}
              </span>
            </div>
            <p className="text-[10px] text-amber-800/80">
              Dihitung berdasarkan modal per unit @Rp {buyPrice.toLocaleString('id-ID')} x {quantity} {selectedVariant?.unit || 'Pcs'}. Stok barang akan berkurang secara otomatis.
            </p>
          </div>

          {/* Notes */}
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-1">
              Catatan / Detail (Opsional)
            </label>
            <input
              type="text"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Contoh: Expired tanggal 05/08/2026, botol bocor..."
              className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-amber-500 focus:bg-white"
            />
          </div>

          {/* Footer Actions */}
          <div className="pt-3 border-t border-slate-200 flex items-center justify-end gap-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-xs rounded-xl transition"
            >
              Batal
            </button>
            <button
              type="submit"
              className="px-5 py-2 bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs rounded-xl shadow-md transition flex items-center gap-1.5"
            >
              <Check className="w-4 h-4" /> Simpan Barang Keluar
            </button>
          </div>

        </form>

      </div>
    </div>
  );
};