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

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

export function GenlockeList() {
  const { data: genlockes, isLoading, error } = useGenlockes()

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold text-text-primary">Your Genlockes</h1>
        <Link
          to="/genlockes/new"
          className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 transition-colors"
        >
          Start New Genlocke
        </Link>
      </div>

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

      {error && (
        <div className="rounded-lg bg-status-failed-bg p-4 text-status-failed">
          Failed to load genlockes. Please try again.
        </div>
      )}

      {genlockes && genlockes.length === 0 && (
        <div className="text-center py-16">
          <p className="text-lg text-text-tertiary mb-4">
            No genlockes yet. Start your first Generation Locke!
          </p>
          <Link
            to="/genlockes/new"
            className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
          >
            Start New Genlocke
          </Link>
        </div>
      )}

      {genlockes && genlockes.length > 0 && (
        <div className="space-y-3">
          {genlockes.map((g) => (
            <Link
              key={g.id}
              to={`/genlockes/${g.id}`}
              className="block bg-surface-1 rounded-lg shadow hover:shadow-md transition-shadow p-4"
            >
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-lg font-semibold text-text-primary">{g.name}</h2>
                  <p className="text-sm text-text-tertiary">
                    {g.currentLegOrder !== null
                      ? `Leg ${g.currentLegOrder} / ${g.totalLegs}`
                      : `${g.completedLegs} / ${g.totalLegs} legs completed`}
                    {' \u00b7 '}
                    Started{' '}
                    {new Date(g.createdAt).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[g.status]}`}
                >
                  {g.status}
                </span>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}