import { EmptyState } from './ui'
import { needsTimeEntry, isGitWorksheet } from '../lib/ticketForm'
import { parseSupporters } from '../lib/support'
import {
  showAboToggle,
  statusAfterLabel,
  supportLines,
  timeLabel,
  worksheetBadge,
  worksheetKindLabel,
  worksheetWhen,
} from '../lib/worksheetView'

// Arbeitsblaetter, neueste zuerst wie geliefert: links Datum und Beginn, in der Mitte Person, Art, Text und Aktionen, rechts die Zeit
export default function WorksheetList({
  worksheets,
  loading,
  onTogglePlan,
  aboHoursAllowed = true,
  canEditTimes,
  onEditTimes,
  canAddSupport,
  onOwnSupport,
  currentUserId,
}) {
  if (loading) return <div className="loading">Wird geladen …</div>

  if (!worksheets || worksheets.length === 0) {
    return <EmptyState title="Noch keine Arbeitsblätter." hint="Leg das erste mit „Arbeitsblatt hinzufügen“ an." />
  }

  return (
    <div className="ws-list">
      {worksheets.map((ws) => {
        const when = worksheetWhen(ws)
        const kind = worksheetKindLabel(ws)
        const badge = worksheetBadge(ws)
        const lines = supportLines(ws)
        const status = statusAfterLabel(ws)
        const time = timeLabel(ws)
        const canEdit = Boolean(onEditTimes && canEditTimes?.(ws))
        const canSupport = Boolean(onOwnSupport && canAddSupport?.(ws))
        const ownSupport = parseSupporters(ws.supporters).some((s) => s.employeeId === currentUserId)
        const showAbo = Boolean(onTogglePlan && showAboToggle(ws, aboHoursAllowed))
        const isNote = ws.isComment && !isGitWorksheet(ws)

        return (
          <div key={ws.$id} className={isNote ? 'ws comment' : 'ws'}>
            <div className="ws-when">
              <div className="d">{when.date || '–'}</div>
              {when.time && <div className="num">{when.time}</div>}
            </div>

            <div>
              <div className="ws-head">
                <span className="who">{ws.employeeName}</span>
                {ws.employeeShort && <span className="faint xs">{ws.employeeShort}</span>}
                {kind && <span className="muted">{kind}</span>}
                <span className="faint xs num">WSID {ws.wsid}</span>
                {badge && <span className={`badge ${badge.tone}`}>{badge.text}</span>}
                {showAbo ? (
                  <button
                    type="button"
                    className={ws.countsToPlan ? 'abo-toggle on' : 'abo-toggle'}
                    title={ws.countsToPlan ? 'Nicht mehr vom Abo-Stundenkonto abziehen' : 'Vom Abo-Stundenkonto des Kunden abziehen'}
                    onClick={() => onTogglePlan(ws)}
                  >
                    {ws.countsToPlan ? 'Abo' : '+ Abo'}
                  </button>
                ) : (
                  ws.countsToPlan && !ws.isComment && <span className="muted xs">Abo</span>
                )}
              </div>

              {ws.details && <div className="ws-text">{ws.details}</div>}
              {lines.map((line, i) => (
                <div key={i} className="ws-support">{line}</div>
              ))}
              {status && <div className="ws-support">{status}</div>}

              {(canEdit || canSupport) && (
                <div className="ws-acts">
                  {canEdit && (
                    <button
                      type="button"
                      className="link"
                      title="Beginn, Ende und Arbeitszeit ändern"
                      onClick={() => onEditTimes(ws)}
                    >
                      {needsTimeEntry(ws) ? 'Zeit nachtragen' : 'Zeiten bearbeiten'}
                    </button>
                  )}
                  {canSupport && (
                    <button
                      type="button"
                      className="link"
                      title="Eintragen, dass du bei dieser Arbeit unterstützt hast"
                      onClick={() => onOwnSupport(ws)}
                    >
                      {ownSupport ? 'Meine Unterstützung bearbeiten' : 'Ich habe unterstützt'}
                    </button>
                  )}
                </div>
              )}
            </div>

            <div className="ws-time">
              {time && <div className={time === '–' ? 't faint' : 't'}>{time}</div>}
            </div>
          </div>
        )
      })}
    </div>
  )
}