import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { format } from "date-fns";
import { useState } from "react";
import {
  Bookmark,
  CalendarDays,
  Check,
  ExternalLink,
  Heart,
  MapPin,
  Share2,
  Star,
  Users,
} from "lucide-react";
import { toast } from "sonner";
import { AppShell } from "@/components/AppShell";
import { EventCard, VerificationBadge } from "@/components/EventCard";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useAuth } from "@/hooks/useAuth";
import {
  fetchEventBySlug,
  fetchEventCounts,
  fetchEventReviews,
  fetchEvents,
  fetchMyInteraction,
  formatPrice,
  REMINDER_OPTIONS,
  setGoing,
  setReminder,
  toggleLike,
  toggleSave,
  upsertRating,
} from "@/lib/hotspots";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/events/$slug")({
  head: ({ params }) => ({
    meta: [
      { title: `Event — HOTSPOTS` },
      { name: "description", content: `Event details, tickets and who's going on HOTSPOTS.` },
      { property: "og:title", content: `Event ${params.slug} — HOTSPOTS` },
      { property: "og:description", content: "See event details, save it and say you're going." },
    ],
  }),
  component: EventPage,
});

function EventPage() {
  const { slug } = Route.useParams();
  const { userId } = useAuth();
  const navigate = useNavigate();
  const qc = useQueryClient();
  const [reviewText, setReviewText] = useState("");
  const [stars, setStars] = useState(0);

  const eventQ = useQuery({ queryKey: ["event", slug], queryFn: () => fetchEventBySlug(slug) });
  const event = eventQ.data;

  const counts = useQuery({
    queryKey: ["event-counts", event?.id],
    queryFn: () => fetchEventCounts(event!.id),
    enabled: Boolean(event?.id),
  });
  const mine = useQuery({
    queryKey: ["event-mine", event?.id, userId],
    queryFn: () => fetchMyInteraction(event!.id, userId!),
    enabled: Boolean(event?.id && userId),
  });
  const reviews = useQuery({
    queryKey: ["event-reviews", event?.id],
    queryFn: () => fetchEventReviews(event!.id),
    enabled: Boolean(event?.id),
  });
  const related = useQuery({
    queryKey: ["event-related", event?.category_id],
    queryFn: () => fetchEvents({ categoryId: event?.category_id ?? undefined, limit: 6 }),
    enabled: Boolean(event?.category_id),
  });

  function requireAuth() {
    if (!userId) {
      toast.info("Sign in to do that");
      navigate({ to: "/auth" });
      return false;
    }
    return true;
  }

  function refresh() {
    qc.invalidateQueries({ queryKey: ["event-mine", event?.id, userId] });
    qc.invalidateQueries({ queryKey: ["event-counts", event?.id] });
  }

  if (eventQ.isLoading) {
    return (
      <AppShell>
        <div className="h-72 animate-pulse rounded-3xl bg-card" />
      </AppShell>
    );
  }
  if (!event) {
    return (
      <AppShell>
        <div className="rounded-3xl border border-border bg-card p-10 text-center">
          <h1 className="font-display text-xl font-bold">Event not found</h1>
          <Button asChild className="mt-4 rounded-full">
            <Link to="/discover">Browse events</Link>
          </Button>
        </div>
      </AppShell>
    );
  }

  const start = new Date(event.starts_at);
  const isPast = start.getTime() < Date.now();
  const going = mine.data?.attendance?.status === "going" || mine.data?.attendance?.status === "attended";
  const avg = counts.data?.avg_rating;
  const ratingCount = counts.data?.ratings ?? 0;

  const current = event;
  async function share() {
    const url = window.location.href;
    if (navigator.share) {
      try {
        await navigator.share({ title: current.title, url });
        return;
      } catch {
        /* cancelled */
      }
    }
    await navigator.clipboard.writeText(url);
    toast.success("Link copied");
  }

  return (
    <AppShell>
      <div className="space-y-8">
        <div className="overflow-hidden rounded-3xl border border-border bg-card">
          <div className="relative aspect-[16/9] bg-secondary md:aspect-[21/9]">
            {event.image_url ? (
              <img src={event.image_url} alt={event.title} className="h-full w-full object-cover" />
            ) : (
              <div className="grid h-full place-items-center text-6xl">
                {event.categories?.emoji ?? "✨"}
              </div>
            )}
          </div>
          <div className="space-y-4 p-5 md:p-7">
            <div className="flex flex-wrap items-center gap-2">
              <VerificationBadge level={event.verification} />
              <span className="rounded-full bg-secondary px-2.5 py-0.5 text-[11px] font-semibold">
                {event.categories?.emoji} {event.categories?.name}
              </span>
              {event.status === "cancelled" && (
                <span className="rounded-full bg-destructive/20 px-2.5 py-0.5 text-[11px] font-semibold text-destructive">
                  Cancelled
                </span>
              )}
            </div>
            <h1 className="font-display text-2xl font-extrabold md:text-4xl">{event.title}</h1>

            <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-2">
              <p className="flex items-center gap-2">
                <CalendarDays className="h-4 w-4 text-primary" />
                {format(start, "EEEE d MMMM yyyy · h:mm a")} ({event.timezone})
              </p>
              <p className="flex items-center gap-2">
                <MapPin className="h-4 w-4 text-primary" />
                {event.venue ?? "Venue TBA"}
                {event.cities?.name ? `, ${event.cities.name}` : ""}
              </p>
              <p className="flex items-center gap-2">
                <Users className="h-4 w-4 text-primary" />
                {counts.data?.going ?? 0} people are going
              </p>
              <p className="flex items-center gap-2">
                <span className="font-semibold text-foreground">{formatPrice(event)}</span>
                {event.ticket_url && (
                  <a
                    href={event.ticket_url}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1 text-primary underline"
                  >
                    Get tickets <ExternalLink className="h-3 w-3" />
                  </a>
                )}
              </p>
            </div>

            <div className="flex flex-wrap gap-2 pt-2">
              <Button
                size="lg"
                variant={going ? "secondary" : "default"}
                className="rounded-full"
                onClick={async () => {
                  if (!requireAuth()) return;
                  await setGoing(event.id, userId!, going);
                  toast.success(going ? "Removed from your calendar" : "Added to your HOTSPOTS calendar");
                  refresh();
                }}
              >
                {going ? <Check className="mr-1 h-4 w-4" /> : null}
                {going ? "I'm Going" : "I'm Going"}
              </Button>
              <Button
                variant="secondary"
                size="lg"
                className={cn("rounded-full", mine.data?.liked && "text-primary")}
                onClick={async () => {
                  if (!requireAuth()) return;
                  await toggleLike(event.id, userId!, Boolean(mine.data?.liked));
                  refresh();
                }}
              >
                <Heart className={cn("mr-1 h-4 w-4", mine.data?.liked && "fill-current")} />
                {counts.data?.likes ?? 0}
              </Button>
              <Button
                variant="secondary"
                size="lg"
                className={cn("rounded-full", mine.data?.saved && "text-gold")}
                onClick={async () => {
                  if (!requireAuth()) return;
                  await toggleSave(event.id, userId!, Boolean(mine.data?.saved));
                  toast.success(mine.data?.saved ? "Removed from saved" : "Saved");
                  refresh();
                }}
              >
                <Bookmark className={cn("mr-1 h-4 w-4", mine.data?.saved && "fill-current")} />
                {mine.data?.saved ? "Saved" : "Save"}
              </Button>
              <Button variant="secondary" size="lg" className="rounded-full" onClick={share}>
                <Share2 className="mr-1 h-4 w-4" /> Share
              </Button>
            </div>

            {going && (
              <div className="rounded-2xl border border-border bg-background/60 p-4">
                <p className="text-sm font-semibold">🔔 Reminder</p>
                <div className="mt-2 flex flex-wrap gap-2">
                  {REMINDER_OPTIONS.map((r) => (
                    <button
                      key={r.minutes}
                      onClick={async () => {
                        await setReminder(event.id, userId!, r.minutes);
                        toast.success(`Reminder set: ${r.label}`);
                        refresh();
                      }}
                      className={cn(
                        "rounded-full border px-3 py-1.5 text-xs",
                        mine.data?.attendance?.reminder_minutes_before === r.minutes
                          ? "border-primary text-primary"
                          : "border-border text-muted-foreground",
                      )}
                    >
                      {r.label}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        <section className="grid gap-6 md:grid-cols-3">
          <div className="space-y-6 md:col-span-2">
            <div className="surface-card p-5">
              <h2 className="font-display text-lg font-bold">About this event</h2>
              <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-muted-foreground">
                {event.description ?? "No description provided yet."}
              </p>
              {event.source_url && (
                <a
                  href={event.source_url}
                  target="_blank"
                  rel="noreferrer"
                  className="mt-4 inline-flex items-center gap-1 text-xs text-muted-foreground underline"
                >
                  View original source <ExternalLink className="h-3 w-3" />
                </a>
              )}
            </div>

            <div className="surface-card p-5">
              <div className="flex items-center justify-between">
                <h2 className="font-display text-lg font-bold">Ratings & reviews</h2>
                {ratingCount >= 3 && avg != null ? (
                  <span className="flex items-center gap-1 text-sm font-semibold text-gold">
                    <Star className="h-4 w-4 fill-current" /> {avg} / 5 · {ratingCount} ratings
                  </span>
                ) : (
                  <span className="text-xs text-muted-foreground">
                    {ratingCount} rating{ratingCount === 1 ? "" : "s"} so far
                  </span>
                )}
              </div>

              {isPast ? (
                <div className="mt-4 space-y-3 rounded-2xl border border-border p-4">
                  <p className="text-sm font-medium">Were you there? Rate this event</p>
                  <div className="flex gap-1">
                    {[1, 2, 3, 4, 5].map((n) => (
                      <button key={n} onClick={() => setStars(n)} aria-label={`${n} stars`}>
                        <Star
                          className={cn(
                            "h-6 w-6",
                            n <= (stars || mine.data?.rating?.rating || 0)
                              ? "fill-current text-gold"
                              : "text-muted-foreground",
                          )}
                        />
                      </button>
                    ))}
                  </div>
                  <Textarea
                    value={reviewText}
                    onChange={(e) => setReviewText(e.target.value)}
                    placeholder="Share what it was like (optional)"
                  />
                  <Button
                    className="rounded-full"
                    onClick={async () => {
                      if (!requireAuth()) return;
                      const value = stars || mine.data?.rating?.rating || 0;
                      if (!value) {
                        toast.error("Pick a star rating first");
                        return;
                      }
                      await upsertRating(event.id, userId!, value, reviewText || null);
                      toast.success("Thanks for your review");
                      qc.invalidateQueries({ queryKey: ["event-reviews", event.id] });
                      refresh();
                    }}
                  >
                    {mine.data?.rating ? "Update review" : "Submit review"}
                  </Button>
                </div>
              ) : (
                <p className="mt-3 text-xs text-muted-foreground">
                  Reviews open once the event has ended.
                </p>
              )}

              <div className="mt-5 space-y-3">
                {(reviews.data ?? []).map((r) => (
                  <div key={r.id} className="rounded-2xl border border-border p-3">
                    <div className="flex items-center gap-1 text-gold">
                      {Array.from({ length: r.rating }).map((_, i) => (
                        <Star key={i} className="h-3.5 w-3.5 fill-current" />
                      ))}
                    </div>
                    {r.review && <p className="mt-1 text-sm text-muted-foreground">{r.review}</p>}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <aside className="space-y-4">
            {event.organizers && (
              <div className="surface-card p-5">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">Organiser</p>
                <p className="mt-1 font-display text-base font-bold">{event.organizers.name}</p>
                {event.organizers.verified && (
                  <span className="mt-1 inline-block rounded-full bg-leaf/15 px-2 py-0.5 text-[11px] font-semibold text-leaf">
                    Organizer Verified
                  </span>
                )}
                <p className="mt-3 text-xs text-muted-foreground">
                  Is this your event?{" "}
                  <Link to="/submit" className="text-primary underline">
                    Claim it
                  </Link>
                </p>
              </div>
            )}
            <div className="surface-card p-5">
              <p className="text-xs uppercase tracking-wide text-muted-foreground">Location</p>
              <p className="mt-1 text-sm">{event.address ?? event.venue ?? "TBA"}</p>
              {event.latitude != null && event.longitude != null && (
                <a
                  className="mt-2 inline-flex items-center gap-1 text-xs text-primary underline"
                  href={`https://www.google.com/maps/search/?api=1&query=${event.latitude},${event.longitude}`}
                  target="_blank"
                  rel="noreferrer"
                >
                  Open in maps <ExternalLink className="h-3 w-3" />
                </a>
              )}
            </div>
          </aside>
        </section>

        {(related.data ?? []).filter((e) => e.id !== event.id).length > 0 && (
          <section className="space-y-3">
            <h2 className="font-display text-xl font-bold">Related events</h2>
            <div className="hs-scroll-row hide-scrollbar">
              {related.data
                ?.filter((e) => e.id !== event.id)
                .map((e) => <EventCard key={e.id} event={e} compact />)}
            </div>
          </section>
        )}
      </div>
    </AppShell>
  );
}