breakpilot-compliance/admin-compliance/app/sdk/dsb-portal/_components/ZeiterfassungTab.tsx

'use client'

import React, { useState, useEffect, useCallback } from 'react'
import {
  HourEntry, HoursSummary, HOUR_CATEGORIES,
  apiFetch, formatDate, currentMonth, monthLabel, prevMonth, nextMonth,
} from './types'
import {
  Skeleton, Modal, Badge, HoursBar, FormLabel, FormInput,
  FormTextarea, FormSelect, PrimaryButton, SecondaryButton,
  ErrorState, EmptyState, IconClock, IconPlus,
} from './ui-primitives'

export function ZeiterfassungTab({
  assignmentId,
  monthlyBudget,
  addToast,
}: {
  assignmentId: string
  monthlyBudget: number
  addToast: (msg: string, type?: 'success' | 'error') => void
}) {
  const [hours, setHours] = useState<HourEntry[]>([])
  const [summary, setSummary] = useState<HoursSummary | null>(null)
  const [month, setMonth] = useState(currentMonth())
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [showModal, setShowModal] = useState(false)
  const [saving, setSaving] = useState(false)

  const [formDate, setFormDate] = useState(new Date().toISOString().slice(0, 10))
  const [formHours, setFormHours] = useState('1')
  const [formCategory, setFormCategory] = useState(HOUR_CATEGORIES[0])
  const [formDesc, setFormDesc] = useState('')
  const [formBillable, setFormBillable] = useState(true)

  const fetchData = useCallback(async () => {
    setLoading(true); setError('')
    try {
      const [hoursData, summaryData] = await Promise.all([
        apiFetch<HourEntry[]>(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours?month=${month}`),
        apiFetch<HoursSummary>(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours/summary?month=${month}`),
      ])
      setHours(hoursData); setSummary(summaryData)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden der Zeiterfassung')
    } finally { setLoading(false) }
  }, [assignmentId, month])

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

  const handleLogHours = async (e: React.FormEvent) => {
    e.preventDefault(); setSaving(true)
    try {
      await apiFetch(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours`, {
        method: 'POST',
        body: JSON.stringify({
          date: formDate, hours: parseFloat(formHours),
          category: formCategory, description: formDesc, billable: formBillable,
        }),
      })
      addToast('Stunden erfasst'); setShowModal(false)
      setFormDate(new Date().toISOString().slice(0, 10))
      setFormHours('1'); setFormCategory(HOUR_CATEGORIES[0])
      setFormDesc(''); setFormBillable(true); fetchData()
    } catch (e: unknown) {
      addToast(e instanceof Error ? e.message : 'Fehler', 'error')
    } finally { setSaving(false) }
  }

  const maxCatHours = summary ? Math.max(...Object.values(summary.by_category), 1) : 1

  return (
    <div>
      {/* Toolbar */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
        <div className="flex items-center gap-2">
          <button onClick={() => setMonth(prevMonth(month))}
            className="p-2 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <span className="text-sm font-medium text-gray-700 min-w-[140px] text-center">{monthLabel(month)}</span>
          <button onClick={() => setMonth(nextMonth(month))}
            className="p-2 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
        <PrimaryButton onClick={() => setShowModal(true)} className="flex items-center gap-1.5">
          <IconPlus /> Stunden erfassen
        </PrimaryButton>
      </div>

      {loading ? (
        <div className="space-y-3">
          <Skeleton className="h-24 rounded-lg" />
          <Skeleton className="h-40 rounded-lg" />
        </div>
      ) : error ? (
        <ErrorState message={error} onRetry={fetchData} />
      ) : (
        <div className="space-y-6">
          {/* Summary cards */}
          {summary && (
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="bg-purple-50 rounded-xl p-4 border border-purple-200">
                <p className="text-xs text-purple-600 font-medium">Gesamt-Stunden</p>
                <p className="text-2xl font-bold text-purple-900 mt-1">{summary.total_hours}h</p>
                <div className="mt-2"><HoursBar used={summary.total_hours} budget={monthlyBudget} /></div>
              </div>
              <div className="bg-green-50 rounded-xl p-4 border border-green-200">
                <p className="text-xs text-green-600 font-medium">Abrechnungsfaehig</p>
                <p className="text-2xl font-bold text-green-900 mt-1">{summary.billable_hours}h</p>
                <p className="text-xs text-green-500 mt-1">
                  {summary.total_hours > 0
                    ? `${Math.round((summary.billable_hours / summary.total_hours) * 100)}% der Gesamtstunden`
                    : 'Keine Stunden erfasst'}
                </p>
              </div>
              <div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
                <p className="text-xs text-gray-500 font-medium">Budget verbleibend</p>
                <p className="text-2xl font-bold text-gray-900 mt-1">{Math.max(monthlyBudget - summary.total_hours, 0)}h</p>
                <p className="text-xs text-gray-400 mt-1">von {monthlyBudget}h Monatsbudget</p>
              </div>
            </div>
          )}

          {/* Hours by category */}
          {summary && Object.keys(summary.by_category).length > 0 && (
            <div className="bg-white border border-gray-200 rounded-xl p-5">
              <h4 className="text-sm font-semibold text-gray-700 mb-3">Stunden nach Kategorie</h4>
              <div className="space-y-2.5">
                {Object.entries(summary.by_category).sort(([, a], [, b]) => b - a).map(([cat, h]) => (
                  <div key={cat} className="flex items-center gap-3">
                    <span className="text-xs text-gray-500 min-w-[120px] truncate">{cat}</span>
                    <div className="flex-1 h-5 bg-gray-100 rounded-full overflow-hidden">
                      <div className="h-full bg-purple-400 rounded-full transition-all"
                        style={{ width: `${(h / maxCatHours) * 100}%` }} />
                    </div>
                    <span className="text-xs font-medium text-gray-700 min-w-[40px] text-right">{h}h</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Hours table */}
          {hours.length === 0 ? (
            <EmptyState icon={<IconClock className="w-7 h-7" />} title="Keine Stunden erfasst"
              description={`Fuer ${monthLabel(month)} wurden noch keine Stunden erfasst.`} />
          ) : (
            <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-gray-50 border-b border-gray-200">
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Datum</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Stunden</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Kategorie</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Beschreibung</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Abrechenbar</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {hours.map((entry) => (
                      <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
                        <td className="px-4 py-3 text-gray-700 whitespace-nowrap">{formatDate(entry.date)}</td>
                        <td className="px-4 py-3 font-medium text-gray-900">{entry.hours}h</td>
                        <td className="px-4 py-3">
                          <Badge label={entry.category} className="bg-purple-50 text-purple-600 border-purple-200" />
                        </td>
                        <td className="px-4 py-3 text-gray-600 max-w-xs truncate">{entry.description || '-'}</td>
                        <td className="px-4 py-3">
                          {entry.billable
                            ? <span className="text-green-600 font-medium">Ja</span>
                            : <span className="text-gray-400">Nein</span>}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Log hours modal */}
      <Modal open={showModal} onClose={() => setShowModal(false)} title="Stunden erfassen">
        <form onSubmit={handleLogHours} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <FormLabel htmlFor="h-date">Datum *</FormLabel>
              <FormInput id="h-date" type="date" value={formDate} onChange={setFormDate} required />
            </div>
            <div>
              <FormLabel htmlFor="h-hours">Stunden *</FormLabel>
              <FormInput id="h-hours" type="number" value={formHours} onChange={setFormHours}
                min={0.25} max={24} step={0.25} required />
            </div>
          </div>
          <div>
            <FormLabel htmlFor="h-cat">Kategorie</FormLabel>
            <FormSelect id="h-cat" value={formCategory} onChange={setFormCategory}
              options={HOUR_CATEGORIES.map((c) => ({ value: c, label: c }))} />
          </div>
          <div>
            <FormLabel htmlFor="h-desc">Beschreibung</FormLabel>
            <FormTextarea id="h-desc" value={formDesc} onChange={setFormDesc} placeholder="Was wurde gemacht..." />
          </div>
          <div className="flex items-center gap-2">
            <input id="h-billable" type="checkbox" checked={formBillable}
              onChange={(e) => setFormBillable(e.target.checked)}
              className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
            <label htmlFor="h-billable" className="text-sm text-gray-700">Abrechnungsfaehig</label>
          </div>
          <div className="flex justify-end gap-3 pt-2">
            <SecondaryButton onClick={() => setShowModal(false)}>Abbrechen</SecondaryButton>
            <PrimaryButton type="submit" disabled={saving}>
              {saving ? 'Erfasse...' : 'Stunden erfassen'}
            </PrimaryButton>
          </div>
        </form>
      </Modal>
    </div>
  )
}