import { Box, Group, HoverCard, Paper, Pill, Stack, TextInput, Typography } from '@tidbcloud/uikit'
import { FormTextInput } from '@tidbcloud/uikit/biz'

import {
  MoveSettingsCardData,
  type TargetProjectNameFieldName,
  type TargetProjectNameRules
} from './move-settings.types'

interface MigrationProjectCardProps {
  card: MoveSettingsCardData
  fieldName: TargetProjectNameFieldName
  rules: TargetProjectNameRules
}

export const MigrationProjectCard = ({ card, fieldName, rules }: MigrationProjectCardProps) => {
  const visibleInstances = card.instances.slice(0, 5)
  const hiddenInstances = card.instances.slice(5)

  return (
    <Paper
      bg="carbon.2"
      p="xl"
      data-testid="project-migration-project-card"
      data-source-project-id={card.sourceProjectId}
    >
      <Stack>
        <Group grow align="flex-start">
          <TextInput
            label="Current project"
            value={card.sourceProjectName}
            readOnly
            styles={{
              input: {
                '&[readonly]': {
                  backgroundColor: 'var(--mantine-color-carbon-2)'
                }
              }
            }}
            data-testid="project-migration-current-project-input"
          />

          <FormTextInput
            name={fieldName}
            rules={rules}
            label="New project name"
            data-testid="project-migration-target-project-input"
            data-source-project-id={card.sourceProjectId}
          />
        </Group>

        <Stack>
          <Typography variant="body-lg" c="carbon.7">
            These Starter and Essential instances will be moved to the new project:
          </Typography>

          {card.instances.length > 0 ? (
            <Pill.Group data-testid="project-migration-instance-pill-group">
              {visibleInstances.map((instance) => (
                <Pill
                  key={instance.tidbId}
                  bd="1px solid var(--mantine-color-carbon-4)"
                  radius={6}
                  fw={500}
                  data-testid="project-migration-instance-pill"
                  data-tidb-id={instance.tidbId}
                  data-source-project-id={card.sourceProjectId}
                >
                  {instance.displayName}
                </Pill>
              ))}

              {hiddenInstances.length > 0 && (
                <HoverCard position="bottom-start" withArrow shadow="md" openDelay={150}>
                  <HoverCard.Target>
                    <Box display="inline-flex">
                      <Pill
                        bd="1px solid var(--mantine-color-carbon-4)"
                        radius={6}
                        fw={500}
                        data-testid="project-migration-instance-overflow-pill"
                        data-source-project-id={card.sourceProjectId}
                      >
                        +{hiddenInstances.length}
                      </Pill>
                    </Box>
                  </HoverCard.Target>
                  <HoverCard.Dropdown maw={320} data-testid="project-migration-instance-overflow-dropdown">
                    <Stack gap={8}>
                      {hiddenInstances.map((instance) => (
                        <Typography
                          key={instance.tidbId}
                          variant="body-sm"
                          c="carbon.8"
                          data-testid="project-migration-instance-overflow-name"
                          data-tidb-id={instance.tidbId}
                        >
                          {instance.displayName}
                        </Typography>
                      ))}
                    </Stack>
                  </HoverCard.Dropdown>
                </HoverCard>
              )}
            </Pill.Group>
          ) : (
            <Typography variant="body-lg" c="carbon.7">
              No Starter or Essential instances were found in this project.
            </Typography>
          )}
        </Stack>
      </Stack>
    </Paper>
  )
}