import { Link } from "@tanstack/react-router";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Check, ExternalLink, Palette } from "lucide-react";
import { LANDING_THEMES, useLandingTheme, type LandingThemeId } from "@/lib/landing-themes";

export function LandingThemeSelector() {
  const [active, setActive] = useLandingTheme();

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
        <div className="flex items-center gap-2">
          <Palette className="h-4 w-4 text-primary" />
          <CardTitle className="text-base">Landing page theme</CardTitle>
        </div>
        <Button variant="ghost" size="sm" className="text-xs gap-1" asChild>
          <Link to="/home">
            View live <ExternalLink className="h-3 w-3" />
          </Link>
        </Button>
      </CardHeader>
      <CardContent>
        <p className="text-xs text-muted-foreground mb-4">
          Pick which design loads for visitors at <span className="font-mono">/home</span>. Changes
          apply instantly across all dashboards.
        </p>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
          {LANDING_THEMES.map((t) => {
            const isActive = active === t.id;
            return (
              <div
                key={t.id}
                className={`group rounded-xl border p-4 transition-all ${
                  isActive
                    ? "border-primary ring-2 ring-primary/30 bg-primary/5"
                    : "border-border hover:border-primary/40 hover:bg-muted/40"
                }`}
              >
                <button
                  type="button"
                  onClick={() => setActive(t.id as LandingThemeId)}
                  className="w-full text-left"
                >
                  <div className={`h-16 w-full rounded-md bg-gradient-to-br ${t.accent} mb-3`} />
                  <div className="flex items-start justify-between gap-2">
                    <div className="min-w-0">
                      <div className="text-sm font-semibold truncate">{t.name}</div>
                      <div className="text-[10px] text-muted-foreground truncate">
                        {t.inspiration}
                      </div>
                    </div>
                    {isActive ? (
                      <Badge className="h-5 px-1.5 text-[10px] gap-1">
                        <Check className="h-3 w-3" /> Active
                      </Badge>
                    ) : (
                      <Badge variant="outline" className="h-5 px-1.5 text-[10px]">
                        Set default
                      </Badge>
                    )}
                  </div>
                  <p className="mt-2 text-[11px] text-muted-foreground leading-snug line-clamp-2">
                    {t.description}
                  </p>
                </button>
                <Link
                  to="/home"
                  search={{ theme: t.id as LandingThemeId }}
                  className="mt-2 inline-flex items-center gap-1 text-[11px] text-primary hover:underline"
                >
                  Preview <ExternalLink className="h-3 w-3" />
                </Link>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}