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

const statusStyles: Record<RunStatus, string> = {
  active: 'bg-status-active-bg text-status-active border border-status-active/20',
  completed: 'bg-status-completed-bg text-status-completed border border-status-completed/20',
  failed: 'bg-status-failed-bg text-status-failed border border-status-failed/20',
}

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">
      {/* Hero */}
      <div className="relative text-center py-16 mb-8 overflow-hidden rounded-2xl bg-gradient-to-b from-surface-2 to-surface-0 border border-border-default">
        <img
          src="/favicon.svg"
          alt=""
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 opacity-[0.04] pointer-events-none select-none"
        />
        <div className="relative">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-text-primary mb-3">
            Another Nuzlocke Tracker
          </h1>
          <p className="text-lg text-text-secondary mb-8">Track your Nuzlocke runs with ease</p>
          <Link
            to="/runs/new"
            className="inline-block px-6 py-3 bg-accent-600 text-white rounded-lg font-medium text-lg hover:bg-accent-500 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 focus:ring-offset-surface-0 transition-all active:scale-[0.98]"
          >
            Start New Run
          </Link>
        </div>
      </div>

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

      {activeRun && (
        <div className="mb-8">
          <h2 className="text-xs font-medium text-text-tertiary uppercase tracking-wider mb-3">
            Continue Playing
          </h2>
          <Link
            to={`/runs/${activeRun.id}`}
            className="block bg-surface-1 rounded-xl border border-border-default hover:border-accent-400/30 transition-all hover:-translate-y-0.5 p-5"
          >
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-text-primary">{activeRun.name}</h3>
                <p className="text-sm text-text-secondary">
                  Started{' '}
                  {new Date(activeRun.startedAt).toLocaleDateString(undefined, {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                  })}
                </p>
              </div>
              <span className="text-accent-300 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-xs font-medium text-text-tertiary uppercase tracking-wider">
              Recent Runs
            </h2>
            <Link
              to="/runs"
              className="text-sm text-text-link hover:text-accent-200 transition-colors"
            >
              View all
            </Link>
          </div>
          <div className="space-y-2">
            {recentRuns.map((run) => (
              <Link
                key={run.id}
                to={`/runs/${run.id}`}
                className="block bg-surface-1 rounded-xl border border-border-default hover:border-border-accent transition-all hover:-translate-y-0.5 p-4"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-medium text-text-primary">{run.name}</h3>
                    <p className="text-xs text-text-secondary">
                      {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-text-secondary">
          No runs yet. Start your first Nuzlocke challenge above!
        </p>
      )}
    </div>
  )
}