import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import { api } from '../api/client'
import { Spinner } from '../components/Spinner'
import { Layout } from '../components/Layout'

interface UserOut {
  id: string
  first_name: string
  last_name: string
  email: string
  role: string
  company_id: string
}

interface EmployeeDashboard {
  today_open: boolean
  today_start: string | null
  today_hours_so_far: number | null
  week_hours_worked: number
  week_hours_expected: number
  week_overtime: number
  vacation_remaining_days: number | null
  vacation_used_days: number
  vacation_entitled_days: number
  pending_absences: number
  overtime_balance_hours: number | null
  schedule_name: string | null
}

interface UpcomingAbsence {
  user_name: string
  absence_type: string
  start_date: string
  end_date: string
  working_days: number
}

interface CompanyDashboard {
  total_employees: number
  active_today: number
  attendance_rate: number
  month_hours_worked: number
  month_hours_expected: number
  month_overtime: number
  pending_time_approvals: number
  pending_absence_approvals: number
  upcoming_absences: UpcomingAbsence[]
}

interface TeamMemberStatus {
  user_id: string
  user_name: string
  department: string | null
  status: string  // "present" | "on_leave" | "absent"
  absence_type: string | null
  time_in: string | null
  hours_today: number | null
}

interface TeamDashboard {
  present_count: number
  on_leave_count: number
  absent_count: number
  pending_time_approvals: number
  pending_absence_approvals: number
  members: TeamMemberStatus[]
}

function StatCard({
  label, value, sub, highlight,
}: {
  label: string
  value: string | number
  sub?: string
  highlight?: 'green' | 'red' | 'yellow'
}) {
  const colors = {
    green:  'border-l-4 border-green-400',
    red:    'border-l-4 border-red-400',
    yellow: 'border-l-4 border-yellow-400',
  }
  return (
    <div className={`bg-white rounded-xl shadow-sm p-4 ${highlight ? colors[highlight] : 'border border-gray-100'}`}>
      <p className='text-xs text-gray-500 uppercase tracking-wide font-medium'>{label}</p>
      <p className='text-2xl font-bold text-gray-800 mt-1'>{value}</p>
      {sub && <p className='text-xs text-gray-400 mt-0.5'>{sub}</p>}
    </div>
  )
}

export function DashboardPage() {
  const { logout } = useAuth()
  const [user, setUser]         = useState<UserOut | null>(null)
  const [emp, setEmp]           = useState<EmployeeDashboard | null>(null)
  const [team, setTeam]         = useState<TeamDashboard | null>(null)
  const [comp, setComp]         = useState<CompanyDashboard | null>(null)
  const [loading, setLoading]   = useState(true)
  const [error, setError]       = useState('')

  useEffect(() => {
    async function load() {
      try {
        const [me, empDash] = await Promise.all([
          api.get<UserOut>('/auth/me'),
          api.get<EmployeeDashboard>('/dashboard/me'),
        ])
        setUser(me)
        setEmp(empDash)

        const managerRoles = ['MANAGER', 'HR', 'COMPANY_ADMIN', 'SUPER_ADMIN']
        const adminRoles = ['COMPANY_ADMIN', 'SUPER_ADMIN']
        if (managerRoles.includes(me.role)) {
          try {
            setTeam(await api.get<TeamDashboard>('/dashboard/team'))
          } catch {
            // kein Manager-Zugriff – still ignorieren
          }
        }
        if (adminRoles.includes(me.role)) {
          try {
            setComp(await api.get<CompanyDashboard>('/dashboard/company'))
          } catch {
            // kein Admin-Zugriff – still ignorieren
          }
        }
      } catch (e: unknown) {
        setError(e instanceof Error ? e.message : 'Fehler beim Laden')
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [])

  if (loading) {
    return (
      <div className='min-h-screen bg-gray-50 flex items-center justify-center'>
        <Spinner />
      </div>
    )
  }

  if (error) {
    return (
      <div className='min-h-screen bg-gray-50 flex items-center justify-center'>
        <div className='bg-white rounded-xl shadow p-6 text-center'>
          <p className='text-red-600 font-medium'>{error}</p>
          <button onClick={logout} className='mt-4 text-sm text-gray-500 underline'>
            Abmelden
          </button>
        </div>
      </div>
    )
  }

  const overtimePositive = (emp?.week_overtime ?? 0) >= 0

  return (
    <Layout userRole={user?.role ?? ''} userName={`${user?.first_name ?? ''} ${user?.last_name ?? ''}`}>
      <div className='space-y-8'>

        {/* Heutiger Status */}
        {emp && (
          <div className={`flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium ${
            emp.today_open
              ? 'bg-green-50 text-green-700 border border-green-200'
              : 'bg-gray-100 text-gray-600 border border-gray-200'
          }`}>
            <span className={`h-2.5 w-2.5 rounded-full flex-shrink-0 ${
              emp.today_open ? 'bg-green-500 animate-pulse' : 'bg-gray-400'
            }`} />
            {emp.today_open
              ? <>
                  Heute eingestempelt um {emp.today_start?.slice(0, 5) ?? '—'}
                  {emp.today_hours_so_far != null && (
                    <span className='text-green-600 font-semibold ml-1'>
                      · {emp.today_hours_so_far.toFixed(1)} h bisher
                    </span>
                  )}
                </>
              : 'Heute noch nicht eingestempelt'
            }
          </div>
        )}

        {/* Meine Übersicht */}
        {emp && (
          <section>
            <h2 className='text-base font-semibold text-gray-700 mb-3'>
              Meine Übersicht
              {emp.schedule_name && (
                <span className='ml-2 text-xs font-normal text-gray-400'>
                  · {emp.schedule_name}
                </span>
              )}
            </h2>
            <div className='grid grid-cols-2 sm:grid-cols-4 gap-3'>
              <StatCard
                label='Diese Woche'
                value={`${emp.week_hours_worked.toFixed(1)} h`}
                sub={`von ${emp.week_hours_expected.toFixed(0)} h Soll`}
              />
              <StatCard
                label='Überstunden'
                value={`${overtimePositive ? '+' : ''}${emp.week_overtime.toFixed(1)} h`}
                highlight={overtimePositive ? 'green' : 'red'}
              />
              <StatCard
                label='Urlaub verbleibend'
                value={emp.vacation_remaining_days ?? '—'}
                sub={`${emp.vacation_used_days} genutzt / ${emp.vacation_entitled_days} Tage`}
              />
              {emp.overtime_balance_hours != null && (
                <StatCard
                  label='Überstunden-Guthaben'
                  value={`${emp.overtime_balance_hours >= 0 ? '+' : ''}${emp.overtime_balance_hours.toFixed(1)} h`}
                  sub='verfügbar für Freizeitausgleich'
                  highlight={emp.overtime_balance_hours > 0 ? 'green' : undefined}
                />
              )}
              {emp.pending_absences > 0 && (
                <StatCard
                  label='Offene Anträge'
                  value={emp.pending_absences}
                  highlight='yellow'
                />
              )}
            </div>
          </section>
        )}

        {/* Team-Dashboard (Manager/HR) */}
        {team && (
          <section>
            <h2 className='text-base font-semibold text-gray-700 mb-3'>Team heute</h2>

            <div className='grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4'>
              <StatCard label='Anwesend' value={team.present_count} highlight='green' />
              <StatCard label='Abwesend (Urlaub/Krank)' value={team.on_leave_count} />
              <StatCard label='Nicht eingestempelt' value={team.absent_count}
                highlight={team.absent_count > 0 ? 'yellow' : undefined} />
              <StatCard label='Mitarbeiter' value={team.members.length} />
            </div>

            {/* Ausstehende Genehmigungen */}
            {(team.pending_time_approvals > 0 || team.pending_absence_approvals > 0) && (
              <div className='flex flex-wrap gap-2 mb-4'>
                {team.pending_time_approvals > 0 && (
                  <Link to='/time?status=pending' className='bg-yellow-100 text-yellow-800 text-xs px-3 py-1.5 rounded-full font-medium hover:bg-yellow-200 transition-colors'>
                    ⏳ {team.pending_time_approvals} Zeiteinträge warten auf Genehmigung →
                  </Link>
                )}
                {team.pending_absence_approvals > 0 && (
                  <Link to='/absences?status=pending' className='bg-yellow-100 text-yellow-800 text-xs px-3 py-1.5 rounded-full font-medium hover:bg-yellow-200 transition-colors'>
                    ⏳ {team.pending_absence_approvals} Abwesenheitsanträge warten auf Genehmigung →
                  </Link>
                )}
              </div>
            )}

            {team.members.length > 0 && (
              <div className='bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden'>
                <div className='overflow-x-auto'>
                  <table className='w-full text-sm'>
                    <thead className='bg-gray-50 text-gray-500 text-xs uppercase'>
                      <tr>
                        {['Mitarbeiter', 'Abteilung', 'Status', 'Seit', 'Heute'].map(h => (
                          <th key={h} className='px-4 py-2.5 text-left font-medium'>{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody className='divide-y divide-gray-100'>
                      {team.members.map(m => {
                        const badge = m.status === 'present'
                          ? { c: 'bg-green-100 text-green-700', t: 'Anwesend' }
                          : m.status === 'on_leave'
                            ? { c: 'bg-blue-100 text-blue-700', t: m.absence_type ?? 'Abwesend' }
                            : { c: 'bg-gray-100 text-gray-500', t: 'Nicht da' }
                        return (
                          <tr key={m.user_id} className='hover:bg-gray-50 transition-colors'>
                            <td className='px-4 py-2.5 font-medium text-gray-800'>{m.user_name}</td>
                            <td className='px-4 py-2.5 text-gray-500'>{m.department ?? '—'}</td>
                            <td className='px-4 py-2.5'>
                              <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${badge.c}`}>{badge.t}</span>
                            </td>
                            <td className='px-4 py-2.5 text-gray-600 font-mono text-xs'>{m.time_in?.slice(0, 5) ?? '—'}</td>
                            <td className='px-4 py-2.5 text-gray-600'>{m.hours_today != null ? `${m.hours_today.toFixed(1)} h` : '—'}</td>
                          </tr>
                        )
                      })}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </section>
        )}

        {/* Unternehmens-Dashboard (nur Admin) */}
        {comp && (
          <section>
            <h2 className='text-base font-semibold text-gray-700 mb-3'>Unternehmensübersicht</h2>

            <div className='grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4'>
              <StatCard label='Mitarbeiter' value={comp.total_employees} />
              <StatCard
                label='Heute anwesend'
                value={comp.active_today}
                sub={`${comp.attendance_rate.toFixed(0)} % Anwesenheitsrate`}
                highlight={comp.attendance_rate >= 70 ? 'green' : 'yellow'}
              />
              <StatCard
                label='Monat gearbeitet'
                value={`${comp.month_hours_worked.toFixed(0)} h`}
                sub={`von ${comp.month_hours_expected.toFixed(0)} h Soll`}
              />
              <StatCard
                label='Monat Überstunden'
                value={`${comp.month_overtime >= 0 ? '+' : ''}${comp.month_overtime.toFixed(1)} h`}
                highlight={comp.month_overtime >= 0 ? 'green' : 'red'}
              />
            </div>

            {/* Ausstehende Genehmigungen */}
            {(comp.pending_time_approvals > 0 || comp.pending_absence_approvals > 0) && (
              <div className='flex flex-wrap gap-2 mb-4'>
                {comp.pending_time_approvals > 0 && (
                  <Link to='/time?status=pending' className='bg-yellow-100 text-yellow-800 text-xs px-3 py-1.5 rounded-full font-medium hover:bg-yellow-200 transition-colors'>
                    ⏳ {comp.pending_time_approvals} Zeiteinträge warten auf Genehmigung →
                  </Link>
                )}
                {comp.pending_absence_approvals > 0 && (
                  <Link to='/absences?status=pending' className='bg-yellow-100 text-yellow-800 text-xs px-3 py-1.5 rounded-full font-medium hover:bg-yellow-200 transition-colors'>
                    ⏳ {comp.pending_absence_approvals} Abwesenheitsanträge warten auf Genehmigung →
                  </Link>
                )}
              </div>
            )}

            {/* Kommende Abwesenheiten */}
            {comp.upcoming_absences.length > 0 && (
              <div className='bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden'>
                <div className='px-4 py-3 border-b border-gray-100'>
                  <h3 className='text-sm font-semibold text-gray-700'>
                    Kommende Abwesenheiten (nächste 14 Tage)
                  </h3>
                </div>
                <div className='overflow-x-auto'>
                  <table className='w-full text-sm'>
                    <thead className='bg-gray-50 text-gray-500 text-xs uppercase'>
                      <tr>
                        {['Mitarbeiter', 'Typ', 'Von', 'Bis', 'Tage'].map(h => (
                          <th key={h} className='px-4 py-2.5 text-left font-medium'>{h}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody className='divide-y divide-gray-100'>
                      {comp.upcoming_absences.map((a, i) => (
                        <tr key={i} className='hover:bg-gray-50 transition-colors'>
                          <td className='px-4 py-2.5 font-medium text-gray-800'>{a.user_name}</td>
                          <td className='px-4 py-2.5 text-gray-600'>{a.absence_type}</td>
                          <td className='px-4 py-2.5 text-gray-600'>{a.start_date}</td>
                          <td className='px-4 py-2.5 text-gray-600'>{a.end_date}</td>
                          <td className='px-4 py-2.5 text-gray-600'>{a.working_days}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </section>
        )}

        {/* API Docs Link (nur dev) */}
        <div className='text-center pt-4 border-t border-gray-200'>
          <a
            href='/docs'
            target='_blank'
            rel='noreferrer'
            className='text-xs text-gray-400 hover:text-blue-500 transition-colors'
          >
            API Dokumentation →
          </a>
        </div>

      </div>
    </Layout>
  )
}
