recipe-app/frontend/app/kvitto/ReceiptImportClient.tsx

'use client';

import { useRef, useState } from 'react';

type ParsedItem = {
  rawName: string;
  quantity: number;
  unit: string;
  price?: number | null;
  matchedProductId?: number;
  matchedProductName?: string;
};

type RowState = ParsedItem & { checked: boolean; editQty: string; editUnit: string };

const UNITS = ['st', 'kg', 'g', 'l', 'dl', 'cl', 'ml', 'förp', 'pak', 'burk', 'flaska'];

export default function ReceiptImportClient() {
  const fileRef = useRef<HTMLInputElement>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [parsing, setParsing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [rows, setRows] = useState<RowState[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [savedCount, setSavedCount] = useState<number | null>(null);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setSelectedFile(file);
    setPreview(URL.createObjectURL(file));
    setRows([]);
    setError(null);
    setSavedCount(null);
  };

  const handleParse = async () => {
    if (!selectedFile) return;
    setParsing(true);
    setError(null);
    try {
      const fd = new FormData();
      fd.append('file', selectedFile);
      const res = await fetch('/api/receipt-import-proxy', { method: 'POST', body: fd });
      if (!res.ok) {
        const e = await res.json().catch(() => ({ message: 'Okänt fel' }));
        throw new Error(e.message ?? 'Servern svarade med fel');
      }
      const items: ParsedItem[] = await res.json();
      setRows(
        items.map((item) => ({
          ...item,
          checked: !!item.matchedProductId,
          editQty: String(item.quantity),
          editUnit: item.unit,
        })),
      );
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Kunde inte tolka kvittot');
    } finally {
      setParsing(false);
    }
  };

  const updateRow = (i: number, patch: Partial<RowState>) => {
    setRows((prev) => prev.map((r, idx) => (idx === i ? { ...r, ...patch } : r)));
  };

  const handleSave = async () => {
    const toSave = rows.filter((r) => r.checked && r.matchedProductId);
    if (toSave.length === 0) return;
    setSaving(true);
    setError(null);
    try {
      await Promise.all(
        toSave.map((r) =>
          fetch('/api/inventory', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              productId: r.matchedProductId,
              quantity: parseFloat(r.editQty) || r.quantity,
              unit: r.editUnit,
            }),
          }),
        ),
      );
      setSavedCount(toSave.length);
      setRows([]);
      setPreview(null);
      setSelectedFile(null);
      if (fileRef.current) fileRef.current.value = '';
    } catch {
      setError('Något gick fel vid sparning. Försök igen.');
    } finally {
      setSaving(false);
    }
  };

  const checkedCount = rows.filter((r) => r.checked && r.matchedProductId).length;
  const unmatchedCount = rows.filter((r) => !r.matchedProductId).length;

  return (
    <div>
      {/* Fil-input */}
      <div
        style={{
          border: '2px dashed #ced4da',
          borderRadius: '10px',
          padding: '1.5rem',
          textAlign: 'center',
          background: '#fafafa',
          marginBottom: '1rem',
          cursor: 'pointer',
        }}
        onClick={() => fileRef.current?.click()}
      >
        <input
          ref={fileRef}
          type="file"
          accept="image/*"
          capture="environment"
          onChange={handleFileChange}
          style={{ display: 'none' }}
        />
        {preview ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={preview}
            alt="Kvittoförhandsgranskning"
            style={{ maxHeight: '300px', maxWidth: '100%', borderRadius: '6px' }}
          />
        ) : (
          <div style={{ color: '#888' }}>
            <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📷</div>
            <div style={{ fontWeight: 600 }}>Fotografera eller välj kvitto</div>
            <div style={{ fontSize: '0.85rem', marginTop: '0.25rem' }}>
              Klicka för att välja bild (JPEG, PNG, WebP)
            </div>
          </div>
        )}
      </div>

      {preview && rows.length === 0 && (
        <button
          onClick={handleParse}
          disabled={parsing}
          style={primaryBtn(parsing)}
        >
          {parsing ? '⏳ Tolkar kvitto via AI...' : '🔍 Tolka kvitto'}
        </button>
      )}

      {error && (
        <p style={{ color: '#c0392b', background: '#fdf0ef', padding: '0.75rem 1rem', borderRadius: '6px', marginTop: '0.75rem' }}>
          {error}
        </p>
      )}

      {savedCount !== null && (
        <p style={{ color: '#27ae60', background: '#edfdf4', padding: '0.75rem 1rem', borderRadius: '6px', marginTop: '0.75rem', fontWeight: 600 }}>
          ✓ {savedCount} {savedCount === 1 ? 'vara lades till' : 'varor lades till'} i inventariet.
        </p>
      )}

      {/* Parsade rader */}
      {rows.length > 0 && (
        <div style={{ marginTop: '1.25rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.5rem' }}>
            <h2 style={{ margin: 0, fontSize: '1.05rem' }}>
              Identifierade varor ({rows.length})
            </h2>
            {unmatchedCount > 0 && (
              <span style={{ fontSize: '0.8rem', color: '#e67e22' }}>
                {unmatchedCount} {unmatchedCount === 1 ? 'vara' : 'varor'} saknas i produktdatabasen
              </span>
            )}
          </div>

          <div style={{ display: 'grid', gap: '0.5rem', marginBottom: '1rem' }}>
            {rows.map((row, i) => {
              const matched = !!row.matchedProductId;
              return (
                <div
                  key={i}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '36px 1fr 80px 90px',
                    gap: '0.5rem',
                    alignItems: 'center',
                    padding: '0.6rem 0.75rem',
                    border: `1px solid ${matched ? '#dee2e6' : '#f5cba7'}`,
                    borderRadius: '6px',
                    background: matched ? '#fff' : '#fef9f5',
                    opacity: row.checked || !matched ? 1 : 0.7,
                  }}
                >
                  <input
                    type="checkbox"
                    checked={row.checked}
                    disabled={!matched}
                    onChange={(e) => updateRow(i, { checked: e.target.checked })}
                    style={{ width: '18px', height: '18px', cursor: matched ? 'pointer' : 'not-allowed' }}
                    title={!matched ? 'Produkten finns inte i databasen — lägg till den i admin först' : ''}
                  />
                  <div>
                    <div style={{ fontWeight: 500, fontSize: '0.9rem' }}>
                      {row.matchedProductName ?? row.rawName}
                    </div>
                    {row.matchedProductName && row.matchedProductName.toLowerCase() !== row.rawName.toLowerCase() && (
                      <div style={{ fontSize: '0.75rem', color: '#888' }}>
                        Kvitto: {row.rawName}
                      </div>
                    )}
                    {!matched && (
                      <div style={{ fontSize: '0.75rem', color: '#e67e22' }}>
                        Ingen matchning — {row.rawName}
                      </div>
                    )}
                  </div>
                  <input
                    type="number"
                    min="0"
                    step="0.01"
                    value={row.editQty}
                    onChange={(e) => updateRow(i, { editQty: e.target.value })}
                    style={{ padding: '0.3rem 0.5rem', border: '1px solid #ced4da', borderRadius: '4px', width: '100%', fontSize: '0.9rem' }}
                  />
                  <select
                    value={row.editUnit}
                    onChange={(e) => updateRow(i, { editUnit: e.target.value })}
                    style={{ padding: '0.3rem 0.5rem', border: '1px solid #ced4da', borderRadius: '4px', fontSize: '0.9rem' }}
                  >
                    {UNITS.map((u) => <option key={u} value={u}>{u}</option>)}
                  </select>
                </div>
              );
            })}
          </div>

          <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
            <button
              onClick={handleSave}
              disabled={saving || checkedCount === 0}
              style={primaryBtn(saving || checkedCount === 0)}
            >
              {saving ? 'Sparar...' : `Lägg till ${checkedCount} ${checkedCount === 1 ? 'vara' : 'varor'} i inventariet`}
            </button>
            <button
              onClick={() => { setRows([]); setPreview(null); setSelectedFile(null); if (fileRef.current) fileRef.current.value = ''; }}
              style={{ padding: '0.5rem 1rem', background: '#f0f0f0', border: '1px solid #ccc', borderRadius: '6px', cursor: 'pointer', fontSize: '0.9rem' }}
            >
              Börja om
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function primaryBtn(disabled: boolean): React.CSSProperties {
  return {
    padding: '0.6rem 1.25rem',
    background: disabled ? '#aaa' : '#0070f3',
    color: '#fff',
    border: 'none',
    borderRadius: '6px',
    cursor: disabled ? 'not-allowed' : 'pointer',
    fontWeight: 600,
    fontSize: '0.95rem',
  };
}