import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Route as RootRoute } from './__root'

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

function AutomationsPage() {
  const { t } = useTranslation()
  const { cards } = RootRoute.useLoaderData()
  const total = cards.length
  const active = cards.filter((card) => card.status === 'doing').length

  const rails = [
    {
      key: 'onboarding',
      state: total > 0 ? 'active' : 'idle',
    },
    {
      key: 'queue',
      state: active > 0 ? 'warming' : 'standby',
    },
    {
      key: 'surface',
      state: 'ready',
    },
  ] as const

  return (
    <section className="page-grid">
      <div className="panel wide">
        <div className="section-heading">
          <h2>{t('automations.heading')}</h2>
          <p>{t('automations.sub')}</p>
        </div>
        <div className="automation-list">
          {rails.map((rail) => (
            <article key={rail.key} className="automation-card">
              <div className="automation-topline">
                <h3>{t(`automations.rails.${rail.key}.name`)}</h3>
                <span data-state={rail.state}>{t(`automations.states.${rail.state}`)}</span>
              </div>
              <p>{t(`automations.rails.${rail.key}.detail`)}</p>
            </article>
          ))}
        </div>
      </div>

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