import { useState, useEffect, useRef, useCallback } from "react";

import type { BasicFilters, CurveChannel, CurvePoint, FilterState } from "../lib/types";

import { DEFAULT_BASIC, DEFAULT_CURVES } from "../lib/types";

import { SliderGroup } from "./SliderGroup";

import { CurvesEditor } from "./CurvesEditor";

const SLIDER_RANGES: Record<keyof BasicFilters, [number, number]> = {

  brightness: [0, 200],

  contrast: [0, 200],

  exposure: [-100, 100],

  saturation: [0, 200],

  temperature: [-100, 100],

  tint: [-100, 100],

  highlights: [-100, 100],

  shadows: [-100, 100],

};

function randBetween(min: number, max: number) {

  return Math.round(min + Math.random() * (max - min));

}

function randomCurve(): CurvePoint[] {

  const numMid = 1 + Math.floor(Math.random() * 3);

  const points: CurvePoint[] = [{ x: 0, y: randBetween(0, 60) }];

  for (let i = 0; i < numMid; i++) {

    const x = Math.round(((i + 1) / (numMid + 1)) * 255);

    points.push({ x, y: randBetween(30, 225) });

  }

  points.push({ x: 255, y: randBetween(195, 255) });

  return points;

}

function generateRandomState(): FilterState {

  const basic = {} as BasicFilters;

  for (const key of Object.keys(SLIDER_RANGES) as (keyof BasicFilters)[]) {

    const [min, max] = SLIDER_RANGES[key];

    basic[key] = randBetween(min, max);

  }

  return {

    basic,

    curves: {

      rgb: randomCurve(),

      r: randomCurve(),

      g: randomCurve(),

      b: randomCurve(),

    },

  };

}

function lerpNum(a: number, b: number, t: number) {

  return a + (b - a) * t;

}

function lerpBasic(a: BasicFilters, b: BasicFilters, t: number): BasicFilters {

  const result = {} as BasicFilters;

  for (const key of Object.keys(a) as (keyof BasicFilters)[]) {

    result[key] = Math.round(lerpNum(a[key], b[key], t));

  }

  return result;

}

function lerpCurve(a: CurvePoint[], b: CurvePoint[], t: number): CurvePoint[] {

  // Resample both curves to a common set of x points for smooth interpolation

  const xs = new Set<number>();

  a.forEach((p) => xs.add(p.x));

  b.forEach((p) => xs.add(p.x));

  const sortedX = Array.from(xs).sort((a, b) => a - b);

  return sortedX.map((x) => ({

    x,

    y: Math.round(lerpNum(sampleCurve(a, x), sampleCurve(b, x), t)),

  }));

}

function sampleCurve(points: CurvePoint[], x: number): number {

  if (x <= points[0].x) return points[0].y;

  if (x >= points[points.length - 1].x) return points[points.length - 1].y;

  for (let i = 0; i < points.length - 1; i++) {

    if (x >= points[i].x && x <= points[i + 1].x) {

      const t = (x - points[i].x) / (points[i + 1].x - points[i].x);

      return lerpNum(points[i].y, points[i + 1].y, t);

    }

  }

  return points[points.length - 1].y;

}

function lerpState(a: FilterState, b: FilterState, t: number): FilterState {

  return {

    basic: lerpBasic(a.basic, b.basic, t),

    curves: {

      rgb: lerpCurve(a.curves.rgb, b.curves.rgb, t),

      r: lerpCurve(a.curves.r, b.curves.r, t),

      g: lerpCurve(a.curves.g, b.curves.g, t),

      b: lerpCurve(a.curves.b, b.curves.b, t),

    },

  };

}

interface ControlPanelProps {

  filterState: FilterState;

  onBasicChange: (key: keyof BasicFilters, value: number) => void;

  onCurveChange: (channel: CurveChannel, points: CurvePoint[]) => void;

  onSetAll: (state: FilterState) => void;

  onReset: () => void;

}

export function ControlPanel({ filterState, onBasicChange, onCurveChange, onSetAll, onReset }: ControlPanelProps) {

  const [open, setOpen] = useState(false);

  const [fluid, setFluid] = useState(false);

  const fluidRef = useRef(false);

  const rafRef = useRef<number>(0);

  const fromRef = useRef<FilterState>(filterState);

  const toRef = useRef<FilterState>(generateRandomState());

  const progressRef = useRef(0);

  const onSetAllRef = useRef(onSetAll);

  onSetAllRef.current = onSetAll;

  const startFluid = useCallback(() => {

    fluidRef.current = true;

    fromRef.current = filterState;

    toRef.current = generateRandomState();

    progressRef.current = 0;

    const LERP_SPEED = 0.008;

    const tick = () => {

      if (!fluidRef.current) return;

      progressRef.current += LERP_SPEED;

      if (progressRef.current >= 1) {

        fromRef.current = toRef.current;

        toRef.current = generateRandomState();

        progressRef.current = 0;

      }

      // Smooth easing

      const t = progressRef.current * progressRef.current * (3 - 2 * progressRef.current);

      const interpolated = lerpState(fromRef.current, toRef.current, t);

      onSetAllRef.current(interpolated);

      rafRef.current = requestAnimationFrame(tick);

    };

    rafRef.current = requestAnimationFrame(tick);

  }, [filterState]);

  const stopFluid = useCallback(() => {

    fluidRef.current = false;

    if (rafRef.current) cancelAnimationFrame(rafRef.current);

  }, []);

  useEffect(() => {

    return () => {

      if (rafRef.current) cancelAnimationFrame(rafRef.current);

    };

  }, []);

  const handleFluidToggle = () => {

    if (fluid) {

      stopFluid();

      setFluid(false);

    } else {

      setFluid(true);

      startFluid();

    }

  };

  const handleRandomize = () => {

    if (fluid) {

      stopFluid();

      setFluid(false);

    }

    onSetAll(generateRandomState());

  };

  const hasChanges =

    JSON.stringify(filterState.basic) !== JSON.stringify(DEFAULT_BASIC) ||

    JSON.stringify(filterState.curves) !== JSON.stringify(DEFAULT_CURVES);

  return (

    <div className={`control-panel ${open ? "open" : ""}`}>

      <button className="panel-toggle" onClick={() => setOpen(!open)}>

        {open ? "\u203A" : "\u2039"}

      </button>

      <div className="panel-content">

        <div className="panel-header">

          <span className="panel-title">CONTROLS</span>

          <div className="panel-header-actions">

            {hasChanges && (

              <button className="reset-btn" onClick={onReset}>

                RESET

              </button>

            )}

          </div>

        </div>

        <div className="randomize-section">

          <button className="randomize-btn" onClick={handleRandomize}>

            RANDOMIZE

          </button>

          <button

            className={`fluid-toggle ${fluid ? "active" : ""}`}

            onClick={handleFluidToggle}

          >

            FLUID

          </button>

        </div>

        <div className="panel-section">

          <span className="section-label">ADJUSTMENTS</span>

          <SliderGroup filters={filterState.basic} onChange={onBasicChange} />

        </div>

        <div className="panel-section">

          <span className="section-label">CURVES</span>

          <CurvesEditor curves={filterState.curves} onChange={onCurveChange} />

        </div>

      </div>

    </div>

  );

}