import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Route as RootRoute } from './__root'
import { classifyHealth, prettyStatus, relativeTime } from '../lib/kanban'

export const Route = createFileRoute('/')({
  component: OverviewPage,
})

function KpiCard(props: { label: string; value: string; detail: string }) {
  return (
    <article className="kpi-card">
      <span>{props.label}</span>
      <strong>{props.value}</strong>
      <small>{props.detail}</small>
    </article>
  )
}

function OverviewPage() {
  const { t } = useTranslation()
  const { cards, error } = RootRoute.useLoaderData()
  const todo = cards.filter((card) => card.status === 'todo').length
  const doing = cards.filter((card) => card.status === 'doing').length
  const done = cards.filter((card) => card.status === 'done').length
  const newest = cards.at(-1) ?? null
  const health = classifyHealth(cards)

  return (
    <section className="page-grid">
      <div className="panel wide">
        <div className="section-heading">
          <h2>{t('overview.heading')}</h2>
          <p>{t('overview.sub')}</p>
        </div>
        {error ? (
          <div className="empty-state error-state">{t('overview.loadFailed', { error })}</div>
        ) : (
          <div className="kpi-grid">
            <KpiCard
              label={t('overview.kpi.boardHealth')}
              value={t(`health.${health}`)}
              detail={t('overview.kpi.boardHealthDetail')}
            />
            <KpiCard
              label={t('overview.kpi.backlog')}
              value={String(todo)}
              detail={t('overview.kpi.backlogDetail')}
            />
            <KpiCard
              label={t('overview.kpi.inProgress')}
              value={String(doing)}
              detail={t('overview.kpi.inProgressDetail')}
            />
            <KpiCard
              label={t('overview.kpi.done')}
              value={String(done)}
              detail={t('overview.kpi.doneDetail')}
            />
            <KpiCard
              label={t('overview.kpi.latest')}
              value={newest ? newest.title : t('overview.kpi.latestNone')}
              detail={
                newest
                  ? t('overview.kpi.latestDetail', {
                      status: prettyStatus(newest.status),
                      time: relativeTime(newest.createdAt),
                    })
                  : t('overview.kpi.latestEmptyDetail')
              }
            />
          </div>
        )}
      </div>

      <div className="panel">
        <div className="section-heading">
          <h2>{t('overview.executionModel.heading')}</h2>
          <p>{t('overview.executionModel.sub')}</p>
        </div>
        <ul className="bullet-list">
          {(t('overview.executionModel.bullets', { returnObjects: true }) as string[]).map(
            (bullet) => (
              <li key={bullet}>{bullet}</li>
            ),
          )}
        </ul>
      </div>

      <div className="panel">
        <div className="section-heading">
          <h2>{t('overview.nextScreens.heading')}</h2>
          <p>{t('overview.nextScreens.sub')}</p>
        </div>
        <ul className="bullet-list">
          {(t('overview.nextScreens.bullets', { returnObjects: true }) as string[]).map(
            (bullet) => (
              <li key={bullet}>{bullet}</li>
            ),
          )}
        </ul>
      </div>
    </section>
  )
}
