import type { Metadata } from 'next'
import Link from 'next/link'
import { STATIONS, LINE_COLOURS, LINE_LABELS, STATUS_COLOURS, STATUS_LABELS } from '@/lib/stations'

export const metadata: Metadata = {
  title: 'Stations',
  description: 'All proposed Plymouth Metro stations — browse by line, status, and zone. Find out which stations are open today, which could reopen on existing track, and which are new proposals.',
}

const LINES = ['red','blue-east','blue-west','sherford','tamar'] as const

// Deduplicate stations by slug for display
function uniqueStations() {
  const seen = new Set<string>()
  return STATIONS.filter(s => {
    if (seen.has(s.slug)) return false
    seen.add(s.slug)
    return true
  })
}

export default function StationsPage() {
  const unique = uniqueStations()
  return (
    <>
      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="badge bg-white/15 text-white mb-4">Stations</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">All stations</h1>
            <p className="text-xl text-white/80 leading-relaxed">
              {unique.length} proposed stations across four lines. Click any station to see its full history, status, and what it would mean for the local community.
            </p>
          </div>
        </div>
      </section>

      <section className="py-14 bg-metro-light">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {LINES.map(line => {
            const lineStations = STATIONS.filter(s => s.line === line)
            const seen = new Set<string>()
            const display = lineStations.filter(s => { if(seen.has(s.slug)) return false; seen.add(s.slug); return true })
            return (
              <div key={line} className="mb-12">
                <div className="flex items-center gap-3 mb-5">
                  <span className="w-4 h-4 rounded-full flex-shrink-0" style={{ background: LINE_COLOURS[line] }} />
                  <h2 className="text-xl font-bold text-metro-navy">{LINE_LABELS[line]}</h2>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  {display.map(station => (
                    <Link key={station.id} href={`/stations/${station.slug}`}
                      className="card hover:border-metro-sky transition-colors group">
                      <div className="flex items-start gap-3">
                        <div className="w-4 h-4 rounded-full flex-shrink-0 mt-0.5 border-2"
                             style={{ background: STATUS_COLOURS[station.status], borderColor: LINE_COLOURS[line] }} />
                        <div className="min-w-0">
                          <p className="font-semibold text-metro-navy group-hover:text-metro-sky transition-colors">
                            {station.name}
                            {station.interchange && <span className="ml-2 text-[10px] font-bold text-metro-blue bg-metro-light px-2 py-0.5 rounded">Interchange</span>}
                          </p>
                          <p className="text-xs mt-1" style={{ color: STATUS_COLOURS[station.status] }}>
                            {STATUS_LABELS[station.status]}
                            {station.closedYear ? ` (${station.closedYear})` : ''}
                          </p>
                          <p className="text-xs text-metro-muted mt-0.5">Zone {station.zone}</p>
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            )
          })}
        </div>
      </section>
    </>
  )
}