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

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

import { interpolateSpline } from "../lib/curves";

interface CurvesEditorProps {

  curves: CurvesState;

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

}

const SIZE = 256;

const HANDLE_RADIUS = 6;

const CHANNELS: CurveChannel[] = ["rgb", "r", "g", "b"];

const CHANNEL_LABELS: Record<CurveChannel, string> = {

  rgb: "RGB",

  r: "R",

  g: "G",

  b: "B",

};

export function CurvesEditor({ curves, onChange }: CurvesEditorProps) {

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [activeChannel, setActiveChannel] = useState<CurveChannel>("rgb");

  const draggingRef = useRef<number | null>(null);

  const points = curves[activeChannel];

  const draw = useCallback(() => {

    const canvas = canvasRef.current;

    if (!canvas) return;

    const ctx = canvas.getContext("2d");

    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;

    const w = SIZE;

    const h = SIZE;

    canvas.width = w * dpr;

    canvas.height = h * dpr;

    ctx.scale(dpr, dpr);

    // Background

    ctx.fillStyle = "#1e1c1f";

    ctx.fillRect(0, 0, w, h);

    // Grid

    ctx.strokeStyle = "#333";

    ctx.lineWidth = 0.5;

    for (let i = 1; i < 4; i++) {

      const pos = (i / 4) * w;

      ctx.beginPath();

      ctx.moveTo(pos, 0);

      ctx.lineTo(pos, h);

      ctx.stroke();

      ctx.beginPath();

      ctx.moveTo(0, pos);

      ctx.lineTo(w, pos);

      ctx.stroke();

    }

    // Diagonal reference

    ctx.strokeStyle = "#555";

    ctx.lineWidth = 1;

    ctx.setLineDash([4, 4]);

    ctx.beginPath();

    ctx.moveTo(0, h);

    ctx.lineTo(w, 0);

    ctx.stroke();

    ctx.setLineDash([]);

    // Curve

    const lut = interpolateSpline(points);

    ctx.strokeStyle = "#ffffff";

    ctx.lineWidth = 1.5;

    ctx.beginPath();

    for (let x = 0; x < 256; x++) {

      const px = (x / 255) * w;

      const py = h - (lut[x] / 255) * h;

      if (x === 0) ctx.moveTo(px, py);

      else ctx.lineTo(px, py);

    }

    ctx.stroke();

    // Control points

    for (const point of points) {

      const px = (point.x / 255) * w;

      const py = h - (point.y / 255) * h;

      ctx.fillStyle = "#121113";

      ctx.strokeStyle = "#ffffff";

      ctx.lineWidth = 1.5;

      ctx.beginPath();

      ctx.arc(px, py, HANDLE_RADIUS, 0, Math.PI * 2);

      ctx.fill();

      ctx.stroke();

    }

  }, [points]);

  useEffect(() => {

    draw();

  }, [draw]);

  function canvasToPoint(e: React.PointerEvent): { x: number; y: number } {

    const canvas = canvasRef.current!;

    const rect = canvas.getBoundingClientRect();

    const x = ((e.clientX - rect.left) / rect.width) * 255;

    const y = (1 - (e.clientY - rect.top) / rect.height) * 255;

    return { x: Math.round(x), y: Math.round(Math.max(0, Math.min(255, y))) };

  }

  function findNearestPoint(cx: number, cy: number): number | null {

    const threshold = 15;

    let bestIdx: number | null = null;

    let bestDist = Infinity;

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

      const dx = points[i].x - cx;

      const dy = points[i].y - cy;

      const dist = Math.sqrt(dx * dx + dy * dy);

      if (dist < threshold && dist < bestDist) {

        bestDist = dist;

        bestIdx = i;

      }

    }

    return bestIdx;

  }

  function handlePointerDown(e: React.PointerEvent) {

    const { x, y } = canvasToPoint(e);

    const idx = findNearestPoint(x, y);

    if (idx !== null) {

      draggingRef.current = idx;

    } else {

      // Add new point

      const newPoints = [...points, { x, y }].sort((a, b) => a.x - b.x);

      onChange(activeChannel, newPoints);

      const newIdx = newPoints.findIndex((p) => p.x === x && p.y === y);

      draggingRef.current = newIdx;

    }

    (e.target as Element).setPointerCapture(e.pointerId);

  }

  function handlePointerMove(e: React.PointerEvent) {

    if (draggingRef.current === null) return;

    const { y } = canvasToPoint(e);

    const idx = draggingRef.current;

    const updated = [...points];

    // Endpoints can only move vertically

    if (idx === 0 || idx === points.length - 1) {

      updated[idx] = { ...updated[idx], y };

    } else {

      const rect = canvasRef.current!.getBoundingClientRect();

      const rawX = ((e.clientX - rect.left) / rect.width) * 255;

      const x = Math.round(Math.max(updated[idx - 1].x + 1, Math.min(updated[idx + 1].x - 1, rawX)));

      updated[idx] = { x, y };

    }

    onChange(activeChannel, updated);

  }

  function handlePointerUp() {

    draggingRef.current = null;

  }

  function handleDoubleClick(e: React.MouseEvent) {

    const canvas = canvasRef.current!;

    const rect = canvas.getBoundingClientRect();

    const cx = ((e.clientX - rect.left) / rect.width) * 255;

    const cy = (1 - (e.clientY - rect.top) / rect.height) * 255;

    const idx = findNearestPoint(cx, cy);

    if (idx !== null && idx !== 0 && idx !== points.length - 1) {

      const updated = points.filter((_, i) => i !== idx);

      onChange(activeChannel, updated);

    }

  }

  return (

    <div className="curves-editor">

      <div className="curves-tabs">

        {CHANNELS.map((ch) => (

          <button

            key={ch}

            className={`curves-tab ${activeChannel === ch ? "active" : ""}`}

            onClick={() => setActiveChannel(ch)}

          >

            {CHANNEL_LABELS[ch]}

          </button>

        ))}

      </div>

      <canvas

        ref={canvasRef}

        className="curves-canvas"

        style={{ width: SIZE, height: SIZE }}

        onPointerDown={handlePointerDown}

        onPointerMove={handlePointerMove}

        onPointerUp={handlePointerUp}

        onDoubleClick={handleDoubleClick}

      />

    </div>

  );

}