import Sheet from "@/components/sheet/sheet";
import { useAuth } from "@/contexts/auth-context";
import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
import { useMemo } from "react";
import NameUpdateForm from "./name-form";
import PlayerAvatar from "@/components/player-avatar";
import { useSheet } from "@/hooks/use-sheet";
import { Player } from "../../types";
import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";

interface HeaderProps {
  player: Player;
}

const Header = ({ player }: HeaderProps) => {
  const nameSheet = useSheet();
  const h2hSheet = useSheet();
  const { user: authUser } = useAuth();

  const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
  const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
  const authUserName = useMemo(() => {
    if (!authUser) return "";
    return `${authUser.first_name} ${authUser.last_name}`;
  }, [authUser]);

  const fontSize = useMemo(() => {
    const baseSize = 28;
    const maxLength = 24;

    if (name.length <= maxLength) {
      return `${baseSize}px`;
    }

    const scaleFactor = Math.max(0.6, maxLength / name.length);
    return `${Math.floor(baseSize * scaleFactor)}px`;
  }, [name]);

  return (
    <>
      <Stack gap="sm" align="center" pt="md">
        <Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
          <PlayerAvatar name={name} size={100} />
          <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
            <Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
            <ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={nameSheet.open}>
              <PencilIcon size={20} />
            </ActionIcon>
            <ActionIcon
              variant="subtle"
              size="sm"
              radius="xl"
              onClick={h2hSheet.open}
              w={40}
              display={!owner ? 'block' : 'none'}
            >
              <Box style={{ position: 'relative', width: 27.5, height: 16 }}>
                <FootballHelmetIcon
                  size={14}
                  style={{
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    transform: 'rotate(25deg)'
                  }}
                />
                <FootballHelmetIcon
                  size={14}
                  style={{
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    transform: 'scaleX(-1) rotate(25deg)'
                  }}
                />
              </Box>
            </ActionIcon>
          </Flex>
        </Flex>
      </Stack>

      <Sheet title='Update Name' {...nameSheet.props}>
        <NameUpdateForm player={player} toggle={nameSheet.toggle} />
      </Sheet>

      {!owner && authUser && (
        <Sheet title="Head to Head" {...h2hSheet.props}>
          <PlayerHeadToHeadSheet
            player1Id={authUser.id}
            player1Name={authUserName}
            player2Id={player.id}
            player2Name={name}
            isOpen={h2hSheet.props.opened}
          />
        </Sheet>
      )}
    </>
  )
};

export default Header;