tickte-system/src/components/AnalyseRow.jsx

import { useState, useEffect } from 'react'
import { fetchAnalyse, setAnalyse } from '../lib/analyseApi'
import { analyseStatus, textformLabel, canSubmitTextform, channelLabel, legalLinks, chatTemplate, privacyHint } from '../lib/analyseView'

const COLORS = { green: '#10b981', red: '#ef4444', grey: '#a0aec0' }

// Kompakte Zeile "Website-Analyse" je Projekt (lädt beim Einbinden; mit key=Projekt-ID verwenden)
export default function AnalyseRow({ projectId }) {
  const [data, setData] = useState(null)
  const [loadError, setLoadError] = useState('')
  const [mode, setMode] = useState(null) // null | 'on' | 'off'
  const [confirmed, setConfirmed] = useState(false)
  const [date, setDate] = useState('')
  const [channel, setChannel] = useState('')
  const [copied, setCopied] = useState(false)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    let cancelled = false
    fetchAnalyse(projectId)
      .then((r) => { if (!cancelled) setData(r) })
      .catch((err) => { if (!cancelled) setLoadError(err.message) })
    return () => { cancelled = true }
  }, [projectId])

  const apply = async (on) => {
    setBusy(true)
    setError('')
    try {
      await setAnalyse(projectId, { on, textformDate: date, textformChannel: channel, audienceConfirmed: on })
      setData(await fetchAnalyse(projectId))
      setMode(null)
      setConfirmed(false)
      setDate('')
      setChannel('')
    } catch (err) {
      setError(err.message)
    } finally {
      setBusy(false)
    }
  }

  const cancel = () => { setMode(null); setConfirmed(false); setDate(''); setChannel(''); setError('') }
  const today = new Date().toLocaleDateString('sv-SE', { timeZone: 'Europe/Berlin' })
  const minDate = data?.avvVersion || ''
  const privacyBlocked = data?.privacy?.ok === false
  const canSubmit = !privacyBlocked && canSubmitTextform({ confirmed, date, channel, today, minDate })
  const copyTemplate = async () => {
    try {
      await navigator.clipboard.writeText(chatTemplate(data.avvVersion))
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch { /* Kopieren nicht möglich: Text bleibt markierbar */ }
  }
  const status = analyseStatus(data)

  return (
    <div style={{ marginTop: 10, fontSize: 13 }}>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
        <span className="text-grey">Website-Analyse:</span>
        {loadError ? (
          <span style={{ color: COLORS.red }}>{loadError}</span>
        ) : data ? (
          <span style={{ color: COLORS[status.color] }}>{status.text}</span>
        ) : (
          <span className="text-grey">Lädt …</span>
        )}
        {status.hint && <span className="text-grey">({status.hint})</span>}
        {status.canEnable && !mode && (
          <button type="button" className="btn btn-sm" onClick={() => setMode('on')}>{status.enableLabel || 'Einschalten'}</button>
        )}
        {status.canDisable && !mode && (
          <button type="button" className="btn btn-sm" onClick={() => setMode('off')}>Ausschalten</button>
        )}
      </div>

      {mode === 'on' && data && (() => {
        const label = textformLabel(data.avvVersion)
        const links = legalLinks(data.avvVersion)
        return (
          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <label style={{ display: 'inline-flex', gap: 6, alignItems: 'flex-start' }}>
              <input type="checkbox" checked={confirmed} onChange={(e) => setConfirmed(e.target.checked)} style={{ marginTop: 3 }} />
              <span>
                {label.before}
                <a href={links.avv} target="_blank" rel="noopener noreferrer">{label.avv}</a>
                {label.between}
                <a href={links.lb} target="_blank" rel="noopener noreferrer">{label.lb}</a>
                {label.after}
              </span>
            </label>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <label>
                Datum der Zustimmung:{' '}
                <input type="date" required value={date} min={minDate} max={today} onChange={(e) => setDate(e.target.value)} />
              </label>
              <span role="radiogroup" aria-label="Weg der Zustimmung" style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
                <span>Weg:</span>
                {['chat', 'email'].map((c) => (
                  <label key={c} style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
                    <input type="radio" name={`analyse-weg-${projectId}`} value={c} checked={channel === c} onChange={() => setChannel(c)} />
                    {channelLabel(c)}
                  </label>
                ))}
              </span>
            </div>
            {privacyBlocked && <div style={{ color: COLORS.red }}>{privacyHint(data.privacy)}</div>}
            <details>
              <summary style={{ cursor: 'pointer' }}>Textvorlage für den Chat</summary>
              <p style={{ margin: '6px 0', whiteSpace: 'pre-wrap' }}>{chatTemplate(data.avvVersion)}</p>
              <button type="button" className="btn btn-sm" onClick={copyTemplate}>{copied ? 'Kopiert' : 'Kopieren'}</button>
            </details>
            <div style={{ display: 'flex', gap: 8 }}>
              <button type="button" className="btn btn-sm" disabled={!canSubmit || busy} onClick={() => apply(true)}>Einschalten</button>
              <button type="button" className="btn btn-sm" disabled={busy} onClick={cancel}>Abbrechen</button>
            </div>
          </div>
        )
      })()}

      {mode === 'off' && (
        <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
          <span>Website-Analyse wirklich ausschalten?</span>
          <button type="button" className="btn btn-sm" disabled={busy} onClick={() => apply(false)}>Ja, ausschalten</button>
          <button type="button" className="btn btn-sm" disabled={busy} onClick={cancel}>Abbrechen</button>
        </div>
      )}

      {error && <div style={{ marginTop: 6, color: COLORS.red }}>{error}</div>}
    </div>
  )
}