import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Search, CalendarDays, MapPin, ShieldCheck, Plane, Ticket, Users, Star, ArrowRight, Clock, CheckCircle2 } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const mockEvents = [
  {
    id: "xs2-001",
    competition: "Premier League",
    homeTeam: "Manchester United",
    awayTeam: "Manchester City",
    date: "2026-09-19",
    time: "15:00",
    venue: "Old Trafford",
    city: "Manchester",
    image: "https://images.unsplash.com/photo-1522778119026-d647f0596c20?q=80&w=1200&auto=format&fit=crop",
    fromPrice: 395,
    availability: "Limited",
    categories: [
      { id: "cat-1", name: "Longside Premium", supplierNet: 310, sellPrice: 395, seatsTogether: 2 },
      { id: "cat-2", name: "Hospitality Lounge", supplierNet: 575, sellPrice: 695, seatsTogether: 4 },
      { id: "cat-3", name: "Executive Package", supplierNet: 925, sellPrice: 1095, seatsTogether: 4 },
    ],
  },
  {
    id: "xs2-002",
    competition: "Premier League",
    homeTeam: "Liverpool",
    awayTeam: "Arsenal",
    date: "2026-10-03",
    time: "17:30",
    venue: "Anfield",
    city: "Liverpool",
    image: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?q=80&w=1200&auto=format&fit=crop",
    fromPrice: 445,
    availability: "Available",
    categories: [
      { id: "cat-4", name: "Museum & Matchday", supplierNet: 355, sellPrice: 445, seatsTogether: 2 },
      { id: "cat-5", name: "Hospitality Premium", supplierNet: 690, sellPrice: 825, seatsTogether: 4 },
    ],
  },
  {
    id: "xs2-003",
    competition: "Non-League Experience",
    homeTeam: "Macclesfield FC",
    awayTeam: "Chester FC",
    date: "2026-08-29",
    time: "15:00",
    venue: "Leasing.com Stadium",
    city: "Macclesfield",
    image: "https://images.unsplash.com/photo-1551958219-acbc608c6377?q=80&w=1200&auto=format&fit=crop",
    fromPrice: 75,
    availability: "Available",
    categories: [
      { id: "cat-6", name: "Match Ticket", supplierNet: 45, sellPrice: 75, seatsTogether: 6 },
      { id: "cat-7", name: "Bar 27 Hospitality", supplierNet: 115, sellPrice: 175, seatsTogether: 6 },
    ],
  },
];

function formatDate(value) {
  return new Date(value).toLocaleDateString("nl-NL", {
    weekday: "short",
    day: "numeric",
    month: "short",
    year: "numeric",
  });
}

export default function TftaTicketApiPrototype() {
  const [query, setQuery] = useState("");
  const [selectedEvent, setSelectedEvent] = useState(mockEvents[0]);
  const [selectedCategory, setSelectedCategory] = useState(mockEvents[0].categories[0]);
  const [quantity, setQuantity] = useState(2);

  const filteredEvents = useMemo(() => {
    const q = query.toLowerCase();
    return mockEvents.filter((event) =>
      `${event.homeTeam} ${event.awayTeam} ${event.city} ${event.competition}`.toLowerCase().includes(q)
    );
  }, [query]);

  const total = selectedCategory.sellPrice * quantity;
  const estimatedMargin = (selectedCategory.sellPrice - selectedCategory.supplierNet) * quantity;

  function selectEvent(event) {
    setSelectedEvent(event);
    setSelectedCategory(event.categories[0]);
    setQuantity(2);
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(59,130,246,0.35),transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(234,179,8,0.18),transparent_35%)]" />
        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 py-12 lg:grid-cols-[1.1fr_0.9fr] lg:py-20">
          <motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm text-white/80 backdrop-blur">
              <ShieldCheck className="h-4 w-4" />
              API powered football hospitality
            </div>
            <h1 className="max-w-4xl text-4xl font-semibold tracking-tight md:text-6xl">
              The Football Travel Agency
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-8 text-white/75">
              Een premium ticket- en hospitalitysite waarbij het actuele aanbod via de leverancier-API wordt opgehaald, terwijl TFTA de klantreis, marge, service en beleving beheert.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button className="rounded-2xl px-6 py-6 text-base">
                Bekijk wedstrijden <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              <Button variant="outline" className="rounded-2xl border-white/20 bg-white/5 px-6 py-6 text-base text-white hover:bg-white/10">
                Hospitality aanvragen
              </Button>
            </div>
            <div className="mt-10 grid max-w-2xl grid-cols-3 gap-3 text-sm text-white/70">
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4"><Ticket className="mb-2 h-5 w-5" />Live ticket feed</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4"><Plane className="mb-2 h-5 w-5" />Travel add-ons</div>
              <div className="rounded-2xl border border-white/10 bg-white/5 p-4"><Users className="mb-2 h-5 w-5" />Corporate groups</div>
            </div>
          </motion.div>

          <Card className="rounded-[2rem] border-white/10 bg-white/10 text-white shadow-2xl backdrop-blur">
            <CardContent className="p-5">
              <img src={selectedEvent.image} alt="Football stadium" className="h-64 w-full rounded-[1.5rem] object-cover" />
              <div className="mt-5">
                <p className="text-sm uppercase tracking-[0.25em] text-blue-200">Featured trip</p>
                <h2 className="mt-2 text-2xl font-semibold">{selectedEvent.homeTeam} vs {selectedEvent.awayTeam}</h2>
                <div className="mt-4 grid gap-2 text-sm text-white/75">
                  <span className="flex items-center gap-2"><CalendarDays className="h-4 w-4" />{formatDate(selectedEvent.date)} · {selectedEvent.time}</span>
                  <span className="flex items-center gap-2"><MapPin className="h-4 w-4" />{selectedEvent.venue}, {selectedEvent.city}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <main className="mx-auto max-w-7xl px-6 py-10">
        <div className="grid gap-8 lg:grid-cols-[1fr_420px]">
          <section>
            <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
              <div>
                <h2 className="text-2xl font-semibold">Actueel aanbod</h2>
                <p className="mt-2 text-white/60">In productie komt dit uit de XS2Event API. Prijs en voorraad worden bij selectie opnieuw live gecontroleerd.</p>
              </div>
              <div className="relative w-full md:w-80">
                <Search className="absolute left-4 top-3.5 h-4 w-4 text-white/40" />
                <input
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Zoek club, stad of competitie"
                  className="w-full rounded-2xl border border-white/10 bg-white/10 py-3 pl-11 pr-4 text-sm outline-none placeholder:text-white/35 focus:border-blue-300"
                />
              </div>
            </div>

            <div className="grid gap-5 md:grid-cols-2">
              {filteredEvents.map((event) => (
                <button key={event.id} onClick={() => selectEvent(event)} className="text-left">
                  <Card className={`overflow-hidden rounded-[1.5rem] border bg-white/5 text-white transition hover:bg-white/10 ${selectedEvent.id === event.id ? "border-blue-300" : "border-white/10"}`}>
                    <img src={event.image} alt="event" className="h-44 w-full object-cover" />
                    <CardContent className="p-5">
                      <div className="flex items-center justify-between gap-4">
                        <span className="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70">{event.competition}</span>
                        <span className="text-sm text-emerald-300">{event.availability}</span>
                      </div>
                      <h3 className="mt-4 text-xl font-semibold">{event.homeTeam} vs {event.awayTeam}</h3>
                      <p className="mt-2 text-sm text-white/60">{formatDate(event.date)} · {event.venue}</p>
                      <div className="mt-4 flex items-center justify-between">
                        <span className="text-sm text-white/60">Vanaf</span>
                        <span className="text-2xl font-semibold">€{event.fromPrice}</span>
                      </div>
                    </CardContent>
                  </Card>
                </button>
              ))}
            </div>
          </section>

          <aside className="lg:sticky lg:top-6 lg:self-start">
            <Card className="rounded-[2rem] border-white/10 bg-white text-slate-950 shadow-2xl">
              <CardContent className="p-6">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <p className="text-sm font-medium text-blue-700">Boeking simulatie</p>
                    <h2 className="mt-1 text-2xl font-semibold">{selectedEvent.homeTeam} vs {selectedEvent.awayTeam}</h2>
                  </div>
                  <Star className="h-6 w-6 text-amber-500" />
                </div>

                <div className="mt-5 rounded-2xl bg-slate-100 p-4 text-sm text-slate-700">
                  <div className="flex items-center gap-2"><Clock className="h-4 w-4" />Na reservering: 10 minuten checkout-window</div>
                </div>

                <label className="mt-5 block text-sm font-medium">Ticketcategorie</label>
                <select
                  value={selectedCategory.id}
                  onChange={(e) => setSelectedCategory(selectedEvent.categories.find((cat) => cat.id === e.target.value))}
                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none"
                >
                  {selectedEvent.categories.map((category) => (
                    <option key={category.id} value={category.id}>{category.name} · €{category.sellPrice}</option>
                  ))}
                </select>

                <label className="mt-5 block text-sm font-medium">Aantal tickets</label>
                <div className="mt-2 grid grid-cols-4 gap-2">
                  {[1, 2, 3, 4].map((n) => (
                    <button key={n} onClick={() => setQuantity(n)} className={`rounded-2xl border px-4 py-3 font-medium ${quantity === n ? "border-blue-600 bg-blue-600 text-white" : "border-slate-200"}`}>{n}</button>
                  ))}
                </div>

                <div className="mt-6 space-y-3 rounded-2xl bg-slate-50 p-4 text-sm">
                  <div className="flex justify-between"><span>Verkoopprijs</span><strong>€{selectedCategory.sellPrice} p.p.</strong></div>
                  <div className="flex justify-between"><span>Aantal</span><strong>{quantity}</strong></div>
                  <div className="flex justify-between border-t border-slate-200 pt-3 text-lg"><span>Totaal klant</span><strong>€{total}</strong></div>
                  <div className="flex justify-between text-xs text-slate-500"><span>Interne marge indicatie</span><span>€{estimatedMargin}</span></div>
                </div>

                <Button className="mt-6 w-full rounded-2xl py-6 text-base">
                  Reserveer via API <ArrowRight className="ml-2 h-4 w-4" />
                </Button>

                <div className="mt-6 space-y-3 text-sm text-slate-600">
                  <div className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-600" />Live voorraadcheck vóór betaling</div>
                  <div className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-600" />API-key blijft veilig op backend</div>
                  <div className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-600" />Eigen TFTA marge en service fee mogelijk</div>
                </div>
              </CardContent>
            </Card>

            <Card className="mt-5 rounded-[1.5rem] border-white/10 bg-white/5 text-white">
              <CardContent className="p-5">
                <h3 className="font-semibold">Technische flow</h3>
                <ol className="mt-3 space-y-2 text-sm text-white/65">
                  <li>1. Frontend vraagt aanbod op bij TFTA backend.</li>
                  <li>2. Backend haalt live tickets op via leverancier API.</li>
                  <li>3. Klant kiest categorie en aantal.</li>
                  <li>4. Backend maakt reservation bij leverancier.</li>
                  <li>5. Klant betaalt aan TFTA.</li>
                  <li>6. Backend maakt definitieve booking aan.</li>
                </ol>
              </CardContent>
            </Card>
          </aside>
        </div>
      </main>
    </div>
  );
}