'use client';

/**
 * <ModifierGroupSelector> — reference React component for storefront authors
 * (PRD §8.4).
 *
 * Drop-in renderer for a single modifier group (toppings, sauce, bread type, …).
 * Storefront authors are encouraged to copy this file and tailor the styling /
 * markup to their site — the data contract is what matters, not the markup.
 *
 * Behavior pinned by the contract:
 *   - SINGLE   → renders as a radio group,   max picks = 1
 *   - MULTIPLE → renders as checkboxes,      picks bounded by min..max
 *   - effectiveMax === 0 → group is hidden entirely (variant-disable convention)
 *   - available === false → modifier is disabled with "Sold out" badge
 *   - free counter shows "{used} of {freeQuantity} free" when freeQuantity > 0
 *   - defaultModifierIds + isDefault drive first-render checked state
 *   - client-side guards mirror min/max (UX); the SERVER is authoritative — wire
 *     `MODIFIER_VALIDATION_FAILED` errors back to the user when add-to-cart fails
 *
 * The price-delta side: this component does NOT compute totals. The server
 * runs the free-allocation policy and returns the line's `unitPrice` /
 * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
 */

import type { Modifier, ModifierGroup } from 'brainerce';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

// The pure selection logic (defaults, validation, wire-format adapter) lives
// in core (zero markup) so that `core/hooks/use-product-page` never imports
// from `ui/`. Re-exported here for backward compatibility with existing imports.
export {
  buildInitialSelections,
  toModifierSelections,
  validateSelections,
} from '@/core/lib/product-options';

interface ModifierGroupSelectorProps {
  /**
   * Effective group as returned by `GET /products/:id` (overrides already
   * applied — `min`, `max`, `freeQuantity`, etc. are the values the server
   * will validate against for the active variant).
   */
  group: ModifierGroup;
  /** Currently-selected modifier IDs in click-order. */
  value: string[];
  onChange: (next: string[]) => void;
  /** Disable all controls (e.g., while add-to-cart is in flight). */
  disabled?: boolean;
}

export function ModifierGroupSelector({
  group,
  value,
  onChange,
  disabled = false,
}: ModifierGroupSelectorProps) {
  // PRD §7.2.2: variant-disable convention — group with effectiveMax=0 is hidden.
  if (group.max === 0) return null;

  const isSingle = group.selectionType === 'SINGLE';
  // Client-side bound — server is authoritative.
  const effectiveMax = isSingle ? 1 : (group.max ?? Infinity);

  const handleToggle = (modifierId: string, checked: boolean) => {
    if (disabled) return;

    if (isSingle) {
      // Radio behavior: replace the selection.
      onChange(checked ? [modifierId] : []);
      return;
    }

    if (checked) {
      if (value.length >= effectiveMax) return; // would exceed max — ignore the click
      if (value.includes(modifierId)) return;
      onChange([...value, modifierId]);
    } else {
      onChange(value.filter((id) => id !== modifierId));
    }
  };

  const sortedModifiers = [...group.modifiers].sort((a, b) => a.position - b.position);

  // Counter: how many of the picked items are within the "free" window.
  const usedFreeSlots = Math.min(value.length, group.freeQuantity);
  const showFreeCounter = group.freeQuantity > 0;

  const renderOption = (modifier: Modifier) => {
    const isChecked = value.includes(modifier.id);
    const isAtCap = !isSingle && !isChecked && value.length >= effectiveMax;
    const isDisabled = disabled || !modifier.available || isAtCap;

    return (
      <li key={modifier.id} className="modifier-option">
        <Label className="modifier-option__label flex cursor-pointer items-center gap-2 font-normal">
          {isSingle ? (
            <RadioGroupItem
              value={modifier.id}
              disabled={isDisabled}
              className="modifier-option__input"
            />
          ) : (
            <Checkbox
              checked={isChecked}
              disabled={isDisabled}
              onCheckedChange={(checked) => handleToggle(modifier.id, checked === true)}
              className="modifier-option__input"
            />
          )}
          <span className="modifier-option__name text-sm">{modifier.name}</span>
          <ModifierPriceLabel modifier={modifier} />
          {!modifier.available && (
            <Badge
              variant="secondary"
              className="modifier-option__badge modifier-option__badge--soldout font-normal"
              aria-label="Sold out"
            >
              Sold out
            </Badge>
          )}
        </Label>
        {modifier.description && (
          <p className="modifier-option__description text-muted-foreground ms-6 text-xs">
            {modifier.description}
          </p>
        )}
      </li>
    );
  };

  return (
    <fieldset className="modifier-group">
      <legend className="modifier-group__legend text-sm">
        <span className="modifier-group__name font-medium">{group.name}</span>
        {group.required && <span className="modifier-group__required text-destructive"> *</span>}
        <span className="modifier-group__rules text-muted-foreground"> {ruleSummary(group)}</span>
      </legend>

      {group.description && (
        <p className="modifier-group__description text-muted-foreground text-xs">
          {group.description}
        </p>
      )}

      {showFreeCounter && (
        <p className="modifier-group__counter text-muted-foreground text-xs" aria-live="polite">
          {usedFreeSlots} of {group.freeQuantity} free
        </p>
      )}

      {isSingle ? (
        <RadioGroup
          value={value[0] ?? ''}
          onValueChange={(v) => onChange([v])}
          disabled={disabled}
          asChild
        >
          <ul className="modifier-group__options mt-2 gap-2">
            {sortedModifiers.map(renderOption)}
          </ul>
        </RadioGroup>
      ) : (
        <ul className="modifier-group__options mt-2 grid gap-2">
          {sortedModifiers.map(renderOption)}
        </ul>
      )}
    </fieldset>
  );
}

/**
 * Renders the modifier's price contribution next to its name.
 *
 * Negative deltas display with a leading minus sign (downsell modifiers per
 * PRD §6.3.4); zero-delta modifiers render nothing — silence is the right
 * affordance for a free option.
 */
function ModifierPriceLabel({ modifier }: { modifier: Modifier }) {
  const delta = parseFloat(modifier.priceDelta);
  if (Number.isNaN(delta) || delta === 0) return null;
  const sign = delta > 0 ? '+' : '';
  return (
    <span className="modifier-option__price text-muted-foreground text-xs">
      {sign}
      {modifier.priceDelta}
    </span>
  );
}

function ruleSummary(group: ModifierGroup): string {
  const parts: string[] = [];
  if (group.selectionType === 'SINGLE') {
    parts.push('Pick one');
  } else if (group.max != null) {
    if (group.min === 0) parts.push(`Up to ${group.max}`);
    else if (group.min === group.max) parts.push(`Pick exactly ${group.min}`);
    else parts.push(`${group.min}–${group.max}`);
  } else if (group.min > 0) {
    parts.push(`At least ${group.min}`);
  }
  return parts.length ? `(${parts.join(', ')})` : '';
}