mitai-jinkendo/frontend/src/pages/UniversalCsvImportPage.jsx

import { useState, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, FileSpreadsheet, Loader2 } from 'lucide-react'
import { api } from '../utils/api'

/** Ziele, die der Universal-Executor bereits schreiben kann (ohne manuelle Modul-Wahl). */
const EXECUTOR_READY = new Set(['nutrition', 'weight', 'blood_pressure'])

const MODULE_LABEL = {
  nutrition: 'Ernährung',
  weight: 'Gewicht',
  blood_pressure: 'Blutdruck',
  activity: 'Aktivität',
}

function mergeMappingChoices(detected, mapData) {
  const sys = mapData.system_templates || []
  const usr = mapData.user_mappings || []
  const flat = [
    ...sys.map((m) => ({ ...m, _isSys: true })),
    ...usr.map((m) => ({ ...m, _isSys: false })),
  ]
  const byId = new Map(flat.map((m) => [m.id, m]))
  const out = []
  const seen = new Set()
  for (const d of detected || []) {
    const row = byId.get(d.mapping_id)
    if (row) {
      out.push({
        id: row.id,
        module: row.module,
        name: row.name,
        is_system: row.is_system,
        confidence: d.confidence ?? 0,
      })
      seen.add(row.id)
    }
  }
  for (const row of flat) {
    if (!seen.has(row.id)) {
      out.push({
        id: row.id,
        module: row.module,
        name: row.name,
        is_system: row.is_system,
        confidence: 0,
      })
    }
  }
  return out
}

function SampleTable({ sampleRows, columns }) {
  if (!sampleRows?.length || !columns?.length) return null
  const showCols = columns.slice(0, 8)
  return (
    <div style={{ overflowX: 'auto', marginTop: 12 }}>
      <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            {showCols.map((c) => (
              <th
                key={c}
                style={{
                  textAlign: 'left',
                  padding: '8px 6px',
                  borderBottom: '1px solid var(--border)',
                  color: 'var(--text2)',
                  whiteSpace: 'nowrap',
                }}
              >
                {c}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {sampleRows.slice(0, 5).map((row, i) => (
            <tr key={i}>
              {showCols.map((c) => (
                <td
                  key={c}
                  style={{
                    padding: '6px',
                    borderBottom: '1px solid var(--border)',
                    maxWidth: 140,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                  }}
                >
                  {row[c] ?? '—'}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default function UniversalCsvImportPage() {
  const navigate = useNavigate()
  const [file, setFile] = useState(null)
  const [analyzeResult, setAnalyzeResult] = useState(null)
  const [mappingChoices, setMappingChoices] = useState([])
  const [mappingId, setMappingId] = useState('')
  const [loadingAnalyze, setLoadingAnalyze] = useState(false)
  const [loadingImport, setLoadingImport] = useState(false)
  const [error, setError] = useState(null)
  const [success, setSuccess] = useState(null)

  const selectedChoice = useMemo(
    () => mappingChoices.find((c) => String(c.id) === String(mappingId)),
    [mappingChoices, mappingId],
  )
  const importAllowed = selectedChoice && EXECUTOR_READY.has(selectedChoice.module)

  const handleAnalyze = async () => {
    if (!file) {
      setError('Bitte eine CSV-Datei wählen')
      return
    }
    setLoadingAnalyze(true)
    setError(null)
    setSuccess(null)
    setMappingId('')
    try {
      const res = await api.analyzeCsv(file)
      setAnalyzeResult(res)
      const mapData = await api.getCsvMappings()
      const merged = mergeMappingChoices(res.detected_mappings || [], mapData)
      setMappingChoices(merged)

      const best = res.recommended || (res.detected_mappings || [])[0]
      let pick = ''
      if (best && merged.some((m) => m.id === best.mapping_id)) {
        pick = String(best.mapping_id)
      } else if (merged.length) {
        const firstReady = merged.find((m) => EXECUTOR_READY.has(m.module))
        pick = String((firstReady || merged[0]).id)
      }
      setMappingId(pick)
    } catch (e) {
      setError(e.message || 'Analyse fehlgeschlagen')
      setAnalyzeResult(null)
      setMappingChoices([])
    } finally {
      setLoadingAnalyze(false)
    }
  }

  const handleImport = async () => {
    if (!file || !mappingId) {
      setError('Bitte Datei und Vorlage wählen')
      return
    }
    if (!importAllowed) {
      setError('Diese Vorlage kann hier noch nicht importiert werden (z. B. Aktivität → Seite „Aktivität“).')
      return
    }
    setLoadingImport(true)
    setError(null)
    setSuccess(null)
    try {
      const res = await api.importUniversalCsv(file, Number(mappingId))
      const st = res.stats || {}
      const modLabel = MODULE_LABEL[res.module] || res.module || ''
      setSuccess(
        (modLabel ? `${modLabel}: ` : '') +
          `Import fertig — ${st.imported ?? 0} neu, ${st.updated ?? 0} aktualisiert, ` +
          `${st.skipped ?? 0} übersprungen, ${st.errors ?? 0} Zeilenfehler.`,
      )
    } catch (e) {
      setError(e.message || 'Import fehlgeschlagen')
    } finally {
      setLoadingImport(false)
    }
  }

  return (
    <div className="capture-page" style={{ paddingBottom: 88 }}>
      <button
        type="button"
        onClick={() => navigate(-1)}
        className="btn btn-secondary"
        style={{
          marginBottom: 16,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 12px',
        }}
      >
        <ArrowLeft size={18} /> Zurück
      </button>

      <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <FileSpreadsheet size={26} strokeWidth={2} />
        CSV-Import
      </h1>
      <p style={{ fontSize: 14, color: 'var(--text2)', marginBottom: 20, lineHeight: 1.55 }}>
        Datei hochladen: Die App vergleicht die Spalten-Struktur mit allen gespeicherten Vorlagen und schlägt
        passende Ziele vor (Ernährung, Gewicht, Blutdruck, …). Du bestätigst nur noch die Vorlage — ohne
        vorher ein „Modul“ raten zu müssen.{' '}
        <strong>Später:</strong> eine Datei, mehrere Zieltabellen. Trainingseinheiten aktuell weiter unter{' '}
        <button
          type="button"
          className="btn btn-secondary"
          style={{ padding: '2px 8px', fontSize: 13 }}
          onClick={() => navigate('/activity')}
        >
          Aktivität
        </button>
        .
      </p>

      {error && (
        <div
          className="card"
          style={{
            marginBottom: 16,
            padding: 12,
            borderColor: 'var(--danger)',
            color: 'var(--danger)',
          }}
        >
          {error}
        </div>
      )}

      {success && (
        <div
          className="card"
          style={{
            marginBottom: 16,
            padding: 12,
            borderColor: 'var(--accent)',
            color: 'var(--accent-dark)',
          }}
        >
          {success}
        </div>
      )}

      <div className="card" style={{ marginBottom: 16, padding: 16 }}>
        <div className="form-label">1. CSV-Datei</div>
        <input
          type="file"
          accept=".csv,text/csv"
          className="form-input"
          style={{ marginTop: 8, width: '100%' }}
          onChange={(e) => {
            setFile(e.target.files?.[0] || null)
            setAnalyzeResult(null)
            setMappingChoices([])
            setMappingId('')
            setSuccess(null)
          }}
        />
        <button
          type="button"
          className="btn btn-primary"
          style={{ marginTop: 12, width: '100%' }}
          disabled={!file || loadingAnalyze}
          onClick={handleAnalyze}
        >
          {loadingAnalyze ? (
            <>
              <Loader2 size={18} style={{ marginRight: 8, animation: 'spin 0.7s linear infinite' }} /> Datei
              wird erkannt …
            </>
          ) : (
            'Datei analysieren'
          )}
        </button>
      </div>

      {analyzeResult && (
        <div className="card" style={{ marginBottom: 16, padding: 16 }}>
          <div className="form-label">2. Erkennung &amp; Vorschau</div>
          <div style={{ fontSize: 13, color: 'var(--text2)', marginTop: 8 }}>
            Trennzeichen: <strong>{analyzeResult.delimiter}</strong> · Spalten:{' '}
            {analyzeResult.columns?.length ?? 0}
          </div>

          {analyzeResult.recommended && (
            <div
              style={{
                marginTop: 12,
                padding: 12,
                borderRadius: 12,
                background: 'var(--surface2)',
                fontSize: 14,
              }}
            >
              <strong>Vorschlag:</strong>{' '}
              {MODULE_LABEL[analyzeResult.recommended.module] || analyzeResult.recommended.module} —{' '}
              {analyzeResult.recommended.mapping_name} (
              {Math.round((analyzeResult.recommended.confidence || 0) * 100)} % Übereinstimmung der Spalten)
            </div>
          )}

          {(analyzeResult.detected_mappings || []).length > 1 && (
            <details style={{ marginTop: 12, fontSize: 13 }}>
              <summary style={{ cursor: 'pointer', color: 'var(--text2)' }}>Weitere Treffer</summary>
              <ul style={{ margin: '8px 0 0 18px', padding: 0 }}>
                {analyzeResult.detected_mappings.slice(1, 8).map((d) => (
                  <li key={d.mapping_id}>
                    {MODULE_LABEL[d.module] || d.module}: {d.mapping_name} ·{' '}
                    {Math.round((d.confidence || 0) * 100)} %
                  </li>
                ))}
              </ul>
            </details>
          )}

          <SampleTable sampleRows={analyzeResult.sample_rows} columns={analyzeResult.columns} />

          <div className="form-label" style={{ marginTop: 16 }}>
            Import-Vorlage
          </div>
          <select
            className="form-input"
            value={mappingId}
            onChange={(e) => setMappingId(e.target.value)}
            style={{ width: '100%', marginTop: 8 }}
          >
            {mappingChoices.length === 0 ? (
              <option value="">Keine Vorlage geladen</option>
            ) : (
              mappingChoices.map((o) => (
                <option key={o.id} value={o.id}>
                  {MODULE_LABEL[o.module] || o.module} — {o.name}
                  {o.is_system ? ' (System)' : ''}
                  {o.confidence > 0 ? ` · ${Math.round(o.confidence * 100)} %` : ''}
                  {!EXECUTOR_READY.has(o.module) ? ' · Import: noch nicht hier' : ''}
                </option>
              ))
            )}
          </select>

          {selectedChoice && !importAllowed && (
            <p style={{ fontSize: 13, color: 'var(--text3)', marginTop: 10 }}>
              Diese Vorlage passt strukturell, wird aber an der passenden Stelle importiert (z. B. Aktivität →
              Apple-Health-CSV dort).
            </p>
          )}

          <button
            type="button"
            className="btn btn-primary"
            style={{ marginTop: 16, width: '100%' }}
            disabled={!file || !mappingId || !importAllowed || loadingImport}
            onClick={handleImport}
          >
            {loadingImport ? (
              <>
                <Loader2 size={18} style={{ marginRight: 8, animation: 'spin 0.7s linear infinite' }} /> Import
                läuft …
              </>
            ) : (
              'Import starten'
            )}
          </button>
        </div>
      )}
    </div>
  )
}