import React, { useState } from "react";
import type { GraphSpec } from "./types";
import { useViewport } from "./useViewport";
import { RegionLayer } from "./RegionLayer";
import { PolylineLayer } from "./PolylineLayer";
import { CurveLayer } from "./CurveLayer";
import { GuideLayer } from "./GuideLayer";
import { ArrowLayer } from "./ArrowLayer";
import { PointLayer } from "./PointLayer";
import { GraphTooltip } from "./GraphTooltip";

interface EconGraphProps {
  spec: GraphSpec;
  width?: number;
  height?: number;
  className?: string;
}

function computeTicks(max: number, customStep?: number): number[] {
  if (customStep && customStep > 0) {
    const ticks: number[] = [];
    for (let v = 0; v <= max + 1e-6; v += customStep) {
      ticks.push(Number(v.toFixed(4)));
    }
    return ticks;
  }

  let step = 5;
  if (max <= 5) step = 1;
  else if (max <= 12) step = 2;
  else if (max <= 25) step = 5;
  else if (max <= 50) step = 10;
  else if (max <= 120) step = 20;
  else step = Math.max(1, Math.round(max / 5));

  const ticks: number[] = [];
  for (let v = 0; v <= max + 1e-6; v += step) {
    ticks.push(Number(v.toFixed(4)));
  }
  return ticks;
}

export const EconGraph: React.FC<EconGraphProps> = ({
  spec,
  width = 680,
  height = 480,
  className = "",
}) => {
  const [hoverState, setHoverState] = useState<{
    screenX: number;
    screenY: number;
    modelX: number;
    modelY: number;
  } | null>(null);

  const [compactLabels, setCompactLabels] = useState<boolean>(false);
  const [showDrops, setShowDrops] = useState<boolean>(true);

  const viewport = useViewport({
    maxX: spec.xAxis.max,
    maxY: spec.yAxis.max,
    width,
    height,
    xStep: spec.xAxis.step,
    yStep: spec.yAxis.step,
  });

  const xTicks = computeTicks(spec.xAxis.max, spec.xAxis.step);
  const yTicks = computeTicks(spec.yAxis.max, spec.yAxis.step);

  const plotLeft = viewport.padding.left;
  const plotRight = viewport.width - viewport.padding.right;
  const plotTop = viewport.padding.top;
  const plotBottom = viewport.height - viewport.padding.bottom;

  const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>): void => {
    const rect = e.currentTarget.getBoundingClientRect();
    if (rect.width <= 0 || rect.height <= 0) return;

    const sx = ((e.clientX - rect.left) / rect.width) * viewport.width;
    const sy = ((e.clientY - rect.top) / rect.height) * viewport.height;

    if (sx >= plotLeft && sx <= plotRight && sy >= plotTop && sy <= plotBottom) {
      const modelX = viewport.toModelX(sx);
      const modelY = viewport.toModelY(sy);
      setHoverState({
        screenX: sx,
        screenY: sy,
        modelX,
        modelY,
      });
    } else {
      setHoverState(null);
    }
  };

  const handleMouseLeave = (): void => {
    setHoverState(null);
  };

  const xAxisLabel = spec.xAxis.unit
    ? `${spec.xAxis.label} (${spec.xAxis.unit})`
    : spec.xAxis.label;

  const yAxisLabel = spec.yAxis.unit
    ? `${spec.yAxis.label} (${spec.yAxis.unit})`
    : spec.yAxis.label;

  return (
    <div
      className={`relative w-full overflow-hidden rounded-xl bg-white border border-slate-200 shadow-sm ${className}`}
    >
      {/* Top Header inside card: Title + Display Controls + Legend */}
      <div className="flex flex-col gap-2 px-4 pt-3 pb-2.5 border-b border-slate-100 bg-slate-50/50">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div>
            <h3 className="text-sm font-bold text-slate-800">{spec.title}</h3>
            {spec.subtitle && (
              <p className="text-xs text-slate-500">{spec.subtitle}</p>
            )}
          </div>

          {/* Quick view controls to declutter complex charts */}
          <div className="flex items-center gap-1.5">
            <button
              type="button"
              onClick={() => setCompactLabels((prev) => !prev)}
              className={`px-2.5 py-1 rounded-md text-[11px] font-semibold border transition-colors cursor-pointer ${
                compactLabels
                  ? "bg-indigo-50 text-indigo-700 border-indigo-200"
                  : "bg-white text-slate-600 border-slate-200 hover:bg-slate-100"
              }`}
              title="Chuyển đổi giữa nhãn đầy đủ A (10, 10) và nhãn ký hiệu gọn A, B"
            >
              {compactLabels ? "Nhãn: Gọn (A, B)" : "Nhãn: Kèm tọa độ"}
            </button>
            <button
              type="button"
              onClick={() => setShowDrops((prev) => !prev)}
              className={`px-2.5 py-1 rounded-md text-[11px] font-semibold border transition-colors cursor-pointer ${
                showDrops
                  ? "bg-white text-slate-600 border-slate-200 hover:bg-slate-100"
                  : "bg-slate-100 text-slate-500 border-slate-200"
              }`}
              title="Bật hoặc tắt đường gióng nét đứt từ điểm xuống hai trục"
            >
              {showDrops ? "Đường gióng: Bật" : "Đường gióng: Ẩn"}
            </button>
          </div>
        </div>

        {spec.legends && spec.legends.length > 0 && (
          <div className="flex flex-wrap items-center gap-x-3.5 gap-y-1 text-xs text-slate-600 pt-0.5">
            {spec.legends.map((lg, i) => (
              <div key={i} className="flex items-center gap-1.5 font-medium">
                {lg.style === "dashed" && (
                  <span
                    className="inline-block w-4 h-0 border-b-2 border-dashed"
                    style={{ borderColor: lg.color }}
                  />
                )}
                {lg.style === "area" && (
                  <span
                    className="inline-block w-3.5 h-3.5 rounded-xs opacity-75"
                    style={{ backgroundColor: lg.color }}
                  />
                )}
                {lg.style === "point" && (
                  <span
                    className="inline-block w-2.5 h-2.5 rounded-full"
                    style={{ backgroundColor: lg.color }}
                  />
                )}
                {(!lg.style || lg.style === "solid") && (
                  <span
                    className="inline-block w-4 h-0.5 rounded-xs"
                    style={{ backgroundColor: lg.color }}
                  />
                )}
                <span>{lg.label}</span>
              </div>
            ))}
          </div>
        )}
      </div>

      <svg
        viewBox={`0 0 ${viewport.width} ${viewport.height}`}
        className="w-full h-auto select-none block"
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      >
        <defs>
          <marker
            id="axis-arrow-x"
            viewBox="0 0 10 10"
            refX="6"
            refY="5"
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <path d="M 0 2 L 8 5 L 0 8 z" fill="#475569" />
          </marker>
          <marker
            id="axis-arrow-y"
            viewBox="0 0 10 10"
            refX="6"
            refY="5"
            markerWidth="6"
            markerHeight="6"
            orient="auto"
          >
            <path d="M 0 2 L 8 5 L 0 8 z" fill="#475569" />
          </marker>
        </defs>

        {/* Grid lines */}
        <g className="grid-lines">
          {xTicks.map((x) => {
            if (x === 0) return null;
            const sx = viewport.toScreenX(x);
            return (
              <line
                key={`grid-x-${x}`}
                x1={sx}
                y1={plotTop}
                x2={sx}
                y2={plotBottom}
                stroke="#f1f5f9"
                strokeWidth={1}
              />
            );
          })}
          {yTicks.map((y) => {
            if (y === 0) return null;
            const sy = viewport.toScreenY(y);
            return (
              <line
                key={`grid-y-${y}`}
                x1={plotLeft}
                y1={sy}
                x2={plotRight}
                y2={sy}
                stroke="#f1f5f9"
                strokeWidth={1}
              />
            );
          })}
        </g>

        {/* Dynamic Graphic Layers */}
        <RegionLayer regions={spec.regions} viewport={viewport} />
        <CurveLayer
          curves={spec.curves}
          points={spec.points}
          viewport={viewport}
          compactLabels={compactLabels}
        />
        <PolylineLayer polylines={spec.polylines} viewport={viewport} />
        <GuideLayer
          guides={spec.guides}
          viewport={viewport}
          showPointDrops={showDrops}
        />
        <ArrowLayer arrows={spec.arrows} viewport={viewport} />

        {/* Axes lines */}
        <g className="axes-lines">
          {/* X Axis */}
          <line
            x1={plotLeft}
            y1={plotBottom}
            x2={plotRight + 20}
            y2={plotBottom}
            stroke="#475569"
            strokeWidth={1.8}
            markerEnd="url(#axis-arrow-x)"
          />
          {/* Y Axis */}
          <line
            x1={plotLeft}
            y1={plotBottom}
            x2={plotLeft}
            y2={plotTop - 20}
            stroke="#475569"
            strokeWidth={1.8}
            markerEnd="url(#axis-arrow-y)"
          />
        </g>

        {/* Ticks and numerical labels */}
        <g className="axis-ticks">
          {/* X ticks */}
          {xTicks.map((x) => {
            const sx = viewport.toScreenX(x);
            return (
              <g key={`tick-x-${x}`}>
                <line
                  x1={sx}
                  y1={plotBottom}
                  x2={sx}
                  y2={plotBottom + 5}
                  stroke="#64748b"
                  strokeWidth={1.2}
                />
                <text
                  x={sx}
                  y={plotBottom + 18}
                  textAnchor="middle"
                  className="text-[11px] font-mono font-medium fill-slate-500"
                >
                  {x}
                </text>
              </g>
            );
          })}

          {/* Y ticks */}
          {yTicks.map((y) => {
            const sy = viewport.toScreenY(y);
            return (
              <g key={`tick-y-${y}`}>
                <line
                  x1={plotLeft - 5}
                  y1={sy}
                  x2={plotLeft}
                  y2={sy}
                  stroke="#64748b"
                  strokeWidth={1.2}
                />
                <text
                  x={plotLeft - 8}
                  y={sy}
                  textAnchor="end"
                  dominantBaseline="central"
                  className="text-[11px] font-mono font-medium fill-slate-500"
                >
                  {y}
                </text>
              </g>
            );
          })}
        </g>

        {/* Axis Names */}
        <g className="axis-labels">
          {/* X axis name at bottom right */}
          <text
            x={plotRight + 12}
            y={plotBottom + 32}
            textAnchor="end"
            className="text-xs font-bold fill-slate-700"
          >
            {xAxisLabel}
          </text>

          {/* Y axis name at top left */}
          <text
            x={plotLeft}
            y={plotTop - 24}
            textAnchor="start"
            className="text-xs font-bold fill-slate-700"
          >
            {yAxisLabel}
          </text>
        </g>

        {/* Point Layer on top of axes with smart collision avoidance */}
        <PointLayer
          points={spec.points}
          polylines={spec.polylines}
          viewport={viewport}
          compactLabels={compactLabels}
        />

        {/* Interactive hover tooltip & crosshairs */}
        {hoverState && (
          <GraphTooltip
            modelX={hoverState.modelX}
            modelY={hoverState.modelY}
            screenX={hoverState.screenX}
            screenY={hoverState.screenY}
            viewport={viewport}
            evaluator={spec.tooltipEvaluator}
          />
        )}
      </svg>
    </div>
  );
};