"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import { ArrowRight, Building2, ExternalLink, Globe, Rocket, Sparkles } from "lucide-react";
import { MarketingNav } from "@/components/layout/marketing-nav";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScoreRing } from "@/components/ui/score-ring";
import { loadDemoProfile } from "@/lib/data-store";
import { DEMO_PROFILES, type DemoProfileMeta } from "@/lib/demo-profiles";
import { getDemoDigitalPresence } from "@/lib/demo-digital-presence";
import { cn } from "@/lib/utils";

type FilterId = "all" | "startup" | "trades" | "services";

const FILTERS: Array<{ id: FilterId; label: string }> = [
  { id: "all", label: "All demos" },
  { id: "startup", label: "Startups" },
  { id: "trades", label: "Trades & home services" },
  { id: "services", label: "Local services" },
];

function matchesFilter(demo: DemoProfileMeta, filter: FilterId): boolean {
  if (filter === "all") return true;
  if (filter === "startup") return demo.category === "startup";
  if (filter === "trades") {
    return ["Home Services", "Landscaping", "HVAC", "Roofing"].some((t) => demo.industry.includes(t));
  }
  if (filter === "services") {
    return ["Beauty", "Dental", "Health", "Real Estate", "Food", "Medical"].some((t) =>
      demo.industry.includes(t),
    );
  }
  return true;
}

function DemoCard({
  demo,
  loading,
  onEnter,
}: {
  demo: DemoProfileMeta;
  loading: string | null;
  onEnter: (id: string) => void;
}) {
  const presence = getDemoDigitalPresence(demo.id);

  return (
    <Card className={cn("card-glow overflow-hidden bg-gradient-to-br", demo.accent)}>
      <CardHeader className="pb-3">
        <div className="mb-2 flex items-center justify-between">
          {demo.category === "startup" ? (
            <Rocket className="h-5 w-5 text-fuchsia-400" />
          ) : (
            <Building2 className="h-5 w-5 text-sky-400" />
          )}
          <div className="flex gap-1.5">
            {demo.category === "startup" ? (
              <Badge className="border-fuchsia-500/30 bg-fuchsia-500/10 text-[10px] text-fuchsia-300">
                Startup
              </Badge>
            ) : null}
            <Badge className="border-slate-700 bg-slate-800/50 text-xs text-slate-300">{demo.industry}</Badge>
          </div>
        </div>
        <CardTitle className="text-lg">{demo.name}</CardTitle>
        <p className="text-xs text-slate-400">{demo.location}</p>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-slate-300">{demo.tagline}</p>
        {presence ? (
          <div className="space-y-2 rounded-xl border border-slate-800/80 bg-slate-900/50 p-3 text-xs">
            <a
              href={presence.websiteUrl}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
              className="flex items-center gap-1.5 text-sky-300 hover:text-sky-200"
            >
              <Globe className="h-3.5 w-3.5" />
              {presence.websiteUrl.replace(/^https?:\/\//, "")}
              <ExternalLink className="h-3 w-3" />
            </a>
            <div className="flex flex-wrap gap-1.5 text-slate-500">
              {presence.socialProfiles.slice(0, 3).map((s) => (
                <span key={s.platform} className="rounded-md border border-slate-800 px-1.5 py-0.5">
                  {s.handle}
                </span>
              ))}
            </div>
          </div>
        ) : null}
        <div className="flex items-center justify-between rounded-xl border border-slate-800/80 bg-slate-900/50 p-3">
          <div>
            <p className="text-xs text-slate-500">Revenue potential</p>
            <p className="text-lg font-bold text-amber-300">${demo.revenuePotential.toLocaleString()}</p>
          </div>
          <ScoreRing score={demo.brandScore} size={56} />
        </div>
        <div className="flex items-center justify-between text-xs text-slate-500">
          <span>{demo.revenueRange}</span>
          <span>Live dashboard</span>
        </div>
        <Button className="w-full gap-2" onClick={() => onEnter(demo.id)} disabled={loading === demo.id}>
          {loading === demo.id ? "Loading..." : "Enter demo"}
          <ArrowRight className="h-4 w-4" />
        </Button>
      </CardContent>
    </Card>
  );
}

export default function DemoPageClient() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const initialFilter = (searchParams.get("filter") as FilterId) || "all";
  const [filter, setFilter] = useState<FilterId>(
    FILTERS.some((f) => f.id === initialFilter) ? initialFilter : "all",
  );
  const [loading, setLoading] = useState<string | null>(null);

  const filtered = useMemo(() => {
    const list = DEMO_PROFILES.filter((d) => matchesFilter(d, filter));
    if (filter === "all") return list.filter((d) => d.category !== "startup");
    return list;
  }, [filter]);

  const startupDemos = useMemo(() => DEMO_PROFILES.filter((d) => d.category === "startup"), []);

  const enterDemo = async (id: string) => {
    setLoading(id);
    await loadDemoProfile(id);
    router.push("/dashboard");
  };

  const setFilterAndUrl = (id: FilterId) => {
    setFilter(id);
    const url = id === "all" ? "/demo" : `/demo?filter=${id}`;
    router.replace(url, { scroll: false });
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <MarketingNav />
      <section className="mx-auto max-w-6xl px-4 py-12">
        <div className="mb-10 max-w-2xl">
          <Badge className="mb-4 border-sky-500/30 bg-sky-500/10 text-sky-300">Live demos</Badge>
          <h1 className="text-3xl font-bold md:text-4xl">Explore BrandLxft with real business data</h1>
          <p className="mt-4 text-slate-400">
            Pick an industry and jump into a fully loaded dashboard — opportunities, competitors, scores, and AI
            recommendations already filled in.
          </p>
        </div>

        {filter === "all" && startupDemos.length > 0 ? (
          <div className="mb-12">
            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
              <div>
                <h2 className="flex items-center gap-2 text-xl font-semibold">
                  <Rocket className="h-5 w-5 text-fuchsia-400" />
                  Startup demos
                </h2>
                <p className="text-sm text-slate-400">Pre-revenue to early MRR — founder priorities pre-loaded.</p>
              </div>
              <Button variant="outline" size="sm" onClick={() => setFilterAndUrl("startup")}>
                View all startups
              </Button>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              {startupDemos.map((demo) => (
                <DemoCard key={demo.id} demo={demo} loading={loading} onEnter={enterDemo} />
              ))}
            </div>
          </div>
        ) : null}

        <div className="mb-6 flex flex-wrap gap-2">
          {FILTERS.map((f) => (
            <button
              key={f.id}
              type="button"
              onClick={() => setFilterAndUrl(f.id)}
              className={cn(
                "rounded-full border px-4 py-1.5 text-sm transition-all",
                filter === f.id
                  ? "border-sky-500/50 bg-sky-500/15 text-sky-200"
                  : "border-slate-700 text-slate-400 hover:border-slate-600",
              )}
            >
              {f.label}
            </button>
          ))}
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {filtered.map((demo) => (
            <DemoCard key={demo.id} demo={demo} loading={loading} onEnter={enterDemo} />
          ))}
        </div>

        {filtered.length === 0 ? (
          <p className="py-12 text-center text-slate-500">No demos in this category yet.</p>
        ) : null}

        <Card className="mt-8">
          <CardContent className="flex flex-wrap items-center justify-between gap-4 p-6">
            <div className="flex items-start gap-3">
              <Sparkles className="mt-0.5 h-5 w-5 text-amber-400" />
              <div>
                <p className="font-medium">Want to use your own business?</p>
                <p className="text-sm text-slate-400">
                  Run through onboarding to build a custom Business Brain with your data.
                </p>
              </div>
            </div>
            <Link href="/onboarding">
              <Button variant="outline">Build My Business Brain</Button>
            </Link>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}