'use client';

/**
 * CSS-only arrow components for the Bitrix-style tree renderer.
 * No SVG — just divs, borders, and CSS pseudo-elements.
 */

// ─── Vertical Arrow ─────────────────────────────────────────────
// 40px tall, centered 2px grey line with arrow head at bottom.

export function VerticalArrow() {
  return (
    <div className="flex flex-col items-center" style={{ height: 40 }}>
      <div
        style={{
          width: 2,
          flex: 1,
          backgroundColor: '#C0C1C3',
        }}
      />
      <div
        style={{
          width: 0,
          height: 0,
          borderLeft: '5px solid transparent',
          borderRight: '5px solid transparent',
          borderTop: '6px solid #C0C1C3',
        }}
      />
    </div>
  );
}

// ─── FanOut ──────────────────────────────────────────────────────
// Horizontal connector line from center of parent down to each branch column.
// Uses CSS pseudo-element approach:
//   - Each column has a top border spanning half-width for first/last,
//     full-width for middle columns.
//   - Center of each column has a short vertical line going down.

interface FanOutProps {
  columnCount: number;
}

export function FanOut({ columnCount }: FanOutProps) {
  if (columnCount <= 0) return null;
  if (columnCount === 1) {
    return <VerticalArrow />;
  }

  return (
    <div className="flex flex-col items-center" style={{ width: '100%' }}>
      {/* Vertical line from parent down to horizontal bar */}
      <div style={{ width: 2, height: 16, backgroundColor: '#C0C1C3' }} />

      {/* Horizontal bar spanning all columns */}
      <div className="flex" style={{ width: '100%' }}>
        {Array.from({ length: columnCount }).map((_, i) => (
          <div key={i} className="flex-1 flex flex-col items-center">
            {/* Horizontal line segment */}
            <div
              style={{
                height: 2,
                backgroundColor: '#C0C1C3',
                width: i === 0 ? '50%' : i === columnCount - 1 ? '50%' : '100%',
                marginLeft: i === 0 ? '50%' : undefined,
                marginRight: i === columnCount - 1 ? '50%' : undefined,
              }}
            />
            {/* Vertical drop-down to branch */}
            <div style={{ width: 2, height: 16, backgroundColor: '#C0C1C3' }} />
            {/* Arrow head */}
            <div
              style={{
                width: 0,
                height: 0,
                borderLeft: '5px solid transparent',
                borderRight: '5px solid transparent',
                borderTop: '6px solid #C0C1C3',
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── FanIn ───────────────────────────────────────────────────────
// Merging line at the bottom of branches, converging back to center.
// Mirror of FanOut but upside-down.

interface FanInProps {
  columnCount: number;
}

export function FanIn({ columnCount }: FanInProps) {
  if (columnCount <= 0) return null;
  if (columnCount === 1) {
    return <VerticalArrow />;
  }

  return (
    <div className="flex flex-col items-center" style={{ width: '100%' }}>
      {/* Horizontal bar with vertical risers from each branch */}
      <div className="flex" style={{ width: '100%' }}>
        {Array.from({ length: columnCount }).map((_, i) => (
          <div key={i} className="flex-1 flex flex-col items-center">
            {/* Vertical riser from branch */}
            <div style={{ width: 2, height: 16, backgroundColor: '#C0C1C3' }} />
            {/* Horizontal line segment */}
            <div
              style={{
                height: 2,
                backgroundColor: '#C0C1C3',
                width: i === 0 ? '50%' : i === columnCount - 1 ? '50%' : '100%',
                marginLeft: i === 0 ? '50%' : undefined,
                marginRight: i === columnCount - 1 ? '50%' : undefined,
              }}
            />
          </div>
        ))}
      </div>

      {/* Vertical line down from horizontal bar to next node */}
      <div style={{ width: 2, height: 16, backgroundColor: '#C0C1C3' }} />
      {/* Arrow head */}
      <div
        style={{
          width: 0,
          height: 0,
          borderLeft: '5px solid transparent',
          borderRight: '5px solid transparent',
          borderTop: '6px solid #C0C1C3',
        }}
      />
    </div>
  );
}
