"use client";

import Link from "next/link";

import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { adminRoutes } from "@/lib/admin-routes";
import { getGlobalAddOns, getSailingById } from "@/lib/cruise-store";
import { formatCurrency } from "@/lib/utils";

interface EventAddOnPickerProps {
  selectedAddOnIds: string[];
  onChange: (ids: string[]) => void;
}

export function EventAddOnPicker({ selectedAddOnIds, onChange }: EventAddOnPickerProps) {
  const catalog = getGlobalAddOns();

  const toggle = (addOnId: string, checked: boolean) => {
    onChange(
      checked
        ? [...new Set([...selectedAddOnIds, addOnId])]
        : selectedAddOnIds.filter((id) => id !== addOnId),
    );
  };

  return (
    <div className="grid gap-2">
      <div className="flex items-center justify-between gap-2">
        <Label>Add-ons from catalog</Label>
        <Link href={adminRoutes.globalAddOns()} className="text-primary text-xs hover:underline">
          Manage catalog
        </Link>
      </div>
      <p className="text-muted-foreground text-xs">Select global upsells offered at checkout — prices sync from catalog.</p>
      {catalog.length === 0 ? (
        <p className="rounded-lg border border-dashed p-3 text-muted-foreground text-sm">No global add-ons yet.</p>
      ) : (
        <div className="max-h-40 space-y-2 overflow-y-auto rounded-lg border p-2">
          {catalog.map((addon) => (
            <label
              key={addon.id}
              className="flex cursor-pointer items-start gap-3 rounded-md px-2 py-1.5 hover:bg-muted/30"
            >
              <Checkbox
                checked={selectedAddOnIds.includes(addon.id)}
                disabled={!addon.active}
                onCheckedChange={(v) => toggle(addon.id, v === true)}
                className="mt-0.5"
              />
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-medium text-sm">{addon.name}</span>
                  {!addon.active && (
                    <Badge variant="secondary" className="text-[10px]">
                      Inactive
                    </Badge>
                  )}
                </div>
                <p className="text-muted-foreground text-xs">{addon.description}</p>
              </div>
              <span className="shrink-0 text-sm tabular-nums">{formatCurrency(addon.price)}</span>
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

export function getLinkedAddOnIdsForSailing(sailingId: string): string[] {
  const sailing = getSailingById(sailingId);
  if (sailing?.linkedAddOnIds && sailing.linkedAddOnIds.length > 0) return sailing.linkedAddOnIds;
  return getGlobalAddOns().filter((a) => a.active).map((a) => a.id);
}