import { useCallback, useEffect, useState } from 'react'
import { Button, EmptyState } from '../ui'
import { getCustomerViewLog } from '../../lib/teamApi'
import { formatViewLogTime, viewLogLabel } from '../../lib/viewLog'

// Reiter „Protokoll“: wer wann die Kundenansicht dieses Kunden geöffnet oder darin etwas geändert hat
export default function CustomerViewLog({ customerId }) {
  const [entries, setEntries] = useState(null)
  const [error, setError] = useState(null)

  const load = useCallback(async () => {
    setError(null)
    setEntries(null)
    try {
      const { entries: list } = await getCustomerViewLog(customerId)
      setEntries(list || [])
    } catch (err) {
      setError(err.message || 'Protokoll konnte nicht geladen werden.')
    }
  }, [customerId])

  useEffect(() => { load() }, [load])

  if (error) {
    return (
      <div className="flex items-center gap-2 wrap">
        <div className="msg err" role="alert">{error}</div>
        <Button onClick={load}>Erneut versuchen</Button>
      </div>
    )
  }
  if (!entries) return <div className="loading">Wird geladen …</div>
  if (entries.length === 0) {
    return <EmptyState title="Noch keine Einträge" hint="Hier steht, wer die Kundenansicht geöffnet oder darin etwas geändert hat." />
  }

  return (
    <table className="table">
      <thead>
        <tr>
          <th>Zeit</th>
          <th>Mitarbeiter</th>
          <th>Aktion</th>
        </tr>
      </thead>
      <tbody>
        {entries.map((e) => (
          <tr key={e.id}>
            <td className="nowrap num">{formatViewLogTime(e.at)}</td>
            <td>{e.staffName || '–'}</td>
            <td>
              <div>{viewLogLabel(e.action)}</div>
              {e.detail && <div className="cell-sub">{e.detail}</div>}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}