import { useState, useRef } from 'react';
import { Button } from '../../buttons/Button';
import { Select } from '../../reusable/Select';
import { Input } from '../../reusable/Input';
import { Trash2, Pencil } from 'lucide-react';
import type { FormScreenField } from '../../../api/types';

export function SmartGridField({
  label,
  columns,
  value = [],
  onChange,
}: {
  label: string;
  columns: FormScreenField[];
  value: Record<string, unknown>[];
  onChange: (val: Record<string, unknown>[]) => void;
}) {
  const isPotentialMining = label.toLowerCase().includes('potential');
  const formRef = useRef<HTMLDivElement>(null);
  const [newRow, setNewRow] = useState<Record<string, unknown>>({});
  const [editingIdx, setEditingIdx] = useState<number | null>(null);
  const [errors, setErrors] = useState<Record<string, string>>({});


  const visibleColumns = columns.filter(c => {
    const isOrderDetails = label.toLowerCase().includes('order');
    if (isOrderDetails) {
      const n = (c.name || '').toLowerCase();
      const id = (c.id || '').toLowerCase();
      // Show only Category, Name, and Bags
      return n.includes('category') || n.includes('name') || n.includes('bags') || 
             id.includes('category') || id.includes('name') || id.includes('bags');
    }
    return true; 
  });

  const removeRow = (idx: number) => {
    const next = [...value];
    next.splice(idx, 1);
    onChange(next);
  };

  const startEdit = (idx: number) => {
    setEditingIdx(idx);
    setNewRow({ ...value[idx] });
  };

  const updateNewRowField = (fieldId: string, val: unknown) => {
    let row = { ...newRow, [fieldId]: val };
    setErrors(prev => ({ ...prev, [fieldId]: '' }));

    
    const colDef = columns.find(c => c.id === fieldId);

    // If product category changes, clear out the rest of the row's data
    if (colDef && (colDef.id === 'product_category' || colDef.name === 'Product Category' || colDef.mapped_workflow_field === 'product_category')) {
      Object.keys(row).forEach(k => {
        if (k !== fieldId) {
          row[k] = '';
        }
      });
    }

    // Auto-fill dataset keys from _raw
    if (colDef && (colDef.data_type === 'select' || colDef.data_type === 'multiselect')) {
      const option = colDef.properties?.options?.find(o => String(o.value) === String(val));
      if (option && option._raw) {
        const getBaseId = (id: string) => id.replace(/_\d+$/, '');
        for (const key of Object.keys(option._raw)) {
          const targetCol = columns.find(c => c.id === key || c.mapped_workflow_field === key || getBaseId(c.id) === key || c.name.toLowerCase().replace(/\s+/g, '') === key.toLowerCase().replace(/_/g, ''));
          if (targetCol && targetCol.id !== fieldId) {
            row[targetCol.id] = option._raw[key];
          } else if (!targetCol && key !== fieldId) {
            row[key] = option._raw[key];
          }
        }
      }
    }

    // Auto-calculate row_kgs if sku and bags are present
    const getBaseId = (id: string) => id.replace(/_\d+$/, '');
    const getVal = (key: string) => {
      const c = columns.find(c => c.id === key || c.mapped_workflow_field === key || getBaseId(c.id) === key || c.name.toLowerCase().replace(/\s+/g, '') === key.toLowerCase().replace(/_/g, ''));
      return c ? row[c.id] : row[key];
    };
    
    const skuVal = Number(getVal('sku')) || 0;
    const bagsVal = Number(getVal('bags')) || 0;
    
    const rowKgsCol = columns.find(c => c.id === 'row_kgs' || c.mapped_workflow_field === 'row_kgs' || getBaseId(c.id) === 'row_kgs' || getBaseId(c.id) === 'rowkgs');
    if (rowKgsCol) {
      row[rowKgsCol.id] = skuVal * bagsVal;
    } else {
      row['row_kgs'] = skuVal * bagsVal;
    }

    setNewRow(row);
  };

  const submitNewRow = () => {
    const newErrors: Record<string, string> = {};
    const getBaseId = (id: string) => id.replace(/_\d+$/, '');
    const catColId = columns.find(c => c.id === 'product_category' || c.name === 'Product Category' || c.mapped_workflow_field === 'product_category' || getBaseId(c.id) === 'product_category')?.id;
    const isCatSelected = catColId ? !!newRow[catColId] : false;

    const isOrderDetails = label.toLowerCase().includes('order');
    const hasAnyValue = visibleColumns.some(col => newRow[col.id] !== undefined && newRow[col.id] !== null && String(newRow[col.id]).trim() !== '');

    for (const col of visibleColumns) {
      if (isPotentialMining) {
        const isReasonOrRemark = col.id.toLowerCase().includes('reason') || col.name.toLowerCase().includes('reason') || col.id.toLowerCase().includes('remark') || col.name.toLowerCase().includes('remark');
        if (!isReasonOrRemark) continue;
      }

      const isCategory = col.id === 'product_category' || col.name === 'Product Category' || col.mapped_workflow_field === 'product_category' || getBaseId(col.id) === 'product_category';
      const isProductName = col.id === 'product_name' || col.name === 'Product Name' || col.mapped_workflow_field === 'product_name' || getBaseId(col.id) === 'product_name';
      const isBags = col.id === 'bags' || col.name === 'Bags' || col.mapped_workflow_field === 'bags' || getBaseId(col.id) === 'bags' || col.id.toLowerCase().includes('quantity') || col.name.toLowerCase().includes('quantity') || col.mapped_workflow_field?.toLowerCase().includes('quantity');
      
      let isRequired = col.mandatory || (isCatSelected && (isProductName || isBags));
      if (isOrderDetails && (isCategory || isProductName || isBags)) {
          isRequired = true;
      }
      
      if (!hasAnyValue) {
          isRequired = true; // if completely empty, require fields to prevent empty row addition
      }

      if (isRequired && (!newRow[col.id] || String(newRow[col.id]).trim() === '')) {
        newErrors[col.id] = 'This field is required';
      }
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    if (editingIdx !== null) {
      const next = [...value];
      next[editingIdx] = newRow;
      onChange(next);
    } else {
      const getBaseId = (id: string) => id.replace(/_\d+$/, '');
      const prodNameCol = columns.find(c => c.id === 'product_name' || getBaseId(c.id) === 'product_name' || c.mapped_workflow_field === 'product_name');
      
      let foundIdx = -1;
      if (prodNameCol && newRow[prodNameCol.id]) {
        foundIdx = value.findIndex(r => r[prodNameCol.id] === newRow[prodNameCol.id]);
      }

      if (foundIdx !== -1) {
        const next = [...value];
        const existingRow = { ...next[foundIdx] };
        
        const bagsCol = columns.find(c => c.id === 'bags' || getBaseId(c.id) === 'bags' || c.mapped_workflow_field === 'bags' || c.name.toLowerCase() === 'bags');
        const rowKgsCol = columns.find(c => c.id === 'row_kgs' || getBaseId(c.id) === 'row_kgs' || c.mapped_workflow_field === 'row_kgs' || getBaseId(c.id) === 'rowkgs');
        const skuCol = columns.find(c => c.id === 'sku' || getBaseId(c.id) === 'sku' || c.mapped_workflow_field === 'sku');
        
        const bagsId = bagsCol ? bagsCol.id : 'bags';
        const rowKgsId = rowKgsCol ? rowKgsCol.id : 'row_kgs';
        const skuId = skuCol ? skuCol.id : 'sku';
        
        const existingBags = Number(existingRow[bagsId]) || 0;
        const addedBags = Number(newRow[bagsId]) || 0;
        existingRow[bagsId] = existingBags + addedBags;
        
        const skuVal = Number(existingRow[skuId]) || 0;
        existingRow[rowKgsId] = (existingBags + addedBags) * skuVal;
        
        next[foundIdx] = existingRow;
        onChange(next);
      } else {
        onChange([...value, newRow]);
      }
    }
    
    // Only close form if we were editing an existing row. For new rows, stay open.
    if (editingIdx !== null) {
      // Nothing needed here anymore since we removed isModalOpen
    }
    setNewRow({});
    setEditingIdx(null);
  };



  const renderFormFields = () => {
    return visibleColumns.map(col => {
      const val = newRow[col.id];

      const getBaseId = (id: string) => id.replace(/_\d+$/, '');
      
      if (isPotentialMining) {
        const isReasonOrRemark = col.id.toLowerCase().includes('reason') || col.name.toLowerCase().includes('reason') || col.id.toLowerCase().includes('remark') || col.name.toLowerCase().includes('remark');
        if (!isReasonOrRemark) return null;
      }

      const catColId = columns.find(c => c.id === 'product_category' || c.name === 'Product Category' || c.mapped_workflow_field === 'product_category' || getBaseId(c.id) === 'product_category')?.id;
      const isCatSelected = catColId ? !!newRow[catColId] : false;
      const isProductName = col.id === 'product_name' || col.name === 'Product Name' || col.mapped_workflow_field === 'product_name' || getBaseId(col.id) === 'product_name';
      const isBags = col.id === 'bags' || col.name === 'Bags' || col.mapped_workflow_field === 'bags' || getBaseId(col.id) === 'bags' || col.id.toLowerCase().includes('quantity') || col.name.toLowerCase().includes('quantity') || col.mapped_workflow_field?.toLowerCase().includes('quantity');
      const isRequired = col.mandatory || (isCatSelected && (isProductName || isBags));

      if (col.data_type === 'select' || col.data_type === 'multiselect') {
        const allOpts = col.properties?.options || [];
        let filteredOpts = allOpts;
        
        if (col.id === 'product_name' || col.name === 'Product Name' || col.mapped_workflow_field === 'product_name') {
          const catCol = columns.find(c => c.id === 'product_category' || c.name === 'Product Category' || c.mapped_workflow_field === 'product_category');
          if (catCol) {
            const selectedCategory = newRow[catCol.id] as string;
            if (selectedCategory) {
              filteredOpts = allOpts.filter(opt => {
                const labelStr = String(opt.label || opt.value || '');
                return labelStr.startsWith(selectedCategory);
              });
            }
          }
        } else {
          filteredOpts = allOpts.filter(opt => {
            if (!opt._raw) return true;
            for (const [rowKey, rowVal] of Object.entries(newRow)) {
              if (rowKey === col.id || rowVal == null || rowVal === '') continue;
              const rawKey = Object.keys(opt._raw).find(rk => rk === rowKey || rk.replace(/_/g, '') === rowKey.replace(/_/g, ''));
              if (rawKey && String(opt._raw[rawKey]) !== String(rowVal)) {
                return false;
              }
            }
            return true;
          });
        }

        return (
          <Select
            key={col.id}
            label={col.name}
            required={isRequired}
            error={errors[col.id]}
            value={(val as string) ?? ''}
            onChange={(e) => updateNewRowField(col.id, e.target.value)}
            options={[{ value: '', label: 'Select...' }, ...filteredOpts.map((o: any) => ({ value: String(o.value), label: o.label }))]}
          />
        );
      }
      return (
        <Input
          key={col.id}
          label={col.name}
          required={isRequired}
          error={errors[col.id]}
          type={col.data_type === 'number' ? 'number' : col.data_type === 'email' ? 'email' : 'text'}
          value={(val as string) ?? ''}
          onChange={(e) => updateNewRowField(col.id, col.data_type === 'number' ? Number(e.target.value) : e.target.value)}
        />
      );
    });
  };

  return (
    <div className="flex flex-col gap-2 font-sans border border-border-default rounded-md p-4 bg-slate-50">
      <span className="text-sm font-semibold text-strong mb-2">{label}</span>
      
      {value.length === 0 ? (
        <span className="text-sm text-faint italic">No rows added.</span>
      ) : (
        <div className="flex flex-col gap-3">
          {value.map((row, i) => {
            let productName = 'Unknown Product';
            let bags = '0';
            let hasBagsCol = false;
            let diffVal: number | null = null;
            let reasonStr = '';

            visibleColumns.forEach(col => {
              const isName = col.id.toLowerCase().includes('name') || col.name.toLowerCase().includes('name') || (col.id.toLowerCase().includes('category') && productName === 'Unknown Product');
              const isBags = col.id.toLowerCase().includes('bags') || col.name.toLowerCase().includes('bags') || col.id.toLowerCase().includes('quantity');
              const isDiff = col.id.toLowerCase().includes('diff') || col.name.toLowerCase().includes('diff');
              const isReason = col.id.toLowerCase().includes('reason') || col.name.toLowerCase().includes('reason');
              
              const val = row[col.id];
              let displayVal = String(val ?? '-');

              if (col.data_type === 'select' || col.data_type === 'multiselect') {
                const opt = col.properties?.options?.find(o => String(o.value) === String(val));
                if (opt) displayVal = opt.label;
              }

              if (isName && (productName === 'Unknown Product' || col.id.toLowerCase().includes('name'))) {
                productName = displayVal;
              }
              if (isBags) {
                bags = displayVal;
                hasBagsCol = true;
              }
              
              if (isPotentialMining && isDiff && val != null && val !== '') {
                diffVal = Number(val);
              }
              
              if (isPotentialMining && isReason && val && displayVal !== 'Select...' && displayVal !== '-') {
                reasonStr = displayVal;
              }
            });

            const bagsNum = Number(bags) || 0;
            const getBaseId = (id: string) => id.replace(/_\d+$/, '');
            const skuCol = columns.find(c => c.id === 'sku' || c.mapped_workflow_field === 'sku' || getBaseId(c.id) === 'sku');
            const rowKgsCol = columns.find(c => c.id === 'row_kgs' || c.mapped_workflow_field === 'row_kgs' || getBaseId(c.id) === 'row_kgs' || getBaseId(c.id) === 'rowkgs');
            
            const skuVal = skuCol ? Number(row[skuCol.id]) : Number(row['sku'] || 0);
            const rowKgsVal = rowKgsCol ? Number(row[rowKgsCol.id]) : Number(row['row_kgs'] || 0);
            
            let kgsNum = 0;
            if (skuVal > 0 && bagsNum > 0) {
                kgsNum = skuVal * bagsNum;
            } else if (rowKgsVal > 0) {
                kgsNum = rowKgsVal;
            }
            const kgsStr = kgsNum > 0 ? ` (${kgsNum} kg)` : '';

            if (editingIdx === i) {
              return (
                <div key={i} className="bg-white border border-indigo-200 rounded-xl p-4 shadow-sm flex flex-col gap-4">
                  <h4 className="text-sm font-semibold text-strong flex items-center gap-2">
                    <Pencil size={16} className="text-blue-600" /> Edit Row
                  </h4>
                  <div className="flex flex-col min-w-0 gap-1.5 p-3 bg-slate-50 border border-slate-100 rounded-lg mb-2">
                    <span className="font-bold text-slate-800 text-[14px] truncate">{productName}</span>
                    <div className="flex flex-wrap items-center gap-2">
                      {(!isPotentialMining || hasBagsCol) && (
                        <span className="font-extrabold text-indigo-600 text-[13px]">{bags} {isPotentialMining ? 'Kgs' : 'Bags'}{!isPotentialMining ? kgsStr : ''}</span>
                      )}
                      {isPotentialMining && diffVal !== null && !isNaN(diffVal) && diffVal !== 0 && (
                        <span className={`text-[11px] font-bold px-2 py-0.5 rounded-md ${diffVal > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}>
                          {Math.abs(diffVal)} {diffVal > 0 ? 'Surplus' : 'Less'}
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
                    {renderFormFields()}
                  </div>
                  <div className="flex justify-end gap-2 mt-2 pt-3 border-t border-slate-100">
                    <Button type="button" variant="ghost" onClick={() => { setEditingIdx(null); setNewRow({}); }}>
                      Cancel
                    </Button>
                    <Button type="button" variant="primary" onClick={submitNewRow}>
                      Save Item
                    </Button>
                  </div>
                </div>
              );
            }

            return (
              <div key={i} className="bg-slate-50 border border-slate-200 rounded-xl p-3 shadow-sm flex items-center justify-between">
                <div className="flex flex-col min-w-0 pr-4 gap-1.5">
                  <span className="font-bold text-slate-800 text-[14px] truncate">{productName}</span>
                  <div className="flex flex-wrap items-center gap-2">
                    {(!isPotentialMining || hasBagsCol) && (
                      <span className="font-extrabold text-indigo-600 text-[13px]">{bags} {isPotentialMining ? 'Kgs' : 'Bags'}{!isPotentialMining ? kgsStr : ''}</span>
                    )}
                    
                    {isPotentialMining && diffVal !== null && !isNaN(diffVal) && diffVal !== 0 && (
                      <span className={`text-[11px] font-bold px-2 py-0.5 rounded-md ${diffVal > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}>
                        {Math.abs(diffVal)} {diffVal > 0 ? 'Surplus' : 'Less'}
                      </span>
                    )}

                    {isPotentialMining && reasonStr && (
                      <span className="text-[11px] font-medium bg-slate-200 text-slate-700 px-2 py-0.5 rounded-md truncate max-w-[120px]" title={reasonStr}>
                        {reasonStr}
                      </span>
                    )}
                  </div>
                </div>
                
                <div className="flex items-center gap-1.5 shrink-0">
                  <button type="button" onClick={() => startEdit(i)} className="text-indigo-600 bg-white border border-indigo-100 hover:bg-indigo-50 p-1.5 rounded-lg transition-colors flex items-center justify-center shadow-sm" title="Edit">
                    <Pencil size={14} />
                  </button>
                  {!isPotentialMining && (
                    <button type="button" onClick={() => removeRow(i)} className="text-red-600 bg-white border border-red-100 hover:bg-red-50 p-1.5 rounded-lg transition-colors flex items-center justify-center shadow-sm" title="Remove">
                      <Trash2 size={14} />
                    </button>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}



      {!isPotentialMining && (
        <div 
          ref={formRef}
          className={`grid transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out ${
            editingIdx === null ? 'grid-rows-[1fr] opacity-100 mt-4' : 'grid-rows-[0fr] opacity-0 mt-0 hidden'
          }`}
        >
          <div className="overflow-hidden min-h-0">
            <div className="p-4 border border-border-subtle rounded-xl bg-white shadow-sm">
              <h4 className="text-sm font-semibold text-strong mb-4 flex items-center gap-2">
                Add New Item
              </h4>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
                {editingIdx === null && renderFormFields()}
              </div>
              
              <div className="flex justify-end gap-2 sm:col-span-2 md:col-span-3 mt-2">
                <Button type="button" variant="ghost" onClick={() => { setNewRow({}); }}>
                  Cancel
                </Button>
                <Button type="button" variant="primary" onClick={submitNewRow}>
                  + Add to Order
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}