import { useEffect, useState, useCallback, useMemo } from 'react'
import { api } from '../../api/client'

interface TimeEntryOut {
  id: string
  date: string
  start_time: string
  end_time: string | null
  break_minutes: number
  worked_hours: number | null
  status: string
  note: string | null
}

interface TimeEntryListResponse {
  total: number
  items: TimeEntryOut[]
}

type View = 'today' | 'month'

function fmtTime(iso: string | null): string {
  if (!iso) return '–'
  if (/^\d{2}:\d{2}(:\d{2})?$/.test(iso)) return iso.slice(0, 5)
  const d = new Date(iso)
  if (isNaN(d.getTime())) return iso.slice(0, 5)
  return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
}

function fmtH(h: number | null): string {
  if (h === null || h === undefined) return '–'
  const hrs = Math.floor(h)
  const min = Math.round((h - hrs) * 60)
  return `${hrs}h ${min}m`
}

const STATUS_LABELS: Record<string, string> = {
  open:     'Offen',
  pending:  'Zur Prüfung',
  approved: 'Genehmigt',
  rejected: 'Abgelehnt',
  auto:     'Auto',
}

const STATUS_COLORS: Record<string, string> = {
  open:     'bg-yellow-100 text-yellow-700',
  pending:  'bg-blue-100 text-blue-700',
  approved: 'bg-green-100 text-green-700',
  rejected: 'bg-red-100 text-red-700',
  auto:     'bg-gray-100 text-gray-500',
}

export function MobileTodayScreen() {
  const [view, setView]           = useState<View>('today')
  const [entries, setEntries]     = useState<TimeEntryOut[]>([])
  const [monthEntries, setMonthEntries] = useState<TimeEntryOut[]>([])
  const [loading, setLoading]     = useState(true)
  const [loadingMonth, setLoadingMonth] = useState(false)
  const [error, setError]         = useState<string | null>(null)

  const today = new Date().toISOString().slice(0, 10)
  const now = new Date()
  const monthStart = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`
  const monthEnd   = today

  const load = useCallback(async () => {
    setError(null)
    try {
      const res = await api.get<TimeEntryListResponse>(`/time/entries?date_from=${today}&date_to=${today}&limit=20`)
      setEntries(res.items)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
    } finally {
      setLoading(false)
    }
  }, [today])

  const loadMonth = useCallback(async () => {
    if (monthEntries.length > 0) return  // schon geladen
    setLoadingMonth(true)
    try {
      const res = await api.get<TimeEntryListResponse>(
        `/time/entries?date_from=${monthStart}&date_to=${monthEnd}&limit=500`
      )
      setMonthEntries(res.items)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
    } finally {
      setLoadingMonth(false)
    }
  }, [monthStart, monthEnd, monthEntries.length])

  useEffect(() => { load() }, [load])
  useEffect(() => { if (view === 'month') loadMonth() }, [view, loadMonth])

  const totalWorked = entries.reduce((sum, e) => sum + (e.worked_hours ?? 0), 0)

  // Monat: Stunden pro Tag gruppieren
  const monthByDate = useMemo(() => {
    const map = new Map<string, TimeEntryOut[]>()
    for (const e of monthEntries) {
      if (!map.has(e.date)) map.set(e.date, [])
      map.get(e.date)!.push(e)
    }
    return new Map([...map.entries()].sort((a, b) => b[0].localeCompare(a[0])))
  }, [monthEntries])

  const monthTotalHours = monthEntries.reduce((sum, e) => sum + (e.worked_hours ?? 0), 0)
  const monthDaysWorked = monthByDate.size
  const monthName = now.toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })

  if (loading) {
    return (
      <div className='flex flex-col items-center justify-center flex-1 py-20 gap-4'>
        <div className='animate-spin rounded-full h-10 w-10 border-4 border-blue-500 border-t-transparent' />
        <p className='text-sm text-gray-400'>Wird geladen…</p>
      </div>
    )
  }

  return (
    <div className='flex flex-col gap-4 px-4 pt-4'>

      {/* Heute / Monat Toggle */}
      <div className='bg-gray-100 rounded-xl p-1 flex'>
        <button
          onClick={() => setView('today')}
          className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
            view === 'today' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500'
          }`}
        >
          Heute
        </button>
        <button
          onClick={() => setView('month')}
          className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
            view === 'month' ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500'
          }`}
        >
          {now.toLocaleDateString('de-DE', { month: 'long' })}
        </button>
      </div>

      {error && (
        <div className='bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700'>
          {error}
        </div>
      )}

      {/* ── HEUTE-ANSICHT ─────────────────────────────────────────────── */}
      {view === 'today' && (
        <>
          <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4 flex items-center justify-between'>
            <div>
              <p className='text-xs text-gray-400 font-medium uppercase tracking-widest'>Heute</p>
              <p className='text-base font-semibold text-gray-800 mt-0.5'>
                {new Date(today + 'T00:00:00').toLocaleDateString('de-DE', {
                  weekday: 'long', day: '2-digit', month: 'long',
                })}
              </p>
            </div>
            <div className='text-right'>
              <p className='text-xs text-gray-400'>Gesamt</p>
              <p className='text-2xl font-bold text-gray-800'>{fmtH(totalWorked)}</p>
            </div>
          </div>

          {entries.length === 0 ? (
            <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-10 text-center'>
              <p className='text-4xl mb-3'>📋</p>
              <p className='text-sm font-medium text-gray-500'>Noch keine Einträge heute</p>
              <p className='text-xs text-gray-400 mt-1'>Stempel dich ein, um loszulegen</p>
            </div>
          ) : (
            <div className='flex flex-col gap-3'>
              {entries.map((entry, idx) => (
                <div key={entry.id} className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4'>
                  <div className='flex items-start justify-between gap-3'>
                    <div>
                      <p className='text-xs text-gray-400 mb-1'>Eintrag {idx + 1}</p>
                      <div className='flex items-center gap-2'>
                        <span className='text-lg font-mono font-semibold text-gray-800'>{fmtTime(entry.start_time)}</span>
                        <span className='text-gray-400'>→</span>
                        <span className='text-lg font-mono font-semibold text-gray-800'>{fmtTime(entry.end_time)}</span>
                      </div>
                      {entry.break_minutes > 0 && (
                        <p className='text-xs text-gray-400 mt-1'>Pause: {entry.break_minutes} min</p>
                      )}
                      {entry.note && (
                        <p className='text-xs text-gray-500 mt-1 italic'>{entry.note}</p>
                      )}
                    </div>
                    <div className='flex flex-col items-end gap-2 flex-shrink-0'>
                      <p className='text-xl font-bold text-gray-800'>{fmtH(entry.worked_hours)}</p>
                      <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${STATUS_COLORS[entry.status] ?? 'bg-gray-100 text-gray-500'}`}>
                        {STATUS_LABELS[entry.status] ?? entry.status}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      {/* ── MONATS-ANSICHT ────────────────────────────────────────────── */}
      {view === 'month' && (
        <>
          {/* Monats-KPIs */}
          <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-4'>
            <p className='text-xs text-gray-400 font-medium uppercase tracking-widest mb-3'>{monthName}</p>
            <div className='grid grid-cols-2 gap-4'>
              <div>
                <p className='text-2xl font-bold text-gray-800'>{fmtH(monthTotalHours)}</p>
                <p className='text-xs text-gray-400 mt-0.5'>Gesamt gearbeitet</p>
              </div>
              <div>
                <p className='text-2xl font-bold text-gray-800'>{monthDaysWorked}</p>
                <p className='text-xs text-gray-400 mt-0.5'>Arbeitstage</p>
              </div>
            </div>
            {monthDaysWorked > 0 && (
              <p className='text-xs text-gray-400 mt-3 border-t border-gray-100 pt-3'>
                Ø {fmtH(monthTotalHours / monthDaysWorked)} pro Tag
              </p>
            )}
          </div>

          {loadingMonth ? (
            <div className='flex justify-center py-10'>
              <div className='animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent' />
            </div>
          ) : monthByDate.size === 0 ? (
            <div className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-10 text-center'>
              <p className='text-4xl mb-3'>📅</p>
              <p className='text-sm font-medium text-gray-500'>Keine Einträge diesen Monat</p>
            </div>
          ) : (
            <div className='flex flex-col gap-2'>
              {[...monthByDate.entries()].map(([date, dayEntries]) => {
                const dayTotal = dayEntries.reduce((s, e) => s + (e.worked_hours ?? 0), 0)
                const d = new Date(date + 'T00:00:00')
                return (
                  <div key={date} className='bg-white rounded-2xl border border-gray-200 shadow-sm px-5 py-3.5 flex items-center justify-between'>
                    <div>
                      <p className='text-sm font-semibold text-gray-800'>
                        {d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })}
                      </p>
                      <p className='text-xs text-gray-400 mt-0.5'>
                        {dayEntries.length === 1
                          ? `${fmtTime(dayEntries[0].start_time)} – ${fmtTime(dayEntries[0].end_time)}`
                          : `${dayEntries.length} Einträge`}
                      </p>
                    </div>
                    <div className='text-right'>
                      <p className='text-base font-bold text-gray-800'>{fmtH(dayTotal)}</p>
                      <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[dayEntries[0].status] ?? 'bg-gray-100 text-gray-500'}`}>
                        {STATUS_LABELS[dayEntries[0].status] ?? dayEntries[0].status}
                      </span>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </>
      )}
    </div>
  )
}
