import { ReactNode } from 'react'
import type { ParentalLeaveFetch } from '@/types'

export interface ParentalLeaveBreakdownProps {
  data: ParentalLeaveFetch | null
}

export function ParentalLeaveBreakdown({ data }: ParentalLeaveBreakdownProps): ReactNode {
  if (!data) {
    return (
      <div data-testid="parental-leave-breakdown" className="parental-leave-breakdown">
        <p className="parental-leave-breakdown__empty">
          Ingen data hämtad ännu — tryck på Hämta från Försäkringskassan.
        </p>
      </div>
    )
  }

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('sv-SE')
  }

  const sourceLabel = data.source === 'scraped' ? 'Hämtad från Försäkringskassan' : 'Manuellt angiven'

  return (
    <div data-testid="parental-leave-breakdown" className="parental-leave-breakdown">
      <div className="parental-leave-breakdown__section">
        <table className="parental-leave-breakdown__table">
          <thead>
            <tr>
              <th>Typ</th>
              <th>Återstående</th>
              <th>Totalt</th>
            </tr>
          </thead>
          <tbody>
            <tr data-testid="breakdown-reserved">
              <td>Reserverade dagar</td>
              <td>{data.reservedDaysLeft}</td>
              <td>{data.reservedDaysTotal}</td>
            </tr>
            <tr data-testid="breakdown-transferable">
              <td>Övergripbara dagar</td>
              <td>{data.transferableDaysLeft}</td>
              <td>—</td>
            </tr>
            <tr data-testid="breakdown-dubbeldagar">
              <td>Dubbeldagar kvar</td>
              <td>{data.dubbeldagarLeft}</td>
              <td>—</td>
            </tr>
            {data.tierData && (
              <>
                <tr data-testid="breakdown-sjukpenning">
                  <td>Sjukpenning</td>
                  <td>{data.tierData.sjukpenningLeft}</td>
                  <td>{data.tierData.sjukpenningTotal}</td>
                </tr>
                <tr data-testid="breakdown-lagsta-niva">
                  <td>Lägsta nivå</td>
                  <td>{data.tierData.lagstaNivaLeft}</td>
                  <td>{data.tierData.lagstaNivaTotal}</td>
                </tr>
              </>
            )}
          </tbody>
        </table>
      </div>

      <div className="parental-leave-breakdown__provenance">
        <small>
          {sourceLabel} {formatDate(data.fetchedAt)}
        </small>
      </div>
    </div>
  )
}