import * as React from "react";
import { IconArrowsMove, IconRefresh } from "@tabler/icons-react";
import {
  Button,
  Card,
  cn,
  Label,
  SegmentedControl,
  Slider,
  Switch,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@colineapp/ui";
import { LiquidGlass, type LiquidGlassHandle } from "@colineapp/liquid-glass/react";
import { CodeBlock } from "./code";
import { reactSnippet, vanillaSnippet, type PlaygroundOptions } from "./snippet";
import { BACKDROPS, Stage, useDraggable, type BackdropKind } from "./stage";

type Shape = "capsule" | "card" | "circle";
type Floating = "off" | "menu" | "dialog";

const SHAPES: Record<Shape, { className: string }> = {
  capsule: { className: "h-[72px] w-[260px] rounded-full" },
  card: { className: "h-[180px] w-[280px] rounded-[32px]" },
  circle: { className: "size-[164px] rounded-full" },
};

const HUES = [
  { value: "none", color: null, label: "None" },
  { value: "blue", color: "#3d6bff", label: "Blue" },
  { value: "violet", color: "#8b5cf6", label: "Violet" },
  { value: "pink", color: "#ff4fa3", label: "Pink" },
  { value: "green", color: "#2fb36d", label: "Green" },
  { value: "amber", color: "#f0a020", label: "Amber" },
] as const;
type Hue = (typeof HUES)[number]["value"];

const DEFAULTS = {
  backdrop: "landscape" as BackdropKind,
  shape: "capsule" as Shape,
  variant: "regular" as "regular" | "clear",
  floating: "off" as Floating,
  interactive: true,
  swell: true,
  refraction: true,
  samples: false,
  maxFall: 0.8,
  bezel: 17,
  thickness: 24,
  edge: 0.75,
  glint: 0.4,
  hue: "none" as Hue,
  hueStrength: 0.5,
};
type State = typeof DEFAULTS;

function Control({ label, value, children }: { label: string; value?: string; children: React.ReactNode }) {
  return (
    <div className="grid gap-2">
      <div className="flex items-baseline justify-between gap-2">
        <Label>{label}</Label>
        {value !== undefined ? <span className="text-xs text-muted-foreground tabular-nums">{value}</span> : null}
      </div>
      {children}
    </div>
  );
}

function Range({
  label,
  value,
  min,
  max,
  step,
  format = (n) => String(n),
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step: number;
  format?: (value: number) => string;
  onChange: (value: number) => void;
}) {
  // ui 2.1.3's Slider puts aria-label on its root, but the focusable part is
  // the thumb, which it gives no props; name the thumb here.
  const box = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    box.current?.querySelector('[role="slider"]')?.setAttribute("aria-label", label);
  }, [label]);
  return (
    <Control label={label} value={format(value)}>
      <div ref={box}>
        <Slider aria-label={label} value={[value]} min={min} max={max} step={step} onValueChange={([next]) => next !== undefined && onChange(next)} />
      </div>
    </Control>
  );
}

function Toggle({ label, description, checked, onChange }: { label: string; description: string; checked: boolean; onChange: (checked: boolean) => void }) {
  const id = React.useId();
  return (
    <div className="flex items-start justify-between gap-4">
      <div className="grid gap-0.5">
        <Label htmlFor={id}>{label}</Label>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
      <Switch id={id} checked={checked} onCheckedChange={onChange} size="sm" />
    </div>
  );
}

function Sample({ state, glass }: { state: State; glass: React.RefObject<LiquidGlassHandle | null> }) {
  const drag = useDraggable({ initial: { x: 0.5, y: 0.42 } });
  const hue = HUES.find((item) => item.value === state.hue)?.color ?? null;
  // Geometry rebuilds the rim, so it follows the sliders a beat behind.
  const geometry = React.useDeferredValue(
    React.useMemo(
      () => ({ maxFall: state.maxFall, bezel: state.bezel, thickness: state.thickness, edge: state.edge, glint: state.glint }),
      [state.maxFall, state.bezel, state.thickness, state.edge, state.glint],
    ),
  );
  return (
    <div
      ref={drag.ref}
      style={drag.style}
      onPointerDown={drag.onPointerDown}
      onPointerMove={drag.onPointerMove}
      onPointerUp={drag.onPointerUp}
      onPointerCancel={drag.onPointerCancel}
      className={cn(
        "absolute flex cursor-grab items-center justify-center text-foreground select-none",
        drag.dragging && "cursor-grabbing",
        SHAPES[state.shape].className,
      )}
    >
      <LiquidGlass
        glassRef={glass}
        appearance="class"
        variant={state.variant}
        floating={state.floating === "off" ? false : state.floating === "dialog" ? "dialog" : true}
        interactive={state.interactive}
        swell={state.swell}
        refraction={state.refraction}
        samples={state.samples ? 4 : 1}
        hue={hue}
        hueStrength={state.hueStrength}
        geometry={geometry}
      />
      {state.shape === "capsule" ? (
        <span className="flex items-center gap-2 text-[15px] font-medium">
          <IconArrowsMove className="size-4 opacity-60" />
          Drag me around
        </span>
      ) : null}
      {state.shape === "card" ? (
        <div className="grid w-full gap-1 self-start p-6">
          <span className="text-lg font-semibold tracking-tight">Liquid Glass</span>
          <span className="text-sm text-foreground/70">Drag it over the picture and watch the rim bend what&apos;s behind it.</span>
        </div>
      ) : null}
    </div>
  );
}

export function Playground() {
  const [state, setState] = React.useState<State>(DEFAULTS);
  const set = <Key extends keyof State>(key: Key) => (value: State[Key]) => setState((current) => ({ ...current, [key]: value }));
  const glass = React.useRef<LiquidGlassHandle | null>(null);


  const hue = HUES.find((item) => item.value === state.hue)?.color ?? null;
  const options: PlaygroundOptions = {
    shape: state.shape,
    variant: state.variant,
    floating: state.floating === "off" ? false : state.floating === "dialog" ? "dialog" : true,
    interactive: state.interactive,
    swell: state.swell,
    refraction: state.refraction,
    samples: state.samples ? 4 : 1,
    hue,
    hueStrength: hue ? state.hueStrength : undefined,
    geometry: { maxFall: state.maxFall, bezel: state.bezel, thickness: state.thickness, edge: state.edge, glint: state.glint },
  };

  return (
    <div className="grid gap-4">
      <Card>
        <div className="grid lg:grid-cols-[minmax(0,1fr)_340px]">
          <div className="grid min-w-0 content-start gap-3 px-4 lg:pr-5">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <SegmentedControl label="Backdrop" size="sm" value={state.backdrop} onValueChange={set("backdrop")} options={BACKDROPS} />
              <Button variant="ghost" size="sm" onClick={() => void glass.current?.materialize({ duration: 600 })}>
                Replay materialize
              </Button>
            </div>
            <Stage backdrop={state.backdrop} className="h-[420px] sm:h-[480px] lg:h-[600px]">
              <Sample state={state} glass={glass} />
            </Stage>
          </div>
          <div className="mx-4 mt-5 grid content-start gap-5 border-t border-border pt-5 lg:mx-0 lg:mt-0 lg:max-h-[648px] lg:overflow-y-auto lg:border-t-0 lg:border-l lg:pt-0 lg:pr-4 lg:pl-5">
            <Control label="Shape">
              <SegmentedControl
                label="Shape"
                size="sm"
                value={state.shape}
                onValueChange={set("shape")}
                options={[
                  { value: "capsule", label: "Capsule" },
                  { value: "card", label: "Card" },
                  { value: "circle", label: "Circle" },
                ]}
              />
            </Control>
            <Control label="Material">
              <SegmentedControl
                label="Material"
                size="sm"
                value={state.variant}
                onValueChange={set("variant")}
                options={[
                  { value: "regular", label: "Regular" },
                  { value: "clear", label: "Clear" },
                ]}
              />
            </Control>
            <Control label="Floating">
              <SegmentedControl
                label="Floating"
                size="sm"
                value={state.floating}
                onValueChange={set("floating")}
                options={[
                  { value: "off", label: "Off" },
                  { value: "menu", label: "Menu" },
                  { value: "dialog", label: "Dialog" },
                ]}
              />
            </Control>
            <Control label="Tint">
              <SegmentedControl
                label="Tint"
                size="sm"
                value={state.hue}
                onValueChange={set("hue")}
                options={HUES.map((item) => ({
                  value: item.value,
                  label: item.color ? (
                    <span aria-label={item.label} title={item.label} className="block size-3.5 rounded-full" style={{ background: item.color }} />
                  ) : (
                    "None"
                  ),
                }))}
              />
            </Control>
            {hue ? <Range label="Tint strength" value={state.hueStrength} min={0.1} max={1} step={0.05} format={(n) => n.toFixed(2)} onChange={set("hueStrength")} /> : null}
            <div className="grid gap-4">
              <Toggle label="Interactive" description="The pointer lights the glass; a press blooms." checked={state.interactive} onChange={set("interactive")} />
              <Toggle label="Swell" description="Pressed, it swells and springs back." checked={state.swell} onChange={set("swell")} />
              <Toggle label="Refraction" description="Bend the page at the rim (Chromium)." checked={state.refraction} onChange={set("refraction")} />
              <Toggle label="4× samples" description="Antialias the bend while it moves." checked={state.samples} onChange={set("samples")} />
            </div>
            <Range label="Rim bend" value={state.maxFall} min={0.05} max={0.95} step={0.05} format={(n) => n.toFixed(2)} onChange={set("maxFall")} />
            <Range label="Rim width" value={state.bezel} min={4} max={40} step={1} format={(n) => `${n}px`} onChange={set("bezel")} />
            <Range label="Depth" value={state.thickness} min={4} max={64} step={1} format={(n) => `${n}px`} onChange={set("thickness")} />
            <Range label="Dark edge" value={state.edge} min={0} max={2} step={0.05} format={(n) => `${n.toFixed(2)}px`} onChange={set("edge")} />
            <Range label="Glints" value={state.glint} min={0} max={1} step={0.05} format={(n) => n.toFixed(2)} onChange={set("glint")} />
            <Button variant="outline" size="sm" onClick={() => setState(DEFAULTS)}>
              <IconRefresh className="size-4" />
              Reset
            </Button>
          </div>
        </div>
      </Card>
      <Tabs defaultValue="react">
        <TabsList>
          <TabsTrigger value="react">React</TabsTrigger>
          <TabsTrigger value="vanilla">TypeScript</TabsTrigger>
        </TabsList>
        <TabsContent value="react">
          <CodeBlock title="These options, in React" code={reactSnippet(options)} />
        </TabsContent>
        <TabsContent value="vanilla">
          <CodeBlock title="These options, without React" code={vanillaSnippet(options)} />
        </TabsContent>
      </Tabs>
    </div>
  );
}