import Link from "next/link";
import { ArrowRight, Boxes, Clock, Gauge } from "lucide-react";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/shared/empty-state";
import { PlatformIcon, platformLabel } from "@/components/public/platform-icon";
import { formatMinutes, formatNumber } from "@/lib/format";
import { publicTexts } from "@/lib/i18n/public";

export type PopularService = {
  id: number;
  name: string;
  platform: string;
  categoryName: string;
  /** Pre-formatted money string, e.g. "$0.81". */
  rate: string;
  min: number;
  max: number;
  averageTimeMinutes: number | null;
};

/** Top services by order volume — the strip that shows the catalogue is real. */
export function PopularServices({ services }: { services: PopularService[] }) {
  return (
    <section id="services" className="scroll-mt-24 pb-20 lg:pb-28">
      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8">
        <header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div className="max-w-2xl">
            <p className="text-[11px] font-semibold tracking-wider text-primary uppercase">
              {publicTexts.popularEyebrow}
            </p>
            <h2 className="mt-3 font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              {publicTexts.popularTitle}
            </h2>
            <p className="mt-4 text-base leading-relaxed text-pretty text-muted-foreground">
              {publicTexts.popularSubtitle}
            </p>
          </div>
          <Button asChild variant="outline" size="lg" className="shrink-0 px-4">
            <Link href="/services">
              {publicTexts.popularViewAll}
              <ArrowRight className="size-4" />
            </Link>
          </Button>
        </header>

        {services.length === 0 ? (
          <EmptyState
            className="mt-10"
            icon={Boxes}
            title={publicTexts.popularEmpty}
            hint={publicTexts.popularSubtitle}
          />
        ) : (
          <ul className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((service) => (
              <li key={service.id} className="flex">
                <article
                  title={service.categoryName}
                  className="flex w-full flex-col rounded-2xl border bg-card p-5 shadow-sm transition-colors hover:border-primary/40"
                >
                  <div className="flex items-start gap-3">
                    <PlatformIcon platform={service.platform} />
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <span className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
                          {platformLabel(service.platform)}
                        </span>
                        <span className="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[11px] tabular text-muted-foreground">
                          #{service.id}
                        </span>
                      </div>
                      <h3 className="mt-1.5 line-clamp-2 text-sm leading-snug font-semibold">
                        {service.name}
                      </h3>
                    </div>
                  </div>

                  <div className="mt-5 flex items-baseline gap-2">
                    <span className="font-mono text-2xl leading-none font-semibold tracking-tight tabular">
                      {service.rate}
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {publicTexts.popularPerThousand}
                    </span>
                  </div>

                  <dl className="mt-4 grid grid-cols-2 gap-3 border-t pt-4 text-xs">
                    <div className="flex items-center gap-2">
                      <Gauge className="size-3.5 shrink-0 text-muted-foreground" />
                      <div className="min-w-0">
                        <dt className="text-muted-foreground">
                          {publicTexts.popularRange}
                        </dt>
                        <dd className="truncate font-mono tabular">
                          {formatNumber(service.min, 0)} –{" "}
                          {formatNumber(service.max, 0)}
                        </dd>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Clock className="size-3.5 shrink-0 text-muted-foreground" />
                      <div className="min-w-0">
                        <dt className="text-muted-foreground">
                          {publicTexts.popularSpeed}
                        </dt>
                        <dd className="truncate font-mono tabular">
                          {formatMinutes(service.averageTimeMinutes)}
                        </dd>
                      </div>
                    </div>
                  </dl>

                  <Button asChild className="mt-5 w-full" size="lg">
                    <Link href={`/signup?service=${service.id}`}>
                      {publicTexts.popularOrderCta}
                    </Link>
                  </Button>
                </article>
              </li>
            ))}
          </ul>
        )}
      </div>
    </section>
  );
}

export default PopularServices;