import { useCallback, useEffect, useState } from 'react'
import { FaSpinner, FaRotateRight } from 'react-icons/fa6'
import { Card, 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 (
      <Card>
        <div className="flex items-center gap-2 wrap">
          <span className="muted">{error}</span>
          <Button variant="ghost" onClick={load}><FaRotateRight /> Erneut versuchen</Button>
        </div>
      </Card>
    )
  }
  if (!entries) return <Card><FaSpinner className="spinner" /></Card>
  if (entries.length === 0) {
    return <Card><EmptyState title="Noch keine Einträge" hint="Hier steht, wer die Kundenansicht geöffnet oder darin etwas geändert hat." /></Card>
  }

  return (
    <Card pad={false}>
      <div className="list">
        {entries.map((e) => (
          <div key={e.id} className="list-row">
            <span className="mono muted" style={{ minWidth: 130 }}>{formatViewLogTime(e.at)}</span>
            <span style={{ minWidth: 120, fontWeight: 600 }}>{e.staffName || '–'}</span>
            <div className="grow">
              <div>{viewLogLabel(e.action)}</div>
              {e.detail && <div className="muted">{e.detail}</div>}
            </div>
          </div>
        ))}
      </div>
    </Card>
  )
}