import React, { useEffect, useMemo, useRef, useState } from "react";

const START_COLOR = { r: 26, g: 47, b: 107 }; // #1A2F6B
const END_COLOR = { r: 128, g: 0, b: 32 }; // #800020

const TOTAL_DAYS = 300;
const START_DATE = new Date(2026, 4, 8);
const END_DATE = new Date(2027, 4, 28);

// TEMPORAL VISIBILITY WINDOW
// These dates appear faded/lightened on the timeline
const FADED_START = new Date(2026, 4, 28);
const FADED_END = new Date(2027, 2, 3);



function interpolateColor(t: number) {
  const r = Math.round(START_COLOR.r + (END_COLOR.r - START_COLOR.r) * t);
  const g = Math.round(START_COLOR.g + (END_COLOR.g - START_COLOR.g) * t);
  const b = Math.round(START_COLOR.b + (END_COLOR.b - START_COLOR.b) * t);
  return `rgb(${r}, ${g}, ${b})`;
}

function formatDate(date: Date) {
  const d = date.getDate().toString().padStart(2, "0");
  const m = (date.getMonth() + 1).toString().padStart(2, "0");
  const y = date.getFullYear();
  return `${d}/${m}/${y}`;
}

export default function App() {
  const [selectedDay, setSelectedDay] = useState<number | null>(null);
  const [hoveredDay, setHoveredDay] = useState<number | null>(null);
  const [input, setInput] = useState("");
  const [predictions, setPredictions] = useState<Record<number, string[]>>({});

  // Active day controlled by Surface Dial / wheel navigation
  const [activeDay, setActiveDay] = useState(150);

  // Timeline container reference
  const timelineRef = useRef<HTMLDivElement | null>(null);

  const days = useMemo(() => {
    return Array.from({ length: TOTAL_DAYS }, (_, i) => {
      const dayNumber = i + 1;
      const t = i / (TOTAL_DAYS - 1);

      // Generate gradient color for each temporal segment
      const color = interpolateColor(t);

      const currentDate = new Date(START_DATE);
      currentDate.setDate(currentDate.getDate() + i);

      // Temporal fading effect
      // The original color still exists underneath
      const isFaded =
        currentDate >= FADED_START &&
        currentDate <= FADED_END;

      const visibleColor = color;

      return {
        index: dayNumber,
        color,
        visibleColor,
        isFaded,
        position: (i / (TOTAL_DAYS - 1)) * 100,
      };
    });
  }, []);

  const currentDate = useMemo(() => {
    if (selectedDay === null) return null;

    const d = new Date(START_DATE);
    d.setDate(d.getDate() + (selectedDay - 1));

    return d;
  }, [selectedDay]);

  /*
    SURFACE DIAL / WHEEL NAVIGATION

    - Rotating right moves forward one day
    - Rotating left moves backward one day
    - Movement snaps discretely day-by-day
    - Clicking / pressing opens the entry form

    Microsoft Surface Dial behaves similarly to a wheel event,
    so this interaction remains installation-friendly while also
    supporting mouse wheels and other rotational controllers.
  */

  useEffect(() => {
    const timelineElement = timelineRef.current;

    if (!timelineElement) return;

    let isThrottled = false;

    const handleWheel = (e: WheelEvent) => {
      // Prevent accidental rapid movement
      if (isThrottled) return;

      // Only capture horizontal-style wheel intention
      if (Math.abs(e.deltaY) < 2) return;

      isThrottled = true;

      setTimeout(() => {
        isThrottled = false;
      }, 45);

      // Rotate RIGHT → move toward Day 1
      if (e.deltaY > 0) {
        setActiveDay((prev) => Math.max(prev - 1, 1));
      }

      // Rotate LEFT → move toward Day 300
      if (e.deltaY < 0) {
        setActiveDay((prev) => Math.min(prev + 1, TOTAL_DAYS));
      }
    };

    // Surface Dial / wheel listener
    timelineElement.addEventListener("wheel", handleWheel, {
      passive: true,
    });

    // SURFACE DIAL PRESS SIMULATION
    // We use keyboard Enter/Space instead of attaching
    // another click listener to the whole timeline.
    // The previous version created event conflicts with
    // the individual day bars and blocked reliable clicking.

    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.key === "Enter" || e.key === " ") {
        setSelectedDay(activeDay);
      }
    };

    window.addEventListener("keydown", handleKeyPress);

    return () => {
      timelineElement.removeEventListener("wheel", handleWheel);
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, [activeDay]);

  function addPrediction(dayIndex: number) {
    if (!input.trim()) return;

    setPredictions((prev) => {
      const existing = prev[dayIndex] || [];

      return {
        ...prev,
        [dayIndex]: [...existing, input.trim()],
      };
    });

    setInput("");
  }

  return (
    <div className="w-full h-screen flex flex-col bg-white text-black overflow-hidden">
      {/* HEADER */}
      <div className="p-5 border-b">
        <h1 className="text-lg font-medium">
          Speculative Timeline Interface
        </h1>

        <p className="text-sm text-gray-500">
          Click a segment to attach an expectation to time
        </p>
      </div>

      {/* TIMELINE */}
      <div className="flex-1 flex items-center justify-center p-8">
        <div
          ref={timelineRef}
          className="overflow-x-auto overflow-y-hidden relative scrollbar-hide"
          style={{
            width: "100vw",
            height: "12.5cm",
            scrollBehavior: "smooth",
          }}
          onWheel={(e) => {
            if (timelineRef.current) {
              timelineRef.current.scrollLeft += e.deltaY;
            }
          }}
        >
          <div
            className="h-full flex relative"
            style={{
              width: `${TOTAL_DAYS * 8.8}cm`,
              paddingLeft: "0cm",
              paddingRight: "0cm",
            }}
          >
            {days.map((d) => {
              const hoverDate = new Date(START_DATE);
              hoverDate.setDate(hoverDate.getDate() + (d.index - 1));

              return (
                <div
                  key={d.index}
                  onMouseDown={() => {
                    // Immediate reliable interaction for tiny timeline segments
                    // onMouseDown works better than onClick for very narrow elements
                    setActiveDay(d.index);
                    setSelectedDay(d.index);
                  }}
                  onMouseEnter={() => setHoveredDay(d.index)}
                  onMouseLeave={() => setHoveredDay(null)}
                  style={{
                    background: d.visibleColor,
                    width: "8.8cm",
                    minWidth: "8.8cm",
                    height: "100%",
                    cursor: "pointer",
                    position: "relative",
                    transition: "all 0.18s ease",
                    borderRight: "1px solid rgba(255,255,255,0.12)",
                    borderLeft: "1px solid rgba(0,0,0,0.04)",
                    ...(d.index <= 150
                      ? {
                          borderTopLeftRadius: "10px",
                          borderBottomLeftRadius: "10px",
                          borderTopRightRadius: "0px",
                          borderBottomRightRadius: "0px",
                        }
                      : {
                          borderTopLeftRadius: "0px",
                          borderBottomLeftRadius: "0px",
                          borderTopRightRadius: "10px",
                          borderBottomRightRadius: "10px",
                        }),
                    filter:
                      d.index < 100
                        ? hoveredDay === d.index || activeDay === d.index
                          ? "brightness(1.12) saturate(1.05) opacity(0.72)"
                          : "brightness(1.08) saturate(1.02) opacity(0.58)"
                        : hoveredDay === d.index || activeDay === d.index
                        ? "brightness(1.05)"
                        : "brightness(1)",
                  }}
                  className="relative overflow-hidden"
                >
                  {/* ACTIVE DAY INDICATOR */}
                  {activeDay === d.index && (
                    <div
                      className="absolute inset-0 border-l-2 border-r-2 border-white/90 pointer-events-none"
                      style={{
                        boxShadow: "0 0 20px rgba(255,255,255,0.8)",
                      }}
                    />
                  )}

                  {/* HOVER + SURFACE DIAL TOOLTIP */}
                  {(hoveredDay === d.index || activeDay === d.index) && (
                    <div
                      className="absolute z-10 px-2 py-1 text-xs bg-black text-white rounded pointer-events-none"
                      style={{
                        top: "12px",
                        left: `${(d.index / TOTAL_DAYS) * 100}%`,
                        transform: "translateX(-50%)",
                        whiteSpace: "nowrap",
                      }}
                    >
                      Day {d.index} • {formatDate(hoverDate)}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* MODAL */}
      {selectedDay !== null && (
        <div
          className="fixed inset-0 w-screen h-screen bg-black/10 z-20"
          onClick={() => setSelectedDay(null)}
        >
          <div
            className="shadow-2xl p-6 absolute border border-white/20 backdrop-blur-sm"
            style={{
              width: "8.8cm",
              height: "12.5cm",
              borderRadius: "0px",
              background:
                selectedDay !== null
                  ? days[selectedDay - 1]?.color
                  : "white",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              zIndex: 30,
              color: "white",
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <button
              onClick={() => setSelectedDay(null)}
              className="absolute top-4 right-4 text-white/70 hover:text-white"
            >
              ✕
            </button>

            <h2 className="text-xl font-medium mb-1">
              Day {selectedDay}
            </h2>

            <p className="text-sm text-white/70 mb-5">
              {currentDate ? formatDate(currentDate) : ""}
            </p>

            <div className="mb-4">
              {(predictions[selectedDay] || []).length > 0 && (
                <>
                  <h3 className="text-sm font-medium mb-2">
                    Public expectations
                  </h3>

                  <div className="space-y-2 text-sm max-h-40 overflow-auto border border-white/20 rounded-lg p-3 bg-white/10 backdrop-blur-sm">
                    {(predictions[selectedDay] || []).map((p, i) => (
                      <div
                        key={i}
                        className="p-2 bg-white/20 border border-white/20 rounded text-white"
                      >
                        {p}
                      </div>
                    ))}
                  </div>
              )}
            </div>

            <div className="space-y-3">
              <textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Write an expectation for this day..."
                className="w-full border border-white/20 bg-white/10 rounded-lg p-3 text-sm h-28 resize-none placeholder:text-white/50 text-white"
              />

              <button
                onClick={() => addPrediction(selectedDay)}
                className="w-full py-3 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition border border-white/20"
              >
                Submit Expectation
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}