import Link from "next/link";
import type { ReactNode, SVGProps } from "react";

import {
  ArrowUpRightIcon,
  BuildingsIcon,
  CalendarIcon,
  MessageIcon,
  ShieldIcon,
  WalletIcon,
  WrenchIcon,
} from "@/components/dashboard-ui";

type QuickStartAction = {
  href: string;
  label: string;
  description: string;
  helper: string;
  icon: (props: SVGProps<SVGSVGElement>) => ReactNode;
};

const actions: QuickStartAction[] = [
  {
    href: "/#home-care",
    label: "Open HomeCare",
    description: "Bills, checks, insurance, reminders",
    helper: "Main hub",
    icon: CalendarIcon,
  },
  {
    href: "/#property-profile",
    label: "Choose a home",
    description: "Flick through properties",
    helper: "Home profile",
    icon: BuildingsIcon,
  },
  {
    href: "/finance",
    label: "Money",
    description: "Rent, bills, arrears, cashflow",
    helper: "View finance",
    icon: WalletIcon,
  },
  {
    href: "/compliance",
    label: "Safety",
    description: "Certificates and yearly checks",
    helper: "See deadlines",
    icon: ShieldIcon,
  },
  {
    href: "/maintenance",
    label: "Repairs",
    description: "Jobs, contractors, urgent fixes",
    helper: "Track work",
    icon: WrenchIcon,
  },
  {
    href: "/communications",
    label: "Messages",
    description: "Direct messages and updates",
    helper: "Reply faster",
    icon: MessageIcon,
  },
];

export function QuickStartPanel() {
  return (
    <section className="card-shell overflow-hidden rounded-[30px]">
      <div className="grid gap-0 lg:grid-cols-[280px_minmax(0,1fr)]">
        <div className="bg-surface-deep p-5 text-white md:p-6">
          <p className="font-mono text-xs uppercase tracking-[0.3em] text-primary">
            Start here
          </p>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">
            What do you need to do?
          </h2>
          <p className="mt-2 text-sm leading-6 text-white/68">
            Simple shortcuts for the jobs homeowners and small landlords open the app
            for most.
          </p>
        </div>

        <div className="grid gap-px bg-border sm:grid-cols-2 xl:grid-cols-3">
          {actions.map((action) => {
            const Icon = action.icon;

            return (
              <Link
                className="group flex min-h-[132px] items-start gap-4 bg-surface-strong p-5 transition hover:bg-primary-soft/70"
                href={action.href}
                key={action.href}
              >
                <span className="rounded-2xl border border-border bg-background/70 p-3 text-primary transition group-hover:border-primary/30 group-hover:bg-primary group-hover:text-white">
                  <Icon className="h-5 w-5" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="flex items-center justify-between gap-3">
                    <span className="text-base font-semibold text-foreground">
                      {action.label}
                    </span>
                    <ArrowUpRightIcon className="h-4 w-4 shrink-0 text-muted transition group-hover:text-primary" />
                  </span>
                  <span className="mt-1 block text-sm leading-5 text-muted">
                    {action.description}
                  </span>
                  <span className="mt-3 inline-flex rounded-full bg-background px-3 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-muted">
                    {action.helper}
                  </span>
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}