Craze-Data-check/src/components/PricingView.tsx

import React, { useState, useMemo, useRef, useCallback } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import {
  AlertTriangle,
  AlertCircle,
  CheckCircle2,
  DollarSign,
  Package,
  Save,
  X,
  ChevronDown,
  Edit2,
} from 'lucide-react';
import { cn } from '../lib/utils';

interface PricingViewProps {
  data: ExcelRow[];
  headers: string[];
  onSaveRow: (index: number, updatedRow: ExcelRow) => void;
  onCaptureState: (message: string) => void;
  onEdit: (index: number) => void;
}

interface DetectedCol {
  index: number;
  name: string;
}

type FilterMode = 'all' | 'all_errors' | 'pricing_errors' | 'units_errors';

interface EditingCell {
  rowIndex: number;
  colIndex: number;
  value: string;
}

// Flexible multi-keyword column finder
function findCol(headers: string[], ...keywords: string[]): number {
  return headers.findIndex(h =>
    keywords.every(kw => (h || '').toLowerCase().includes(kw.toLowerCase()))
  );
}

export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit }: PricingViewProps) {
  const [filterMode, setFilterMode] = useState<FilterMode>('all_errors');
  const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
  const [savingCell, setSavingCell] = useState<{ rowIndex: number; colIndex: number } | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // ── Dynamic column detection ──────────────────────────────────────────────
  const { uvpIdx, srpCols, containerCols } = useMemo(() => {
    const uvpIdx = findCol(headers, 'uvp');

    // All SRP columns, sorted: INT first, UK second, then alphabetically
    const srp: DetectedCol[] = headers
      .map((h, i) => ({ index: i, name: h || '' }))
      .filter(({ name }) => /srp/i.test(name))
      .sort((a, b) => {
        const order = (n: string) => {
          if (/int/i.test(n)) return 0;
          if (/uk/i.test(n)) return 1;
          return 2;
        };
        return order(a.name) - order(b.name);
      });

    // All 40' container columns (HC, HQ, etc.)
    const container: DetectedCol[] = headers
      .map((h, i) => ({ index: i, name: h || '' }))
      .filter(({ name }) => /40/i.test(name) && /h[cq]/i.test(name));

    return { uvpIdx, srpCols: srp, containerCols: container };
  }, [headers]);

  // ── Error analysis per row ────────────────────────────────────────────────
  const analyzedRows = useMemo(() => {
    return data.map((row, dataIndex) => {
      const pricingErrors: string[] = [];
      const unitErrors: string[] = [];

      // UVP check
      if (uvpIdx >= 0) {
        const v = row[uvpIdx];
        if (v === undefined || v === null || v === '' || Number(v) === 0) {
          pricingErrors.push('UVP missing');
        }
      }

      // SRP checks
      srpCols.forEach(({ index, name }) => {
        const v = row[index];
        if (v === undefined || v === null || v === '' || Number(v) === 0) {
          pricingErrors.push(`${name} missing`);
        }
      });

      // Units per Outer check
      const unitsOuter = Number(row[COLUMNS.UNITS_OUTER]);
      if (!unitsOuter || unitsOuter === 0) {
        unitErrors.push('Units/Outer: missing');
      }

      // 40' container checks
      containerCols.forEach(({ index, name }) => {
        const v = Number(row[index]);
        if (!v || v === 0) unitErrors.push(`${name}: empty`);
        else if (v === 1) unitErrors.push(`${name}: value is 1`);
      });

      return {
        row,
        dataIndex,
        pricingErrors,
        unitErrors,
        hasErrors: pricingErrors.length > 0 || unitErrors.length > 0,
        isCritical: unitErrors.length > 0,
      };
    });
  }, [data, uvpIdx, srpCols, containerCols]);

  // ── Stats ─────────────────────────────────────────────────────────────────
  const stats = useMemo(() => {
    const withPricing = analyzedRows.filter(r => r.pricingErrors.length > 0).length;
    const withUnits = analyzedRows.filter(r => r.unitErrors.length > 0).length;
    const withAny = analyzedRows.filter(r => r.hasErrors).length;
    const allOk = analyzedRows.length - withAny;
    return { total: analyzedRows.length, withPricing, withUnits, withAny, allOk };
  }, [analyzedRows]);

  // ── Filtered rows ─────────────────────────────────────────────────────────
  const filteredRows = useMemo(() => {
    switch (filterMode) {
      case 'all_errors':   return analyzedRows.filter(r => r.hasErrors);
      case 'pricing_errors': return analyzedRows.filter(r => r.pricingErrors.length > 0);
      case 'units_errors': return analyzedRows.filter(r => r.unitErrors.length > 0);
      default:             return analyzedRows;
    }
  }, [analyzedRows, filterMode]);

  // ── Inline edit helpers ───────────────────────────────────────────────────
  const startEdit = (rowIndex: number, colIndex: number, currentValue: string) => {
    setEditingCell({ rowIndex, colIndex, value: currentValue });
    setTimeout(() => inputRef.current?.focus(), 0);
  };

  const commitEdit = useCallback(async () => {
    if (!editingCell) return;
    const { rowIndex, colIndex, value } = editingCell;
    const original = data[rowIndex];
    const newRow = [...original];
    newRow[colIndex] = value;
    setSavingCell({ rowIndex, colIndex });
    setEditingCell(null);
    onCaptureState(`Updated pricing for ${original[COLUMNS.ARTICLE_NO]}`);
    await onSaveRow(rowIndex, newRow);
    setSavingCell(null);
  }, [editingCell, data, onSaveRow, onCaptureState]);

  const cancelEdit = () => setEditingCell(null);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') commitEdit();
    if (e.key === 'Escape') cancelEdit();
  };

  // ── Column helpers ────────────────────────────────────────────────────────
  const pricingEditableCols: DetectedCol[] = [
    ...(uvpIdx >= 0 ? [{ index: uvpIdx, name: headers[uvpIdx] || 'UVP' }] : []),
    ...srpCols,
  ];

  const formatPrice = (val: any) => {
    if (val === undefined || val === null || val === '') return '';
    const n = parseFloat(String(val).replace(',', '.'));
    return isNaN(n) ? String(val) : n.toFixed(2);
  };

  const formatUnits = (val: any) => {
    if (val === undefined || val === null || val === '') return '—';
    return String(val);
  };

  const unitBadge = (val: any, label: string) => {
    const n = Number(val);
    if (!val || n === 0) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
        <AlertCircle className="w-3 h-3" /> 0
      </span>
    );
    if (n === 1) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-amber-500/20 text-amber-400 border border-amber-500/40">
        <AlertTriangle className="w-3 h-3" /> 1
      </span>
    );
    return (
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
        {n.toLocaleString()}
      </span>
    );
  };

  const unitOuterBadge = (val: any) => {
    const n = Number(val);
    if (!val || n === 0) return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 border border-red-500/40">
        <AlertCircle className="w-3 h-3" /> Missing
      </span>
    );
    return (
      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-slate-500/20 text-slate-300 border border-slate-600/50">
        {n}
      </span>
    );
  };

  // ── Column detection notice ───────────────────────────────────────────────
  const missingCols: string[] = [];
  if (uvpIdx < 0) missingCols.push('UVP');
  if (srpCols.length === 0) missingCols.push('SRP');
  if (containerCols.length === 0) missingCols.push('Units/40\'');

  const FILTERS: { id: FilterMode; label: string; count: number; color: string }[] = [
    { id: 'all',          label: 'All Products',    count: stats.total,      color: 'text-slate-300' },
    { id: 'all_errors',   label: 'All Issues',      count: stats.withAny,    color: 'text-red-400' },
    { id: 'pricing_errors', label: 'Pricing Issues', count: stats.withPricing, color: 'text-amber-400' },
    { id: 'units_errors', label: 'Units Issues',    count: stats.withUnits,  color: 'text-orange-400' },
  ];

  return (
    <div className="flex flex-col h-full gap-4">

      {/* ── Column detection warning ── */}
      {missingCols.length > 0 && (
        <div className="flex items-center gap-3 px-4 py-2.5 bg-amber-500/10 border border-amber-500/30 rounded-lg text-amber-300 text-sm">
          <AlertTriangle className="w-4 h-4 shrink-0" />
          <span>
            Could not auto-detect columns for: <strong>{missingCols.join(', ')}</strong>.
            Check that the Excel headers contain "UVP", "SRP", or "40HC"/"40HQ".
          </span>
        </div>
      )}

      {/* ── Stat cards ── */}
      <div className="grid grid-cols-4 gap-3">
        <StatCard label="Total Products" value={stats.total} icon={<Package className="w-4 h-4" />} color="slate" />
        <StatCard label="Pricing Issues" value={stats.withPricing} icon={<DollarSign className="w-4 h-4" />} color="amber" />
        <StatCard label="Units Issues" value={stats.withUnits} icon={<AlertCircle className="w-4 h-4" />} color="red" />
        <StatCard label="All OK" value={stats.allOk} icon={<CheckCircle2 className="w-4 h-4" />} color="emerald" />
      </div>

      {/* ── Filter tabs ── */}
      <div className="flex items-center gap-1 bg-slate-800/60 rounded-lg p-1 border border-slate-700/50 w-fit">
        {FILTERS.map(f => (
          <button
            key={f.id}
            onClick={() => setFilterMode(f.id)}
            className={cn(
              'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
              filterMode === f.id
                ? 'bg-slate-700 text-white shadow-sm'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
            )}
          >
            {f.label}
            <span className={cn(
              'text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[22px] text-center',
              filterMode === f.id
                ? 'bg-slate-600 text-white'
                : f.count > 0 ? `${f.color} bg-current/10` : 'text-slate-500'
            )}>
              {f.count}
            </span>
          </button>
        ))}
      </div>

      {/* ── Table ── */}
      <div className="flex-1 overflow-auto bg-slate-800 rounded-xl border border-slate-700 shadow-xl">
        {filteredRows.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64 text-slate-400">
            <CheckCircle2 className="w-12 h-12 text-emerald-500 mb-3" />
            <p className="text-lg font-medium text-emerald-400">No issues found</p>
            <p className="text-sm mt-1">All products are correctly configured.</p>
          </div>
        ) : (
          <table className="w-full text-sm border-collapse">
            <thead className="sticky top-0 z-10 bg-slate-900">
              <tr>
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                  Art. No.
                </th>
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700">
                  Article Name
                </th>
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                  Line
                </th>

                {/* Editable pricing columns */}
                {pricingEditableCols.map(col => (
                  <th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                    <span className="flex items-center gap-1">
                      <Edit2 className="w-3 h-3" />
                      {col.name}
                    </span>
                  </th>
                ))}

                {/* Units/Outer */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                  Units/Outer
                </th>

                {/* Container columns */}
                {containerCols.map(col => (
                  <th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
                    {col.name}
                  </th>
                ))}

                {/* Status */}
                <th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700">
                  Status
                </th>

                {/* Actions */}
                <th className="px-3 py-3 border-b border-slate-700 w-10" />
              </tr>
            </thead>
            <tbody>
              {filteredRows.map(({ row, dataIndex, pricingErrors, unitErrors, isCritical }) => {
                const hasAnyError = pricingErrors.length > 0 || unitErrors.length > 0;
                return (
                  <tr
                    key={dataIndex}
                    className={cn(
                      'border-b border-slate-700/50 transition-colors hover:bg-slate-700/20',
                      isCritical
                        ? 'bg-red-950/20'
                        : pricingErrors.length > 0
                          ? 'bg-amber-950/10'
                          : ''
                    )}
                  >
                    {/* Article No */}
                    <td className="px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap">
                      {row[COLUMNS.ARTICLE_NO]}
                    </td>

                    {/* Article Name */}
                    <td className="px-3 py-2.5 text-slate-200 max-w-[200px]">
                      <span className="line-clamp-1" title={row[COLUMNS.ARTICLE_NAME]}>
                        {row[COLUMNS.ARTICLE_NAME] || '—'}
                      </span>
                    </td>

                    {/* Line */}
                    <td className="px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs">
                      {row[COLUMNS.LINE] || '—'}
                    </td>

                    {/* Editable pricing cells */}
                    {pricingEditableCols.map(col => {
                      const isEditing = editingCell?.rowIndex === dataIndex && editingCell?.colIndex === col.index;
                      const isSaving = savingCell?.rowIndex === dataIndex && savingCell?.colIndex === col.index;
                      const val = formatPrice(row[col.index]);
                      const isEmpty = !row[col.index] || row[col.index] === '' || Number(row[col.index]) === 0;

                      return (
                        <td key={col.index} className="px-3 py-2">
                          {isEditing ? (
                            <div className="flex items-center gap-1">
                              <input
                                ref={inputRef}
                                type="text"
                                value={editingCell.value}
                                onChange={e => setEditingCell(prev => prev ? { ...prev, value: e.target.value } : null)}
                                onKeyDown={handleKeyDown}
                                onBlur={commitEdit}
                                className="w-24 bg-slate-900 border border-blue-500 rounded px-2 py-1 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
                              />
                              <button onClick={commitEdit} className="text-emerald-400 hover:text-emerald-300 p-0.5">
                                <Save className="w-3.5 h-3.5" />
                              </button>
                              <button onClick={cancelEdit} className="text-slate-500 hover:text-slate-300 p-0.5">
                                <X className="w-3.5 h-3.5" />
                              </button>
                            </div>
                          ) : (
                            <button
                              onClick={() => startEdit(dataIndex, col.index, val)}
                              className={cn(
                                'group flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors hover:bg-slate-700/60 min-w-[72px]',
                                isEmpty
                                  ? 'text-amber-400 border border-amber-500/40 bg-amber-500/5'
                                  : 'text-slate-200 border border-transparent hover:border-slate-600'
                              )}
                              title={isSaving ? 'Saving…' : `Click to edit ${col.name}`}
                            >
                              {isSaving ? (
                                <span className="text-slate-500 italic">saving…</span>
                              ) : isEmpty ? (
                                <>
                                  <AlertTriangle className="w-3 h-3" />
                                  <span>Missing</span>
                                </>
                              ) : (
                                <>
                                  <span>{val}</span>
                                  <Edit2 className="w-2.5 h-2.5 opacity-0 group-hover:opacity-50" />
                                </>
                              )}
                            </button>
                          )}
                        </td>
                      );
                    })}

                    {/* Units/Outer */}
                    <td className="px-3 py-2.5">
                      {unitOuterBadge(row[COLUMNS.UNITS_OUTER])}
                    </td>

                    {/* Container unit columns */}
                    {containerCols.map(col => (
                      <td key={col.index} className="px-3 py-2.5">
                        {unitBadge(row[col.index], col.name)}
                      </td>
                    ))}

                    {/* Status badge */}
                    <td className="px-3 py-2.5">
                      {!hasAnyError ? (
                        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                          <CheckCircle2 className="w-3 h-3" /> OK
                        </span>
                      ) : isCritical ? (
                        <div className="flex flex-col gap-1">
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500/15 text-red-400 border border-red-500/30">
                            <AlertCircle className="w-3 h-3" /> Critical
                          </span>
                          {unitErrors.map((e, i) => (
                            <span key={i} className="text-[10px] text-red-400/70 pl-1">{e}</span>
                          ))}
                        </div>
                      ) : (
                        <div className="flex flex-col gap-1">
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
                            <AlertTriangle className="w-3 h-3" /> Incomplete
                          </span>
                          {pricingErrors.map((e, i) => (
                            <span key={i} className="text-[10px] text-amber-400/70 pl-1">{e}</span>
                          ))}
                        </div>
                      )}
                    </td>

                    {/* Edit button */}
                    <td className="px-2 py-2.5">
                      <button
                        onClick={() => onEdit(dataIndex)}
                        className="p-1.5 text-slate-500 hover:text-slate-200 hover:bg-slate-700 rounded transition-colors"
                        title="Open full editor"
                      >
                        <Edit2 className="w-3.5 h-3.5" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {/* ── Footer count ── */}
      <p className="text-xs text-slate-500 pb-1">
        Showing {filteredRows.length} of {stats.total} products
        {pricingEditableCols.length > 0 && (
          <> · Click any <span className="text-blue-400">price cell</span> to edit inline</>
        )}
      </p>
    </div>
  );
}

// ── Stat card ─────────────────────────────────────────────────────────────────
function StatCard({
  label,
  value,
  icon,
  color,
}: {
  label: string;
  value: number;
  icon: React.ReactNode;
  color: 'slate' | 'amber' | 'red' | 'emerald';
}) {
  const colors = {
    slate:   { bg: 'bg-slate-800',   border: 'border-slate-700',   text: 'text-slate-200',   icon: 'text-slate-400' },
    amber:   { bg: 'bg-amber-950/30', border: 'border-amber-700/40', text: 'text-amber-300',  icon: 'text-amber-500' },
    red:     { bg: 'bg-red-950/30',   border: 'border-red-700/40',   text: 'text-red-300',    icon: 'text-red-500' },
    emerald: { bg: 'bg-emerald-950/20', border: 'border-emerald-700/30', text: 'text-emerald-300', icon: 'text-emerald-500' },
  };
  const c = colors[color];
  return (
    <div className={cn('rounded-xl border p-4 flex items-center gap-4', c.bg, c.border)}>
      <span className={c.icon}>{icon}</span>
      <div>
        <p className={cn('text-2xl font-bold', c.text)}>{value}</p>
        <p className="text-xs text-slate-400">{label}</p>
      </div>
    </div>
  );
}