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

export const metadata: Metadata = {
  title: 'Route Map',
  description:
    'Plymouth Metro interactive route map — five lines colour-coded by infrastructure status. See which stations are open today, which could reopen, and which are new proposals.',
}

const MetroMap = dynamic(() => import('@/components/MetroMap'), {
  ssr: false,
  loading: () => (
    <div className="w-full rounded-2xl bg-metro-light border border-metro-border flex items-center justify-center"
         style={{ height: '560px' }}>
      <div className="flex flex-col items-center gap-3 text-metro-muted">
        <svg className="animate-spin w-8 h-8 text-metro-sky" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        <span className="text-sm">Loading map…</span>
      </div>
    </div>
  ),
})

const LINES = ['red','blue-east','blue-west','sherford','tamar'] as const
const STATUSES = ['open','disused-station','disused-trackbed','new-build'] as const

export default function MapPage() {

  const statusCounts = STATUSES.map(s => ({
    status: s,
    count: STATIONS.filter(st => st.status === s).length,
  }))

  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">Route Map</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">Explore the proposed network</h1>
            <p className="text-xl text-white/80 leading-relaxed">
              Five lines colour-coded by infrastructure status. Click any station to see whether it is open today, could reopen on existing track, or would need new construction.
            </p>
          </div>
        </div>
      </section>

      <section className="py-10 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

          {/* Legend */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">
            <div>
              <p className="text-xs font-semibold text-metro-muted uppercase tracking-wider mb-3">Metro lines</p>
              <div className="flex flex-col gap-2">
                {LINES.map(line => (
                  <div key={line} className="flex items-center gap-3">
                    <span className="w-9 h-1.5 rounded-full flex-shrink-0" style={{ background: LINE_COLOURS[line] }}/>
                    <span className="text-xs font-medium text-metro-navy">{LINE_LABELS[line]}</span>
                  </div>
                ))}
                <div className="flex items-center gap-3">
                  <span className="w-9 h-0 flex-shrink-0 border-t-2 border-dashed border-purple-500 opacity-75"/>
                  <span className="text-xs text-metro-muted">Dashed = reinstated trackbed (Bere Alston–Tavistock)</span>
                </div>
              </div>
            </div>
            <div>
              <p className="text-xs font-semibold text-metro-muted uppercase tracking-wider mb-3">Station dot colour = infrastructure status</p>
              <div className="flex flex-col gap-2">
                {STATUSES.map(s => (
                  <div key={s} className="flex items-center gap-3">
                    <span className="w-3 h-3 rounded-full flex-shrink-0 border border-white shadow-sm"
                          style={{ background: STATUS_COLOURS[s] }}/>
                    <span className="text-xs text-metro-muted">{STATUS_LABELS[s]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <MetroMap height="580px"/>

          {/* Status summary */}
          <div className="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-4">
            {statusCounts.map(({ status, count }) => (
              <div key={status} className="card text-center py-4">
                <div className="flex items-center justify-center gap-2 mb-1">
                  <span className="w-3 h-3 rounded-full" style={{ background: STATUS_COLOURS[status] }}/>
                  <span className="text-2xl font-black" style={{ color: STATUS_COLOURS[status] }}>{count}</span>
                </div>
                <p className="text-xs text-metro-muted leading-snug">{STATUS_LABELS[status]}</p>
              </div>
            ))}
          </div>

          {/* Key notes */}
          <div className="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}
                   className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
              </svg>
              <div>
                <p className="font-semibold text-amber-900 text-sm mb-1">Easy wins — active track, no station</p>
                <p className="text-xs text-amber-800 leading-relaxed">
                  Mutley Plain, Bittaford, Wrangaton, Plympton, and Laira all have the active Exeter–Plymouth mainline running through them today. Reopening halts at these locations is far cheaper than new-build — the track is already there.
                </p>
              </div>
            </div>
            <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex gap-3">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}
                   className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
              </svg>
              <div>
                <p className="font-semibold text-purple-900 text-sm mb-1">Tamar Line &amp; Sherford Branch</p>
                <p className="text-xs text-purple-800 leading-relaxed">
                  The Tamar Line uses the existing Tamar Valley Line to Bere Alston (fully open today). The dashed section to Tavistock follows an intact trackbed — government-backed reinstatement scheme active. The Sherford Branch branches south from Plympton, roughly following the former Turnchapel/Yealmpton corridor toward Plymstock.
                </p>
              </div>
            </div>
          </div>

          <p className="text-xs text-metro-muted mt-3">
            Map © <a href="https://www.openstreetmap.org/copyright" className="underline" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors.
            Station locations indicative. Status based on historical research — subject to engineering verification.
          </p>
        </div>
      </section>

      {/* Station list by line */}
      <section className="py-14 bg-metro-light">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-metro-navy mb-2">Full station list</h2>
          <p className="text-metro-muted text-sm mb-8">
            Dot colour shows infrastructure status. Click any station on the map for full details and historical notes.
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {LINES.map(line => {
              const lineStations = STATIONS.filter(s => s.line === line)
              return (
                <div key={line}>
                  <div className="flex items-center gap-2 mb-4">
                    <span className="w-4 h-4 rounded-full flex-shrink-0" style={{ background: LINE_COLOURS[line] }}/>
                    <h3 className="font-bold text-metro-navy text-xs leading-snug">{LINE_LABELS[line]}</h3>
                  </div>
                  <div className="space-y-1.5">
                    {lineStations.map(station => (
                      <div key={station.id}
                        className="flex items-start gap-2.5 bg-white rounded-lg px-3 py-2.5 border border-metro-border">
                        <div className="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 border-2"
                             style={{
                               backgroundColor: STATUS_COLOURS[station.status],
                               borderColor: LINE_COLOURS[line],
                             }}/>
                        <div className="min-w-0">
                          <p className="font-medium text-metro-navy text-xs leading-snug">
                            {station.name}
                            {station.interchange && (
                              <span className="ml-1 inline-block w-2 h-2 rounded-full bg-metro-sky align-middle" title="Interchange"/>
                            )}
                          </p>
                          <p className="text-[10px] mt-0.5 leading-tight" style={{ color: STATUS_COLOURS[station.status] }}>
                            {station.status === 'open' ? 'Open today'
                              : station.status === 'disused-station' ? `Track active (closed ${station.closedYear ?? ''})`
                              : station.status === 'disused-trackbed' ? `Disused (${station.closedYear ?? ''})`
                              : 'New build'}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      <section className="py-14 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="text-2xl font-bold text-metro-navy mb-3">Help make this happen</h2>
          <p className="text-metro-muted mb-6">
            Several of these stations could reopen quickly and cheaply — the track is already there. Sign the petition to build the public mandate that unlocks funding.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/support" className="btn-primary px-10 py-4" style={{color:"#ffffff"}}>Sign the Petition</Link>
            <Link href="/about" className="btn-secondary px-10 py-4">About the Campaign</Link>
          </div>
        </div>
      </section>
    </>
  )
}