import { Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  Phone, Wifi, Tv, Zap, GraduationCap, ArrowLeftRight, Wallet, Receipt,
  Gift, LifeBuoy, User, LayoutGrid,
} from "lucide-react";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

/**
 * Dense premium service grid — uniform icon sizing, soft glass tiles and a
 * "More" tile that reveals the remaining services in a bottom sheet.
 */
const primary = [
  { to: "/app/airtime",     label: "Airtime", icon: Phone,         tint: "from-orange-500/20 to-amber-500/5 text-orange-600" },
  { to: "/app/data",        label: "Data",    icon: Wifi,          tint: "from-primary/25 to-primary/5      text-primary" },
  { to: "/app/cable",       label: "TV",      icon: Tv,            tint: "from-violet-500/20 to-purple-500/5 text-violet-600" },
  { to: "/app/electricity", label: "Power",   icon: Zap,           tint: "from-yellow-400/25 to-amber-400/5  text-amber-600" },
  { to: "/app/exam-pins",   label: "Exam",    icon: GraduationCap, tint: "from-emerald-500/20 to-teal-500/5  text-emerald-600" },
  { to: "/app/transfer",    label: "Transfer",icon: ArrowLeftRight,tint: "from-sky-500/20 to-cyan-500/5      text-sky-600" },
  { to: "/app/wallet",      label: "Fund",    icon: Wallet,        tint: "from-rose-500/20 to-pink-500/5     text-rose-600" },
] as const;

const more = [
  { to: "/app/wallet",  label: "Gift card", icon: Gift,     tint: "from-fuchsia-500/20 to-pink-500/5 text-fuchsia-600" },
  { to: "/app/history", label: "History",   icon: Receipt,  tint: "from-slate-500/20 to-slate-500/5  text-slate-600" },
  { to: "/app/contact", label: "Support",   icon: LifeBuoy, tint: "from-teal-500/20 to-emerald-500/5 text-teal-600" },
  { to: "/app/profile", label: "Profile",   icon: User,     tint: "from-indigo-500/20 to-blue-500/5  text-indigo-600" },
] as const;

type Item = { to: string; label: string; icon: typeof Phone; tint: string };

function Tile({ item, onClick }: { item: Item; onClick?: () => void }) {
  const Icon = item.icon;
  return (
    <Link
      to={item.to}
      onClick={onClick}
      className="group flex flex-col items-center rounded-2xl bg-card/80 p-2 shadow-card ring-1 ring-border/40 backdrop-blur transition-all hover:-translate-y-0.5 hover:shadow-elevated active:scale-[0.97]"
    >
      <span className={`grid h-9 w-9 place-items-center rounded-2xl bg-gradient-to-br ${item.tint}`}>
        <Icon className="h-[18px] w-[18px]" strokeWidth={2} />
      </span>
      <span className="mt-1 text-[10px] font-semibold text-foreground">{item.label}</span>
    </Link>
  );
}

export function QuickActions() {
  const [open, setOpen] = useState(false);
  return (
    <div className="grid grid-cols-4 gap-2">
      {primary.map((i) => <Tile key={i.label} item={i as unknown as Item} />)}

      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
          <button
            type="button"
            className="flex flex-col items-center rounded-2xl bg-card/80 p-2 shadow-card ring-1 ring-border/40 backdrop-blur transition-all hover:-translate-y-0.5 hover:shadow-elevated active:scale-[0.97]"
          >
            <span className="grid h-9 w-9 place-items-center rounded-2xl bg-gradient-to-br from-muted to-muted/40 text-muted-foreground">
              <LayoutGrid className="h-[18px] w-[18px]" strokeWidth={2} />
            </span>
            <span className="mt-1 text-[10px] font-semibold text-foreground">More</span>
          </button>
        </SheetTrigger>
        <SheetContent side="bottom" className="rounded-t-3xl">
          <SheetHeader>
            <SheetTitle>All services</SheetTitle>
          </SheetHeader>
          <div className="mt-4 grid grid-cols-4 gap-2 pb-4">
            {[...primary, ...more].map((i) => (
              <Tile key={`m-${i.label}`} item={i as unknown as Item} onClick={() => setOpen(false)} />
            ))}
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}