'use client';

import Link from 'next/link';
import { formatMinutes, countryCodeToFlag } from '@/lib/steam';

interface Segment {
  startMin: number;
  endMin: number;
}

interface TimelinePlayer {
  steamid: string;
  name: string;
  avatarUrl: string;
  country?: string | null;
  totalMinutes: number;
  segments: Segment[];
}

export default function PlayerTimelineChart({
  players,
  windowMinutes,
  windowStartLabel,
  windowEndLabel,
  loading,
}: {
  players: TimelinePlayer[];
  windowMinutes: number;
  windowStartLabel: string;
  windowEndLabel: string;
  loading: boolean;
}) {
  if (loading) {
    return <div className="text-sm text-ink-faint font-mono">loading players…</div>;
  }
  if (players.length === 0) {
    return <div className="text-sm text-ink-muted">No players recorded during this window.</div>;
  }

  return (
    <div>
      {/* time axis */}
      <div className="flex justify-between text-xs text-ink-faint font-mono mb-2 pl-[196px]">
        <span>{windowStartLabel}</span>
        <span>{windowEndLabel}</span>
      </div>

      <div className="space-y-1.5">
        {players.map((p, i) => (
          <div key={p.steamid} className="flex items-center gap-3">
            <span className="text-ink-faint text-xs w-5 text-right shrink-0">{i + 1}</span>
            <Link
              href={`/players/${encodeURIComponent(p.steamid)}`}
              className="flex items-center gap-2 w-[150px] shrink-0 hover:text-accent transition-colors"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={p.avatarUrl} alt="" className="w-6 h-6 rounded-full object-cover ring-1 ring-base-border shrink-0" />
              {p.country !== undefined && (
                <span className="text-xs shrink-0" aria-hidden>
                  {countryCodeToFlag(p.country)}
                </span>
              )}
              <span className="text-sm text-ink truncate">{p.name}</span>
            </Link>

            <div className="flex-1 h-4 bg-base rounded overflow-hidden border border-base-border relative">
              {p.segments.map((seg, i) => {
                const left = (seg.startMin / windowMinutes) * 100;
                const width = Math.max(0.6, ((seg.endMin - seg.startMin) / windowMinutes) * 100);
                return (
                  <div
                    key={i}
                    className="absolute top-0 bottom-0 rounded-sm"
                    style={{
                      left: `${left}%`,
                      width: `${width}%`,
                      background: 'linear-gradient(180deg, #5EE596, #2A9C5C)',
                      boxShadow: '0 0 6px rgba(63, 211, 122, 0.4)',
                    }}
                  />
                );
              })}
            </div>

            <span className="text-xs text-ink-muted mono w-16 text-right shrink-0">
              {formatMinutes(p.totalMinutes)}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}