import { useState, useEffect, useCallback, useMemo } from 'react';
import { __ } from '../lib/i18n';
import { Button } from '@/components/ui/button';
import { LoadingSpinner } from './screen-loader';
import {
  ResponsiveContainer,
  ComposedChart,
  CartesianGrid,
  Line,
  Area,
  XAxis,
  YAxis,
  Tooltip,
} from 'recharts';

type TimeRange = '7d' | '30d' | '90d';

interface TimelinePoint {
  date: string;
  score: number | null;
}

interface TimelineData {
  range: string;
  interval: string;
  current_score: number | null;
  previous_score: number | null;
  delta: number | null;
  delta_percent: number | null;
  trend: 'up' | 'down' | 'flat' | 'na';
  points: TimelinePoint[];
}

interface VisibilityTimelineProps {
  apiRoot: string;
  apiNamespace: string;
}

// ─── Chart data shape ────────────────────────────────────────────────────────

interface ChartPoint {
  date: string;
  score: number | null;
  /** Set on the junction point + every projected day after the last real data */
  projectedScore: number | null;
  chartIsForecast: boolean;
}

function dateToStr(d: Date): string {
  return [
    d.getFullYear(),
    String(d.getMonth() + 1).padStart(2, '0'),
    String(d.getDate()).padStart(2, '0'),
  ].join('-');
}

function rangeTodays(range: TimeRange): number {
  return range === '7d' ? 7 : range === '30d' ? 30 : 90;
}

/**
 * Build the full date range for the chart.
 *
 * Rules:
 * - Every day in [today - (rangeDays-1) … today] appears on the X-axis.
 * - Days with a real API score          → solid line, real dot.
 * - Past days with no record            → carry-forward last known score, solid line.
 *   (They happened; we just didn't recalculate that day.)
 * - Today, only if it has no record yet → single dashed projected point + hollow dot.
 *   The previous solid point is the junction (gets projectedScore = its own score).
 */
function buildChartData(points: TimelinePoint[], rangeDays: number): ChartPoint[] {
  const realMap = new Map<string, number>();
  for (const p of points) {
    if (p.score !== null) realMap.set(p.date, p.score);
  }

  if (realMap.size === 0) return [];

  const today = new Date();
  const todayISO = dateToStr(today);
  const hasToday = realMap.has(todayISO);

  // Generate every date in the range
  const allDates: string[] = [];
  for (let i = rangeDays - 1; i >= 0; i--) {
    const d = new Date(today);
    d.setDate(d.getDate() - i);
    allDates.push(dateToStr(d));
  }

  const result: ChartPoint[] = [];
  let lastKnownScore: number | null = null;

  for (const date of allDates) {
    const realScore = realMap.get(date) ?? null;
    if (realScore !== null) lastKnownScore = realScore;

    if (date === todayISO) {
      if (hasToday) {
        // Today has a real record → solid
        result.push({ date, score: realScore, projectedScore: null, chartIsForecast: false });
      } else if (lastKnownScore !== null) {
        // Today has no record → projected (dashed). Mark previous point as junction.
        if (result.length > 0) {
          const prev = result[result.length - 1];
          result[result.length - 1] = { ...prev, projectedScore: prev.score };
        }
        result.push({ date, score: null, projectedScore: lastKnownScore, chartIsForecast: true });
      }
    } else {
      // Past day: use real score if available, otherwise carry forward last known (solid)
      const scoreToUse = realScore ?? lastKnownScore;
      if (scoreToUse !== null) {
        result.push({ date, score: scoreToUse, projectedScore: null, chartIsForecast: false });
      }
      // Skip days before the first data point (no score to carry forward yet)
    }
  }

  return result;
}

// ─── Tooltip ────────────────────────────────────────────────────────────────

interface TooltipPayloadItem {
  value: number;
  dataKey: string;
}

interface CustomTooltipProps {
  active?: boolean;
  payload?: TooltipPayloadItem[];
  label?: string;
}

function fmtDate(dateStr: string) {
  return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
  });
}

function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
  if (!active || !payload?.length || !label) return null;

  const realScore = payload.find((p) => p.dataKey === 'score')?.value;
  const projScore = payload.find((p) => p.dataKey === 'projectedScore')?.value;
  const score     = realScore ?? projScore;
  if (score == null) return null;

  const chartIsForecast = realScore == null && projScore != null;

  return (
    <div
      className="rounded-2xl bg-white/95 px-4 py-3 shadow-[0_20px_60px_rgba(0,0,0,0.15)] backdrop-blur"
      style={{ minWidth: 120 }}
    >
      <div className="text-xs text-gray-400 mb-0.5">
        {fmtDate(label)}
        {chartIsForecast && (
          <span className="ml-1 text-purple-400">({__('projected', 'llmagnet-llm-txt-generator')})</span>
        )}
      </div>
      <div className="text-xl font-semibold" style={{ opacity: chartIsForecast ? 0.7 : 1 }}>
        {score.toFixed(1)}
      </div>
    </div>
  );
}

// ─── Dots ────────────────────────────────────────────────────────────────────

interface DotBaseProps {
  cx?: number;
  cy?: number;
  index?: number;
}

interface RealDotProps extends DotBaseProps {
  activeIndex: number | null;
  setHoverIndex: (i: number | null) => void;
  pinnedIndex: number | null;
  togglePin: (i: number) => void;
  chartData: ChartPoint[];
}

/** Solid interactive dot — only for real (non-projected) points on the score line */
function RealDot({ cx, cy, index, activeIndex, setHoverIndex, pinnedIndex, togglePin, chartData }: RealDotProps) {
  if (cx == null || cy == null || index == null) return null;
  // Don't render a dot at the projected-today slot (score is null there)
  if (chartData[index]?.score == null) return null;

  const isActive = index === activeIndex;
  return (
    <circle
      cx={cx}
      cy={cy}
      r={isActive ? 10 : 7}
      fill="rgba(168, 85, 247, 1)"
      stroke="white"
      strokeWidth={isActive ? 5 : 4}
      style={{ cursor: 'pointer', transition: 'all 0.15s ease' }}
      onMouseEnter={() => { if (pinnedIndex == null) setHoverIndex(index!); }}
      onMouseLeave={() => { if (pinnedIndex == null) setHoverIndex(null); }}
      onClick={() => togglePin(index!)}
    />
  );
}

interface ProjectedDotProps extends DotBaseProps {
  chartData: ChartPoint[];
}

/** Hollow dashed dot — only for the today projected point */
function ProjectedDot({ cx, cy, index, chartData }: ProjectedDotProps) {
  if (cx == null || cy == null || index == null) return null;
  // Only render on the actual projected (today) point, not the junction
  if (!chartData[index]?.chartIsForecast) return null;

  return (
    <circle
      cx={cx}
      cy={cy}
      r={6}
      fill="white"
      stroke="rgba(168, 85, 247, 0.7)"
      strokeWidth={3}
      strokeDasharray="3 2"
      style={{ pointerEvents: 'none' }}
    />
  );
}

// ─── Hover bar cursor ────────────────────────────────────────────────────────

interface HoverBarCursorProps {
  viewBox?: { x?: number; y?: number; width?: number; height?: number };
  points?: Array<{ x: number; y: number }>;
  width?: number;
  height?: number;
}

function HoverBarCursor(props: HoverBarCursorProps) {
  const DOT_R = 10, DOT_STROKE = 5, BAR_W = 44;
  const vb  = props?.viewBox;
  const pts = Array.isArray(props?.points) ? props.points : [];

  const p = pts.length
    ? pts.reduce((acc, cur) => (cur?.y > (acc?.y ?? -Infinity) ? cur : acc), pts[0])
    : null;

  const x0 = typeof vb?.x === 'number' ? vb.x : 0;
  const y0 = typeof vb?.y === 'number' ? vb.y : 0;
  const w  = typeof vb?.width  === 'number' ? vb.width  : props?.width;
  const h  = typeof vb?.height === 'number' ? vb.height : props?.height;

  if (!p || typeof p.x !== 'number' || typeof p.y !== 'number' || typeof h !== 'number') return null;

  const bottomY = y0 + h;
  const startY  = Math.min(bottomY, p.y + DOT_R + DOT_STROKE / 2);
  const barH    = Math.max(0, bottomY - startY);
  if (barH <= 1) return null;

  const rawX  = p.x - BAR_W / 2;
  const maxX  = typeof w === 'number' ? x0 + w - BAR_W : rawX;
  const barX  = typeof w === 'number' ? Math.max(x0, Math.min(rawX, maxX)) : rawX;
  const r     = Math.min(18, BAR_W / 2, barH / 2);
  const xL = barX, xR = barX + BAR_W, yT = startY, yB = startY + barH;

  const d = [
    `M ${xL} ${yT}`, `L ${xR} ${yT}`,
    `L ${xR} ${yB - r}`, `Q ${xR} ${yB} ${xR - r} ${yB}`,
    `L ${xL + r} ${yB}`, `Q ${xL} ${yB} ${xL} ${yB - r}`, 'Z',
  ].join(' ');

  return (
    <g style={{ pointerEvents: 'none' }}>
      <path d={d} fill="url(#tlHoverColBg)" />
      <path d={d} fill="url(#tlHoverColValue)" opacity={0.9} />
    </g>
  );
}

// ─── Range selector ──────────────────────────────────────────────────────────

const RANGES: { label: string; value: TimeRange }[] = [
  { label: '7d',  value: '7d'  },
  { label: '30d', value: '30d' },
  { label: '90d', value: '90d' },
];

// ─── Main component ──────────────────────────────────────────────────────────

export function VisibilityTimeline({ apiRoot, apiNamespace }: VisibilityTimelineProps) {
  const [range, setRange]             = useState<TimeRange>('7d');
  const [data, setData]               = useState<TimelineData | null>(null);
  const [loading, setLoading]         = useState(true);
  const [error, setError]             = useState<string | null>(null);
  const [hoverIndex, setHoverIndex]   = useState<number | null>(null);
  const [pinnedIndex, setPinnedIndex] = useState<number | null>(null);

  const activeIndex = pinnedIndex ?? hoverIndex;

  const togglePin = (idx: number) => {
    if (!Number.isFinite(idx)) return;
    setPinnedIndex((prev) => (prev === idx ? null : idx));
  };

  const fetchTimeline = useCallback(
    async (selectedRange: TimeRange) => {
      setLoading(true);
      setError(null);
      try {
        const nonce = (window as any).wpApiSettings?.nonce || '';
        const res   = await fetch(
          `${apiRoot}${apiNamespace}/visibility/timeline?range=${selectedRange}`,
          { headers: { 'X-WP-Nonce': nonce } }
        );
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setData(await res.json());
      } catch {
        setError(__('Failed to load timeline data.', 'llmagnet-llm-txt-generator'));
      } finally {
        setLoading(false);
      }
    },
    [apiRoot, apiNamespace]
  );

  useEffect(() => { fetchTimeline(range); }, [range, fetchTimeline]);

  // Build the full date-range array with real + projected carry-forward points
  const chartData = useMemo(
    () => buildChartData(data?.points ?? [], rangeTodays(range)),
    [data, range]
  );

  // Only 1 real point is enough — carry-forward fills the rest
  const isEmpty = chartData.filter((p) => p.score !== null).length < 1;

  // XAxis tick formatter — show a label every N days depending on range
  // interval={0} on XAxis forces all ticks to render; we return '' to hide them
  const tickFmt = (val: string, index: number) => {
    const total = chartData.length;
    const step = total > 60 ? 30   // 90d → label every 30 days
               : total > 14 ? 5    // 30d → label every 5 days
               : 1;                // 7d  → label every day
    if (index % step !== 0) return '';
    return fmtDate(val);
  };

  return (
    <div className="flex h-full min-h-0 w-full flex-col">
      {/* Header */}
      <div className="mb-2 flex h-[39px] shrink-0 items-center justify-between">
        <h3 className="text-xl font-semibold text-gray-900">{__('Visibility Score Over Time', 'llmagnet-llm-txt-generator')}</h3>
        <div className="flex items-center gap-1">
          {RANGES.map(({ label, value }) => (
            <button
              key={value}
              disabled={loading}
              onClick={() => { setPinnedIndex(null); setRange(value); }}
              className={[
                'px-3 py-1 text-xs font-medium rounded-md border transition-colors',
                range === value
                  ? 'bg-purple-600 border-purple-600 text-white'
                  : 'bg-white border-gray-200 text-gray-500 hover:bg-gray-50',
                loading ? 'opacity-50 cursor-default' : 'cursor-pointer',
              ].join(' ')}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {(!(!loading && data && !isEmpty)) && (
        <p className="text-sm text-gray-500 mb-4">{__('Visibility score over time', 'llmagnet-llm-txt-generator')}</p>
      )}

      {/* Chart area */}
      <div className="relative min-h-[290px] w-full flex-1">
        {loading && (
          <div className="flex items-center justify-center h-full">
            <LoadingSpinner />
          </div>
        )}

        {!loading && error && (
          <div className="flex flex-col items-center justify-center h-full gap-3">
            <p className="text-gray-400">{error}</p>
            <Button type="button" variant="outline" size="sm" onClick={() => fetchTimeline(range)}>
              {__('Retry', 'llmagnet-llm-txt-generator')}
            </Button>
          </div>
        )}

        {!loading && !error && isEmpty && (
          <div className="flex flex-col items-center justify-center h-full gap-3">
            <p className="text-gray-400 text-center px-8">
              {__('Not enough visibility history yet. Keep tracking to see trends.', 'llmagnet-llm-txt-generator')}
            </p>
            <Button type="button" variant="outline" size="sm" onClick={() => fetchTimeline(range)}>
              {__('Refresh score data', 'llmagnet-llm-txt-generator')}
            </Button>
          </div>
        )}

        {!loading && !error && !isEmpty && (
          <ResponsiveContainer>
            <ComposedChart
              data={chartData}
              margin={{ top: 10, right: 20, left: 10, bottom: 10 }}
              onMouseMove={(state: any) => {
                if (pinnedIndex != null) return;
                const idx = state?.activeTooltipIndex;
                setHoverIndex(Number.isFinite(idx) ? idx : null);
              }}
              onMouseLeave={() => { if (pinnedIndex == null) setHoverIndex(null); }}
              onClick={(state: any) => {
                const idx = state?.activeTooltipIndex;
                if (Number.isFinite(idx)) togglePin(idx);
              }}
            >
              <defs>
                <linearGradient id="tlFillV" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(168, 85, 247, 0.35)" />
                  <stop offset="100%" stopColor="rgba(168, 85, 247, 0.00)" />
                </linearGradient>
                <linearGradient id="tlHoverColBg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgb(168, 85, 247)" stopOpacity={0.16} />
                  <stop offset="100%" stopColor="rgb(168, 85, 247)" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="tlHoverColValue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgb(168, 85, 247)" stopOpacity={0.5} />
                  <stop offset="100%" stopColor="rgb(168, 85, 247)" stopOpacity={0} />
                </linearGradient>
              </defs>

              <CartesianGrid
                stroke="#e5e7eb"
                horizontal
                vertical={false}
              />

              <XAxis
                dataKey="date"
                axisLine={false}
                tickLine={false}
                tick={{ fill: 'rgba(0,0,0,0.35)', fontSize: 12 }}
                dy={12}
                interval={0}
                tickFormatter={tickFmt}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                tick={{ fill: 'rgba(0,0,0,0.35)', fontSize: 14 }}
                width={44}
                domain={[0, 100]}
                ticks={[0, 25, 50, 75, 100]}
              />

              <Tooltip content={<CustomTooltip />} cursor={<HoverBarCursor />} />

              {/* Gradient fill — real data only */}
              <Area
                type="monotone"
                dataKey="score"
                fill="url(#tlFillV)"
                stroke="none"
                isAnimationActive={false}
                connectNulls={false}
              />

              {/* Solid line — real data only */}
              <Line
                type="monotone"
                dataKey="score"
                stroke="rgba(168, 85, 247, 0.92)"
                strokeWidth={4}
                dot={(props: any) => (
                  <RealDot
                    key={`rdot-${props.index}`}
                    {...props}
                    activeIndex={activeIndex}
                    setHoverIndex={setHoverIndex}
                    pinnedIndex={pinnedIndex}
                    togglePin={togglePin}
                    chartData={chartData}
                  />
                )}
                activeDot={false}
                isAnimationActive={false}
                connectNulls={false}
              />

              {/* Dashed line — projected segment (junction → today) only */}
              <Line
                type="monotone"
                dataKey="projectedScore"
                stroke="rgba(168, 85, 247, 0.7)"
                strokeWidth={4}
                strokeDasharray="7 5"
                dot={(props: any) => (
                  <ProjectedDot
                    key={`pdot-${props.index}`}
                    {...props}
                    chartData={chartData}
                  />
                )}
                activeDot={false}
                isAnimationActive={false}
                connectNulls={false}
              />
            </ComposedChart>
          </ResponsiveContainer>
        )}
      </div>
    </div>
  );
}