/**
 * TimelineSlide.tsx
 * Slide 2 (when --timeline is used): Career Trajectory.
 * Horizontal timeline showing roles (and optionally education) with
 * highlighted nodes for experience most relevant to the target role.
 * Designed for 1080x1080 square format.
 */

import React from 'react';
import type { SlideContent, TimelineEntry } from '../../schema/carouselSchema';
import type { Theme } from '../themes';

interface TimelineSlideProps {
  slide: SlideContent;
  theme: Theme;
}

// Education node accent — indigo, stands apart from the role accent
const EDU_COLOR = '#6366F1';

const TIMELINE_Y = 680;          // px from top — vertical center of the line
const X_START = 160;             // enough room for leftmost label
const X_END = 960;
const X_SPAN = X_END - X_START;
const MIN_NODE_GAP = 180;        // minimum px between node centres

function getX(year: string, minYear: number, yearSpan: number): number {
  const y = parseInt(year, 10);
  if (isNaN(y) || yearSpan === 0) return X_START;
  return X_START + ((y - minYear) / yearSpan) * X_SPAN;
}

/**
 * Enforce a minimum gap between node positions.
 * If two consecutive nodes are too close, push right ones outward.
 */
function enforceMinGap(positions: number[]): number[] {
  if (positions.length <= 1) return positions;
  const result = [...positions];
  for (let i = 1; i < result.length; i++) {
    if (result[i] - result[i - 1] < MIN_NODE_GAP) {
      result[i] = result[i - 1] + MIN_NODE_GAP;
    }
  }
  // If we pushed the last node beyond X_END, scale back proportionally
  const overflow = result[result.length - 1] - X_END;
  if (overflow > 0) {
    const shift = overflow / (result.length - 1);
    for (let i = 1; i < result.length; i++) {
      result[i] -= shift * i;
    }
  }
  return result;
}

function NodeCircle({
  x,
  entry,
  accentColor,
  isPrimary,
}: {
  x: number;
  entry: TimelineEntry;
  accentColor: string;
  isPrimary: boolean;   // top-scoring role → full accent; others → muted
}): React.ReactElement {
  const r = entry.isCurrent ? 22 : isPrimary ? 17 : entry.isHighlighted ? 13 : 9;
  const fill = entry.isEducation
    ? EDU_COLOR
    : isPrimary || entry.isCurrent
    ? accentColor
    : entry.isHighlighted
    ? `${accentColor}99`   // 60% opacity of accent for secondary highlighted
    : '#CBD5E1';

  return (
    <div
      style={{
        position: 'absolute',
        left: `${x - r}px`,
        top: `${TIMELINE_Y - r}px`,
        width: `${r * 2}px`,
        height: `${r * 2}px`,
        borderRadius: entry.isEducation ? '3px' : '50%',
        transform: entry.isEducation ? 'rotate(45deg)' : 'none',
        background: fill,
        boxShadow: entry.isCurrent
          ? `0 0 0 6px ${accentColor}35, 0 0 0 12px ${accentColor}15`
          : isPrimary
          ? `0 0 0 4px ${accentColor}20`
          : 'none',
        zIndex: 2,
      }}
    />
  );
}

function ConnectorLine({
  x,
  isAbove,
  isHighlighted,
  isEducation,
  accentColor,
}: {
  x: number;
  isAbove: boolean;
  isHighlighted: boolean;
  isEducation: boolean;
  accentColor: string;
}): React.ReactElement {
  const color = isEducation ? EDU_COLOR : isHighlighted ? accentColor : '#D1D5DB';
  const h = 120;
  return (
    <div
      style={{
        position: 'absolute',
        left: `${x - 1}px`,
        top: isAbove ? `${TIMELINE_Y - h}px` : `${TIMELINE_Y}px`,
        width: '2px',
        height: `${h}px`,
        background: color,
        opacity: isHighlighted || isEducation ? 0.9 : 0.4,
        zIndex: 1,
      }}
    />
  );
}

function EntryLabel({
  x,
  entry,
  isAbove,
  accentColor,
  textColor,
  subtextColor,
  isPrimary,
}: {
  x: number;
  entry: TimelineEntry;
  isAbove: boolean;
  accentColor: string;
  textColor: string;
  subtextColor: string;
  isPrimary: boolean;
}): React.ReactElement {
  const BOX_W = 170;
  const left = Math.min(Math.max(x - BOX_W / 2, 20), X_END - BOX_W);
  const labelTop = isAbove ? TIMELINE_Y - 250 : TIMELINE_Y + 130;
  const sublabelTop = isAbove ? TIMELINE_Y - 208 : TIMELINE_Y + 168;
  const yearTop = isAbove ? TIMELINE_Y + 34 : TIMELINE_Y - 54;

  const labelColor = entry.isEducation
    ? EDU_COLOR
    : entry.isCurrent
    ? accentColor
    : isPrimary
    ? textColor
    : entry.isHighlighted
    ? `${textColor}BB`
    : subtextColor;

  return (
    <>
      {/* Year */}
      <div
        style={{
          position: 'absolute',
          left: `${x}px`,
          top: `${yearTop}px`,
          transform: 'translateX(-50%)',
          fontSize: '13px',
          color: subtextColor,
          fontWeight: 500,
        }}
      >
        {entry.year}
      </div>

      {/* Title label */}
      <div
        style={{
          position: 'absolute',
          left: `${left}px`,
          top: `${labelTop}px`,
          width: `${BOX_W}px`,
          textAlign: 'center',
          fontSize: isPrimary || entry.isCurrent ? '17px' : entry.isHighlighted ? '15px' : '13px',
          fontWeight: isPrimary || entry.isCurrent ? 700 : entry.isHighlighted ? 600 : 400,
          color: labelColor,
          lineHeight: 1.25,
        }}
      >
        {entry.label}
      </div>

      {/* Sublabel (employer / institution) */}
      {entry.sublabel && (
        <div
          style={{
            position: 'absolute',
            left: `${left}px`,
            top: `${sublabelTop}px`,
            width: `${BOX_W}px`,
            textAlign: 'center',
            fontSize: '12px',
            color: subtextColor,
            opacity: 0.8,
            lineHeight: 1.2,
          }}
        >
          {entry.sublabel}
        </div>
      )}
    </>
  );
}

export function TimelineSlide({ slide, theme }: TimelineSlideProps): React.ReactElement {
  const {
    bgColor,
    accentColor,
    textColor,
    subtextColor,
    fontFamily,
    borderColor,
  } = theme;

  const entries: TimelineEntry[] = slide.timelineEntries ?? [];
  const years = entries.map((e) => parseInt(e.year, 10)).filter((y) => !isNaN(y));
  const minYear = years.length ? Math.min(...years) : new Date().getFullYear() - 5;
  const maxYear = years.length ? Math.max(...years) : new Date().getFullYear();
  const yearSpan = Math.max(maxYear - minYear, 1);

  // Compute x positions with minimum gap enforcement
  const rawPositions = entries.map((e) => getX(e.year, minYear, yearSpan));
  const nodePositions = enforceMinGap(rawPositions);

  // Top 2 highlighted (non-education) roles get full accent treatment
  const highlightedIndices = entries
    .map((e, i) => ({ e, i }))
    .filter(({ e }) => e.isHighlighted && !e.isEducation)
    .map(({ i }) => i);
  const primarySet = new Set(highlightedIndices.slice(0, 2));

  const hasEducation = entries.some((e) => e.isEducation);
  const slideNumStr = String(slide.slideNumber).padStart(2, '0');

  return (
    <div
      style={{
        width: '1080px',
        height: '1080px',
        background: bgColor,
        fontFamily,
        position: 'relative',
        overflow: 'hidden',
        boxSizing: 'border-box',
      }}
    >
      {/* Top accent bar */}
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '8px',
          background: accentColor,
        }}
      />

      {/* Slide number */}
      <div
        style={{
          position: 'absolute',
          top: '40px',
          right: '64px',
          fontSize: '22px',
          color: subtextColor,
          fontWeight: 500,
        }}
      >
        {slideNumStr}
      </div>

      {/* Eyebrow */}
      <div
        style={{
          position: 'absolute',
          top: '56px',
          left: '88px',
          fontSize: '15px',
          fontWeight: 600,
          color: accentColor,
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
        }}
      >
        Career Trajectory
      </div>

      {/* Title */}
      <div
        style={{
          position: 'absolute',
          top: '88px',
          left: '88px',
          right: '88px',
          fontSize: '58px',
          fontWeight: 800,
          color: textColor,
          lineHeight: 1.0,
          letterSpacing: '-0.02em',
        }}
      >
        {slide.title}
      </div>

      {/* Subtitle */}
      {slide.subtitle && (
        <div
          style={{
            position: 'absolute',
            top: '192px',
            left: '88px',
            right: '88px',
            fontSize: '20px',
            color: subtextColor,
            lineHeight: 1.3,
          }}
        >
          {slide.subtitle}
        </div>
      )}

      {/* Background band behind timeline */}
      <div
        style={{
          position: 'absolute',
          top: `${TIMELINE_Y - 200}px`,
          left: 0,
          right: 0,
          height: '420px',
          background: `linear-gradient(180deg, transparent 0%, ${borderColor}30 30%, ${borderColor}30 70%, transparent 100%)`,
          zIndex: 0,
        }}
      />

      {/* ── Timeline line ── */}
      <div
        style={{
          position: 'absolute',
          top: `${TIMELINE_Y}px`,
          left: `${X_START}px`,
          width: `${X_SPAN}px`,
          height: '3px',
          background: borderColor,
          zIndex: 0,
        }}
      />

      {/* Start cap */}
      <div
        style={{
          position: 'absolute',
          left: `${X_START - 5}px`,
          top: `${TIMELINE_Y - 5}px`,
          width: '12px',
          height: '12px',
          borderRadius: '50%',
          background: borderColor,
        }}
      />

      {/* End arrow */}
      <div
        style={{
          position: 'absolute',
          left: `${X_END - 2}px`,
          top: `${TIMELINE_Y - 7}px`,
          width: 0,
          height: 0,
          borderTop: '8px solid transparent',
          borderBottom: '8px solid transparent',
          borderLeft: `14px solid ${borderColor}`,
        }}
      />

      {/* ── Entries ── */}
      {entries.map((entry, i) => {
        const x = nodePositions[i];
        const isAbove = i % 2 === 0;
        const isPrimary = primarySet.has(i);

        return (
          <React.Fragment key={`${entry.year}-${i}`}>
            <ConnectorLine
              x={x}
              isAbove={isAbove}
              isHighlighted={entry.isHighlighted}
              isEducation={entry.isEducation}
              accentColor={accentColor}
            />
            <NodeCircle x={x} entry={entry} accentColor={accentColor} isPrimary={isPrimary} />
            <EntryLabel
              x={x}
              entry={entry}
              isAbove={isAbove}
              accentColor={accentColor}
              textColor={textColor}
              subtextColor={subtextColor}
              isPrimary={isPrimary}
            />
          </React.Fragment>
        );
      })}

      {/* ── Legend ── */}
      <div
        style={{
          position: 'absolute',
          bottom: '52px',
          left: '88px',
          display: 'flex',
          alignItems: 'center',
          gap: '32px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <div
            style={{
              width: '14px',
              height: '14px',
              borderRadius: '50%',
              background: accentColor,
            }}
          />
          <span style={{ fontSize: '15px', color: subtextColor }}>
            Relevant to target role
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <div
            style={{
              width: '12px',
              height: '12px',
              borderRadius: '50%',
              background: '#9CA3AF',
            }}
          />
          <span style={{ fontSize: '15px', color: subtextColor }}>Other experience</span>
        </div>
        {hasEducation && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <div
              style={{
                width: '10px',
                height: '10px',
                borderRadius: '2px',
                background: EDU_COLOR,
                transform: 'rotate(45deg)',
              }}
            />
            <span style={{ fontSize: '15px', color: subtextColor }}>Education</span>
          </div>
        )}
      </div>

      {/* Bottom rule */}
      <div
        style={{
          position: 'absolute',
          bottom: '92px',
          left: '88px',
          right: '88px',
          height: '1px',
          background: borderColor,
        }}
      />
    </div>
  );
}

export default TimelineSlide;