'use client'

import { Team } from '@/app/types/team'
import { MatchPlayer } from '../types/match'
import MatchPlayerCard from './MatchPlayerCard'
import Image from 'next/image'
import Button from './Button'
import Table from './Table'

type Props = {
  team: Team
  players: MatchPlayer[]
  onEditClick?: () => void
  editable?: boolean
}

function getTeamLogo(logo: string | null) {
  return logo ? `/assets/img/logos/${logo}` : '/default-logo.png'
}

const StatIcons = {
  kills: <span title="Kills">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="20" viewBox="0 0 512 512">
              <path d="M256 0c17.7 0 32 14.3 32 32l0 10.4c93.7 13.9 167.7 88 181.6 181.6l10.4 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-10.4 0c-13.9 93.7-88 167.7-181.6 181.6l0 10.4c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-10.4C130.3 455.7 56.3 381.7 42.4 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l10.4 0C56.3 130.3 130.3 56.3 224 42.4L224 32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6l0-20.6c0-17.7 14.3-32 32-32s32 14.3 32 32l0 20.6c58.3-12.5 104.1-58.4 116.6-116.6L384 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l20.6 0C392.1 165.7 346.3 119.9 288 107.4l0 20.6c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-20.6C165.7 119.9 119.9 165.7 107.4 224l20.6 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-20.6 0zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
            </svg>
          </span>,
  deaths: <span title="Deaths">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="20" viewBox="0 0 512 512">
              <path d="M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 64 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
            </svg>
          </span>,
  assist: <span title="Assists">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="25" viewBox="0 0 640 512">
              <path d="M323.4 85.2l-96.8 78.4c-16.1 13-19.2 36.4-7 53.1c12.9 17.8 38 21.3 55.3 7.8l99.3-77.2c7-5.4 17-4.2 22.5 2.8s4.2 17-2.8 22.5l-20.9 16.2L550.2 352l41.8 0c26.5 0 48-21.5 48-48l0-128c0-26.5-21.5-48-48-48l-76 0-4 0-.7 0-3.9-2.5L434.8 79c-15.3-9.8-33.2-15-51.4-15c-21.8 0-43 7.5-60 21.2zm22.8 124.4l-51.7 40.2C263 274.4 217.3 268 193.7 235.6c-22.2-30.5-16.6-73.1 12.7-96.8l83.2-67.3c-11.6-4.9-24.1-7.4-36.8-7.4C234 64 215.7 69.6 200 80l-72 48-80 0c-26.5 0-48 21.5-48 48L0 304c0 26.5 21.5 48 48 48l108.2 0 91.4 83.4c19.6 17.9 49.9 16.5 67.8-3.1c5.5-6.1 9.2-13.2 11.1-20.6l17 15.6c19.5 17.9 49.9 16.6 67.8-2.9c4.5-4.9 7.8-10.6 9.9-16.5c19.4 13 45.8 10.3 62.1-7.5c17.9-19.5 16.6-49.9-2.9-67.8l-134.2-123z"/>
            </svg>
          </span>,
  adr:  <span title="ADR">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="25" viewBox="0 0 576 512">
            <path d="M528 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 8L32 64C14.3 64 0 78.3 0 96L0 208c0 17.7 14.3 32 32 32l10 0c20.8 0 36.1 19.6 31 39.8L33 440.2c-2.4 9.6-.2 19.7 5.8 27.5S54.1 480 64 480l96 0c14.7 0 27.5-10 31-24.2L217 352l104.5 0c23.7 0 44.8-14.9 52.7-37.2L400.9 240l31.1 0c8.5 0 16.6-3.4 22.6-9.4L477.3 208l66.7 0c17.7 0 32-14.3 32-32l0-80c0-17.7-14.3-32-32-32l-16 0 0-8zM321.4 304L229 304l16-64 105 0-21 58.7c-1.1 3.2-4.2 5.3-7.5 5.3zM80 128l384 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L80 160c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
          </svg>
        </span>,
  utildmg:  <span title="Utility Damage">
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="20" width="20" viewBox="0 0 512 512">
                <path d="M459.1 52.4L442.6 6.5C440.7 2.6 436.5 0 432.1 0s-8.5 2.6-10.4 6.5L405.2 52.4l-46 16.8c-4.3 1.6-7.3 5.9-7.2 10.4c0 4.5 3 8.7 7.2 10.2l45.7 16.8 16.8 45.8c1.5 4.4 5.8 7.5 10.4 7.5s8.9-3.1 10.4-7.5l16.5-45.8 45.7-16.8c4.2-1.5 7.2-5.7 7.2-10.2c0-4.6-3-8.9-7.2-10.4L459.1 52.4zm-132.4 53c-12.5-12.5-32.8-12.5-45.3 0l-2.9 2.9C256.5 100.3 232.7 96 208 96C93.1 96 0 189.1 0 304S93.1 512 208 512s208-93.1 208-208c0-24.7-4.3-48.5-12.2-70.5l2.9-2.9c12.5-12.5 12.5-32.8 0-45.3l-80-80zM200 192c-57.4 0-104 46.6-104 104l0 8c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-8c0-75.1 60.9-136 136-136l8 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-8 0z"/>
              </svg>
            </span>,
}

export default function MatchTeamCard({ team, players, onEditClick, editable }: Props) {
  return (
    <div className="flex flex-col w-full">
      {/* Gemeinsamer Rahmen mit Abrundung */}
      <div className="border border-gray-200 dark:border-neutral-700 rounded-lg overflow-hidden">
        {/* Teamkopf */}
        <div className="flex items-center justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-700">
          <div className="flex items-center gap-4">
            <Image
              src={getTeamLogo(team.logo)}
              alt={team.teamname ?? 'Teamlogo'}
              width={48}
              height={48}
              className="rounded-full border object-cover"
            />
            <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
              {team.teamname}
            </h3>
          </div>
          {editable && <Button title="Bearbeiten" onClick={onEditClick} />}
        </div>

        {/* Tabelle ohne extra Rahmen */}
        <Table>
          <Table.Head>
            <Table.Row>
              <Table.Cell as="th"></Table.Cell>
              <Table.Cell as="th">Name</Table.Cell>
              <Table.Cell as="th">{StatIcons.kills}</Table.Cell>
              <Table.Cell as="th">{StatIcons.deaths}</Table.Cell>
              <Table.Cell as="th">{StatIcons.assist}</Table.Cell>
              <Table.Cell as="th">{StatIcons.adr}</Table.Cell>
              <Table.Cell as="th">{StatIcons.utildmg}</Table.Cell>
              <Table.Cell as="th"></Table.Cell>
            </Table.Row>
          </Table.Head>
          <Table.Body>
            {players.map(player => (
              <MatchPlayerCard key={player.user.steamId} player={player} />
            ))}
          </Table.Body>
        </Table>
      </div>
    </div>
  )
}