import * as React from "react";
import { cn } from "@/lib/utils";
import { getContrastText } from "@/lib/colors";
import { RadioGroup, RadioGroupCard } from "@/components/ui/radio-group";
import {
  ColorPicker,
  isValidHex,
  normalizeHex,
} from "@/components/ui/color-picker";
import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";

/**
 * BrandColorField — WealthX DS (Molecule)
 *
 * Lets an admin either inherit the tenant theme color or pick a specific one,
 * and shows the resolved color together with the text color that will be
 * computed against it — so the readability outcome is visible before saving.
 *
 * Custom mode uses the same popover `ColorPicker` as the onboarding branding
 * step and company settings, so brand-color entry looks identical everywhere.
 *
 * Pure display component. Persistence is owned by the app layer.
 */

export type BrandColorMode = "theme" | "custom";

/**
 * The color that a given mode resolves to. `"theme"` always wins back to the
 * tenant color, so switching to Custom and back never strands a stale value.
 */
export function resolveBrandColor(
  mode: BrandColorMode,
  themeColor: string,
  customColor: string,
): string {
  return mode === "custom" ? customColor : themeColor;
}

export interface BrandColorFieldProps {
  mode: BrandColorMode;
  onModeChange: (mode: BrandColorMode) => void;
  /** Tenant brand color from company settings — the value `"theme"` mode resolves to. */
  themeColor: string;
  customColor: string;
  onCustomColorChange: (color: string) => void;
  disabled?: boolean;
  label?: string;
  description?: string;
  className?: string;
}

export function BrandColorField({
  mode,
  onModeChange,
  themeColor,
  customColor,
  onCustomColorChange,
  disabled,
  label = "Widget color",
  description = "Choose how the chat widget picks up your brand color.",
  className,
}: BrandColorFieldProps) {
  const resolved = resolveBrandColor(mode, themeColor, customColor);

  return (
    <Field className={cn("gap-4", className)}>
      <div className="flex flex-col gap-1">
        <FieldLabel className="text-label-medium">{label}</FieldLabel>
        <FieldDescription>{description}</FieldDescription>
      </div>

      <RadioGroup
        value={mode}
        onValueChange={(value) => onModeChange(value as BrandColorMode)}
        disabled={disabled}
        className="sm:grid-cols-2"
      >
        <RadioGroupCard
          value="theme"
          label="Theme color"
          description="Follow the brand color from Company Settings."
        />
        <RadioGroupCard
          value="custom"
          label="Custom color"
          description="Pick a specific color for this widget."
        />
      </RadioGroup>

      {mode === "custom" && (
        <Field>
          <FieldLabel>Brand color</FieldLabel>
          <ColorPicker
            value={customColor}
            onChange={onCustomColorChange}
            disabled={disabled}
          />
        </Field>
      )}

      <BrandColorPreviewChip color={resolved} mode={mode} />
    </Field>
  );
}

// ---------------------------------------------------------------------------
// BrandColorPreviewChip
// ---------------------------------------------------------------------------

export interface BrandColorPreviewChipProps {
  color: string;
  mode?: BrandColorMode;
  className?: string;
}

/**
 * Shows the resolved brand color filled behind sample text tinted with the
 * contrast color the widget will actually compute — the readability preview.
 */
export function BrandColorPreviewChip({
  color,
  mode,
  className,
}: BrandColorPreviewChipProps) {
  const normalized = normalizeHex(color);
  const valid = isValidHex(normalized);
  const foreground = valid ? getContrastText(normalized) : undefined;

  return (
    <div
      className={cn(
        "flex items-center gap-3 border border-border p-3",
        className,
      )}
      data-slot="brand-color-preview-chip"
    >
      <div
        className="flex size-10 shrink-0 items-center justify-center border border-border/50"
        style={{ backgroundColor: valid ? normalized : "var(--muted)" }}
      >
        <span
          className="text-label-small"
          style={foreground ? { color: foreground } : undefined}
        >
          Aa
        </span>
      </div>
      <div className="flex flex-col gap-0.5">
        <span className="text-label-small font-mono uppercase text-foreground">
          {valid ? normalized : "Invalid color"}
        </span>
        <span className="text-caption text-muted-foreground">
          {!valid
            ? "Enter a valid hex color"
            : mode === "theme"
              ? "Inherited from Company Settings"
              : `Text will render ${foreground === "#FFFFFF" ? "light" : "dark"} for contrast`}
        </span>
      </div>
    </div>
  );
}