nuzlocke-tracker/frontend/src/pages/Home.tsx

import { Link } from 'react-router-dom'
import { useRuns } from '../hooks/useRuns'
import type { RunStatus } from '../types'

const statusStyles: Record<RunStatus, string> = {
  active:
    'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
  completed:
    'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
}

export function Home() {
  const { data: runs, isLoading } = useRuns()

  const activeRun = runs?.find((r) => r.status === 'active')
  const recentRuns = runs?.slice(0, 5)

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="text-center py-12">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">
          Nuzlocke Tracker
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
          Track your Nuzlocke runs with ease
        </p>
        <Link
          to="/runs/new"
          className="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg font-medium text-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
        >
          Start New Run
        </Link>
      </div>

      {isLoading && (
        <div className="flex items-center justify-center py-8">
          <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
        </div>
      )}

      {activeRun && (
        <div className="mb-8">
          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
            Continue Playing
          </h2>
          <Link
            to={`/runs/${activeRun.id}`}
            className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-5 border-l-4 border-green-500"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                  {activeRun.name}
                </h3>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Started{' '}
                  {new Date(activeRun.startedAt).toLocaleDateString(undefined, {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                  })}
                </p>
              </div>
              <span className="text-blue-600 dark:text-blue-400 font-medium text-sm">
                Resume &rarr;
              </span>
            </div>
          </Link>
        </div>
      )}

      {recentRuns && recentRuns.length > 0 && (
        <div>
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
              Recent Runs
            </h2>
            <Link
              to="/runs"
              className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
            >
              View all
            </Link>
          </div>
          <div className="space-y-2">
            {recentRuns.map((run) => (
              <Link
                key={run.id}
                to={`/runs/${run.id}`}
                className="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow p-4"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
                      {run.name}
                    </h3>
                    <p className="text-xs text-gray-500 dark:text-gray-400">
                      {new Date(run.startedAt).toLocaleDateString(undefined, {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                      })}
                    </p>
                  </div>
                  <span
                    className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${statusStyles[run.status]}`}
                  >
                    {run.status}
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {runs && runs.length === 0 && (
        <p className="text-center text-gray-500 dark:text-gray-400">
          No runs yet. Start your first Nuzlocke challenge above!
        </p>
      )}
    </div>
  )
}