import {
  Paper,
  Title,
  Text,
  Group,
  Button,
  Stack,
  Badge,
  Divider,
  ActionIcon,
  Menu,
  rem,
} from '@mantine/core';
import {
  IconEdit,
  IconTrash,
  IconPlus,
  IconDots,
} from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import type { Location, LocationType } from '../types/location';

interface LocationDetailProps {
  location: Location;
  locationTypes: LocationType[];
  onAddChild: () => void;
  onEdit: () => void;
  onDelete: () => void;
}

export function LocationDetail({
  location,
  locationTypes,
  onAddChild,
  onEdit,
  onDelete,
}: LocationDetailProps) {
  const { t, i18n } = useTranslation();
  const locale = i18n.language as 'en' | 'am';
  const typeInfo = locationTypes.find(
    (lt) => lt.id === location.locationTypeId,
  );
  const isLeaf =
    !locationTypes.some(
      (lt) => lt.level === (typeInfo?.level ?? 0) + 1,
    );

  return (
    <Paper p="lg" radius="md" withBorder>
      <Group justify="space-between" mb="xs">
        <Title order={4}>{location.names[locale]}</Title>
        <Group gap="xs">
          <Button
            variant="light"
            size="sm"
            leftSection={<IconPlus size={16} />}
            onClick={onAddChild}
            disabled={isLeaf}
          >
            {t('location.addSubLocation')}
          </Button>
          <Menu shadow="md" width={180}>
            <Menu.Target>
              <ActionIcon variant="subtle" color="gray" size="sm">
                <IconDots size={16} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                leftSection={<IconEdit size={16} />}
                onClick={onEdit}
              >
                {t('location.edit')}
              </Menu.Item>
              <Menu.Item
                leftSection={<IconTrash size={16} />}
                color="red"
                onClick={onDelete}
              >
                {t('location.delete')}
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        </Group>
      </Group>

      <Group gap="xs" mb="md">
        <Badge size="lg" variant="light" color="blue">
          {location.code}
        </Badge>
        {typeInfo && (
          <Badge size="lg" variant="light" color="teal">
            {typeInfo.names[locale]}
          </Badge>
        )}
      </Group>

      <Divider mb="md" />

      <Stack gap="sm">
        <div>
          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
            {t('location.name')}
          </Text>
          <Text size="sm">{location.names[locale]}</Text>
        </div>
        <div>
          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
            {t('location.code')}
          </Text>
          <Text size="sm">{location.code}</Text>
        </div>
        {typeInfo && (
          <div>
            <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
              {t('location.type')}
            </Text>
            <Text size="sm">{typeInfo.names[locale]} ({t('location.level')} {typeInfo.level})</Text>
          </div>
        )}
      </Stack>
    </Paper>
  );
}
