"use client";

import * as React from "react";
import Link from "next/link";
import {
  ArrowRight,
  Ban,
  Droplets,
  RotateCcw,
  Timer,
  type LucideIcon,
} from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { servicesTexts as tx } from "@/lib/i18n/services";
import { platformMeta } from "./platform";
import type { ServiceRowDTO } from "./types";

function Feature({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
  return (
    <span className="inline-flex items-center gap-1.5 rounded-lg bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
      <Icon className="size-3.5" />
      {label}
    </span>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-xl border bg-muted/40 px-3 py-2.5">
      <div className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
        {label}
      </div>
      <div className="mt-0.5 font-mono text-sm font-semibold">{value}</div>
    </div>
  );
}

export function ServiceDetailsDialog({
  service,
  signedIn,
  showAverageTime,
  onOpenChange,
}: {
  service: ServiceRowDTO | null;
  signedIn: boolean;
  showAverageTime: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const meta = service ? platformMeta(service.platform) : null;
  const Icon = meta?.icon;

  const features: React.ReactNode[] = [];
  if (service?.refill) features.push(<Feature key="r" icon={RotateCcw} label={tx.featureRefill} />);
  if (service?.cancel) features.push(<Feature key="c" icon={Ban} label={tx.featureCancel} />);
  if (service?.dripfeed) features.push(<Feature key="d" icon={Droplets} label={tx.featureDripFeed} />);

  return (
    <Dialog open={service !== null} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        {service ? (
          <>
            <DialogHeader>
              <div className="flex items-start gap-3">
                {Icon && meta ? (
                  <div
                    className={`mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-xl ${meta.tint}`}
                  >
                    <Icon className="size-[18px]" />
                  </div>
                ) : null}
                <div className="min-w-0 space-y-1">
                  <DialogTitle className="font-display text-base leading-snug">
                    {service.name}
                  </DialogTitle>
                  <DialogDescription className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
                    <span className="font-mono text-foreground">#{service.id}</span>
                    <span aria-hidden>·</span>
                    <span>{service.categoryName}</span>
                    <span aria-hidden>·</span>
                    <span>{service.typeLabel}</span>
                  </DialogDescription>
                </div>
              </div>
            </DialogHeader>

            <p className="text-sm leading-relaxed whitespace-pre-line text-muted-foreground">
              {service.description.trim() || tx.noDescription}
            </p>

            <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
              <Stat label={tx.detailsRate} value={service.rateDisplay} />
              <Stat
                label={tx.detailsMinMax}
                value={`${service.minDisplay} / ${service.maxDisplay}`}
              />
              {showAverageTime ? (
                <Stat label={tx.detailsAverageTime} value={service.averageTime} />
              ) : null}
            </div>

            <div className="flex flex-wrap items-center gap-1.5">
              {features.length > 0 ? (
                features
              ) : (
                <Feature icon={Timer} label={tx.featureNone} />
              )}
            </div>

            <DialogFooter>
              <Button asChild size="lg">
                <Link href={signedIn ? `/?service=${service.id}` : "/signup"}>
                  {signedIn ? tx.orderNow : tx.signUpToOrder}
                  <ArrowRight className="size-4" />
                </Link>
              </Button>
            </DialogFooter>
          </>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}

export default ServiceDetailsDialog;