<script lang="ts">
  import { calculateSkillTriangle } from '$lib/utils/plebsaber-utils';

  export let name: string = 'Unknown';
  export let country: string | null = null;
  export let avatar: string | null = null;
  export let rank: number | null = null;
  export let showRank: boolean = true;
  export let width: string = '12em';
  export let avatarSize: number = 48;
  export let techPp: number | null | undefined = null;
  export let accPp: number | null | undefined = null;
  export let passPp: number | null | undefined = null;
  // gradientId must be unique per instance to avoid SVG gradient conflicts when multiple cards render on the same page
  export let gradientId: string = 'summary-triangle';
  export let playerId: string | null = null;

  $: triangle = calculateSkillTriangle(techPp, accPp, passPp);
  $: triangleCorners = triangle?.corners;
  $: normalized = triangle?.normalized;
  $: hasTriangle = triangle !== null;
  $: profileUrl = playerId ? `https://beatleader.com/u/${encodeURIComponent(playerId)}` : null;

  const gradientTechId = `${gradientId}-tech`;
  const gradientAccId = `${gradientId}-acc`;
  const gradientPassId = `${gradientId}-pass`;
</script>

{#if profileUrl}
  <a href={profileUrl} target="_blank" rel="noreferrer noopener" class="summary-header clickable" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
    <img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
    <div class="summary-body">
      <div class="summary-name">{name}</div>
      <div class="summary-meta">
        {#if country}
          <span>{country}</span>
        {/if}
        {#if showRank && typeof rank === 'number'}
          <span>Rank: {rank}</span>
        {/if}
      </div>
    </div>
    {#if hasTriangle}
      <div class="summary-triangle">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
          <g transform="matrix(1 0 0 -1 0 86.6)">
            <defs>
              <linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
                <stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
              </linearGradient>
              <linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
                <stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
              </linearGradient>
              <linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
                <stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
              </linearGradient>
            </defs>
            <g stroke="#fff" stroke-width="0.5">
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
            </g>
            <g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
              <path d="M 50,0 L 0,86.6 100,86.6 Z" />
            </g>
          </g>
        </svg>
      </div>
    {/if}
  </a>
{:else}
  <div class="summary-header" style={`--header-width:${width}; --avatar-size:${avatarSize}px`}>
    <img src={avatar ?? ''} alt="Avatar" class:placeholder={!avatar} />
    <div class="summary-body">
      <div class="summary-name">{name}</div>
      <div class="summary-meta">
        {#if country}
          <span>{country}</span>
        {/if}
        {#if showRank && typeof rank === 'number'}
          <span>Rank: {rank}</span>
        {/if}
      </div>
    </div>
    {#if hasTriangle}
      <div class="summary-triangle">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="100%" height="100%" viewBox="0 0 100 86.6">
          <g transform="matrix(1 0 0 -1 0 86.6)">
            <defs>
              <linearGradient id={gradientTechId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.tech.x} y1={triangleCorners!.tech.y} x2={(triangleCorners!.acc.x + triangleCorners!.pass.x) / 2} y2={(triangleCorners!.acc.y + triangleCorners!.pass.y) / 2}>
                <stop offset="0%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(255 0 120 / ${(normalized!.tech ?? 0) * 25}%)`} />
              </linearGradient>
              <linearGradient id={gradientAccId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.acc.x} y1={triangleCorners!.acc.y} x2={(triangleCorners!.pass.x + triangleCorners!.tech.x) / 2} y2={(triangleCorners!.pass.y + triangleCorners!.tech.y) / 2}>
                <stop offset="0%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(0 180 255 / ${(normalized!.acc ?? 0) * 25}%)`} />
              </linearGradient>
              <linearGradient id={gradientPassId} gradientUnits="userSpaceOnUse" x1={triangleCorners!.pass.x} y1={triangleCorners!.pass.y} x2={(triangleCorners!.tech.x + triangleCorners!.acc.x) / 2} y2={(triangleCorners!.tech.y + triangleCorners!.acc.y) / 2}>
                <stop offset="0%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 100}%)`} />
                <stop offset="100%" stop-color={`rgb(0 255 180 / ${(normalized!.pass ?? 0) * 25}%)`} />
              </linearGradient>
            </defs>
            <g stroke="#fff" stroke-width="0.5">
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientTechId})`} />
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientPassId})`} />
              <path d={`M ${triangleCorners!.pass.x},${triangleCorners!.pass.y} L ${triangleCorners!.tech.x},${triangleCorners!.tech.y} ${triangleCorners!.acc.x},${triangleCorners!.acc.y} Z`} fill={`url(#${gradientAccId})`} />
            </g>
            <g stroke="#fff" fill="none" stroke-width="2" stroke-dasharray="6 6">
              <path d="M 50,0 L 0,86.6 100,86.6 Z" />
            </g>
          </g>
        </svg>
      </div>
    {/if}
  </div>
{/if}

<style>
  .summary-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: var(--header-width, 50%);
    max-width: var(--header-width, 50%);
    min-width: 200px;
    flex: 0 0 var(--header-width, 50%);
    text-decoration: none;
    color: inherit;
  }

  img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
  }

  img.placeholder {
    opacity: 0.3;
    border-style: dashed;
  }

  .summary-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .summary-name {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.1;
  }

  .summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.75);
  }

  .summary-triangle {
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin-left: auto;
    flex-shrink: 0;
  }

  .summary-triangle svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.25));
  }

  .summary-header.clickable {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .summary-header.clickable:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }

  .summary-header.clickable:active {
    transform: translateY(0);
  }
</style>

