import { Link, useNavigate } from 'react-router-dom'
import { ArrowRight, BarChart3, CheckCircle2, ChevronRight, Clock, ShieldCheck } from 'lucide-react'
import FinalistCard from '../components/FinalistCard'
import ProviderButton from '../components/ProviderButton'
import { FLOW_STEPS, HERO_STATS, TRUST_POINTS } from '../data/seed'
import { useAuth } from '../context/AuthContext'
import { usePolls } from '../context/PollContext'

export default function Home() {
  const { user, login } = useAuth()
  const { polls } = usePolls()
  const navigate = useNavigate()
  const featured = polls[0]

  const handleProvider = (provider) => {
    login(provider)
    navigate('/dashboard')
  }

  return (
    <div>
      <section className="mesh-surface relative overflow-hidden border-b border-brand-200/70 bg-gradient-to-b from-brand-50 via-[#f7f3ec] to-[#fcfbf8]">
        <div className="pointer-events-none absolute left-[-12rem] top-[-8rem] h-[24rem] w-[24rem] rounded-full bg-brand-200/50 blur-3xl" />
        <div className="pointer-events-none absolute bottom-[-8rem] right-[-12rem] h-[24rem] w-[24rem] rounded-full bg-accent-200/40 blur-3xl" />

        <div className="relative mx-auto grid max-w-7xl gap-10 px-4 pb-14 pt-10 sm:px-6 lg:grid-cols-12 lg:pb-20 lg:pt-16 lg:px-8">
          <div className="animate-fade-up lg:col-span-7">
            <div className="inline-flex items-center gap-2 rounded-full border border-brand-300 bg-white/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-brand-600">
              <span className="h-1.5 w-1.5 rounded-full bg-brand-500" />
              Final window open
            </div>
            <h1 className="brand-heading mt-5 text-4xl font-extrabold leading-[1.02] tracking-tight text-brand-900 sm:text-5xl lg:text-6xl">
              The Public Ballot for
              <span className="mt-2 block text-brand-600">Committee Leadership</span>
            </h1>
            <p className="mt-5 max-w-xl text-base leading-relaxed text-brand-800/80 sm:text-lg">
              One vote. One verified identity. One live leaderboard everyone can audit in real time.
            </p>

            {!user && (
              <div className="mt-7 grid gap-3 sm:max-w-xl sm:grid-cols-2">
                <ProviderButton provider="instagram" onClick={handleProvider} />
                <ProviderButton provider="twitter" onClick={handleProvider} />
                <div className="sm:col-span-2">
                  <ProviderButton provider="microsoft" onClick={handleProvider} />
                </div>
              </div>
            )}

            <div className="mt-5 flex flex-wrap gap-3">
              <Link
                to="/dashboard"
                className="inline-flex items-center gap-2 rounded-full bg-[#1a1a1a] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[#242424]"
              >
                Open Live Rankings <ArrowRight className="h-4 w-4" />
              </Link>
              <a
                href="#how-it-works"
                className="inline-flex items-center rounded-full border border-brand-200 bg-white px-5 py-3 text-sm font-semibold text-brand-800 transition hover:bg-brand-50"
              >
                How Voting Works
              </a>
            </div>

            <div className="mt-8 grid max-w-2xl grid-cols-3 gap-3">
              {HERO_STATS.map((stat) => (
                <div key={stat.label} className="rounded-2xl border border-brand-100 bg-white p-4 text-center shadow-sm">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-brand-500">{stat.label}</p>
                  <p className="brand-heading mt-1 text-xl font-bold text-brand-900">{stat.value}</p>
                </div>
              ))}
            </div>
          </div>

          <aside className="animate-float-soft lg:col-span-5">
            <div className="overflow-hidden rounded-[2rem] border border-brand-200 bg-brand-900 text-white shadow-xl shadow-brand-900/20">
              <div className="border-b border-white/10 px-6 py-5">
                <p className="text-xs tracking-[0.16em] text-brand-200">Votetech COMMAND CENTER</p>
                <h2 className="brand-heading mt-1 text-2xl font-bold">Finals Voting Bulletin</h2>
              </div>
              <div className="space-y-4 px-6 py-5">
                <div className="grid grid-cols-3 gap-3">
                  <div className="flex flex-col items-center gap-1.5 text-center">
                    <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10">
                      <Clock className="h-4 w-4 text-brand-200" />
                    </span>
                    <p className="text-[11px] text-brand-200">Sync: 60s</p>
                  </div>
                  <div className="flex flex-col items-center gap-1.5 text-center">
                    <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10">
                      <CheckCircle2 className="h-4 w-4 text-emerald-400" />
                    </span>
                    <p className="text-[11px] text-brand-200">Verified</p>
                  </div>
                  <Link to="/dashboard" className="flex flex-col items-center gap-1.5 text-center">
                    <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10">
                      <BarChart3 className="h-4 w-4 text-brand-200" />
                    </span>
                    <p className="text-[11px] text-brand-200">Live Board</p>
                  </Link>
                </div>

                <div className="flex items-start gap-3 rounded-2xl bg-white/5 p-4">
                  <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
                  <p className="text-sm text-brand-100/90">
                    Tallies are immutable once cast and visible to all committee members in real time.
                  </p>
                </div>

                <div className="rounded-2xl bg-white/5 p-4">
                  <p className="text-xs uppercase tracking-[0.15em] text-brand-300">Tonight&apos;s Cycle</p>
                  <div className="mt-2 h-2 overflow-hidden rounded-full bg-white/10">
                    <div className="h-full w-[72%] rounded-full bg-brand-300" />
                  </div>
                  <p className="mt-2 text-xs text-brand-200">72% of expected participation reached.</p>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <div className="bg-brand-900 py-4">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-3 gap-y-1 px-4 text-center text-[11px] font-semibold uppercase tracking-[0.14em] text-brand-200 sm:px-6 lg:px-8">
          {TRUST_POINTS.map((point, index) => (
            <span key={point} className="inline-flex items-center gap-3">
              {index > 0 && <span className="h-1 w-1 rounded-full bg-brand-500" />}
              {point}
            </span>
          ))}
        </div>
      </div>

      <section id="finalists" className="bg-[#fcfbf8] py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <h2 className="brand-heading text-3xl font-bold text-brand-900">Finalist Spotlight</h2>
              <p className="mt-1 text-sm text-brand-700/70">Three leading finalists gaining momentum in the public ballot.</p>
            </div>
            <Link
              to="/dashboard"
              className="group inline-flex items-center gap-1 text-sm font-semibold text-brand-800 transition hover:text-brand-900"
            >
              View All
              <ChevronRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
            </Link>
          </div>

          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {featured?.options.map((option, index) => (
              <FinalistCard
                key={option.id}
                option={option}
                rank={index + 1}
                onSelect={() => navigate(`/poll/${featured.id}`)}
              />
            ))}
          </div>
        </div>
      </section>

      <section id="how-it-works" className="bg-[#fcfbf8] py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="rounded-3xl border border-brand-200 bg-brand-50 p-6 sm:p-10">
            <h2 className="brand-heading text-2xl font-bold text-brand-900">How The Votetech Finals Flow</h2>
            <p className="mt-2 max-w-2xl text-sm text-brand-800/80">
              The process is designed to be simple for voters and strict for vote integrity.
            </p>
            <div className="mt-8 grid gap-5 md:grid-cols-3">
              {FLOW_STEPS.map((item) => (
                <div key={item.step} className="rounded-2xl border border-brand-200 bg-white p-5 shadow-sm">
                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-brand-500">{item.step}</p>
                  <h3 className="brand-heading mt-2 text-lg font-bold text-brand-900">{item.title}</h3>
                  <p className="mt-2 text-sm text-brand-800/80">{item.detail}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
