'use client';

import { Box, Text, Group, SimpleGrid, Tooltip } from '@tidbcloud/uikit';

interface ActionCard {
  key: string;
  icon: string;
  label: string;
  color: string;       // card background tint
  iconBg: string;      // icon circle background
  description: string;
}

const ACTION_CARDS: ActionCard[] = [
  {
    key: 'report',
    icon: '📊',
    label: 'Report',
    color: '#fef2f2',
    iconBg: '#fee2e2',
    description: 'Generate an in-depth analysis report from your sources',
  },
  {
    key: 'operation',
    icon: '⚙️',
    label: 'Operation',
    color: '#f0fdf4',
    iconBg: '#dcfce7',
    description: 'Create a runbook or operational procedure',
  },
  {
    key: 'notes',
    icon: '📝',
    label: 'Notes',
    color: '#fefce8',
    iconBg: '#fef9c3',
    description: 'Save notes and observations about your investigation',
  },
];

interface StudioActionCardsProps {
  onAction?: (action: string) => void;
}

export default function StudioActionCards({ onAction }: StudioActionCardsProps) {
  return (
    <SimpleGrid cols={3} spacing={10}>
      {ACTION_CARDS.map((card) => (
        <Tooltip key={card.key} label={card.description} position="bottom" withArrow multiline w={200}>
          <Box
            p="sm"
            style={{
              borderRadius: '12px',
              backgroundColor: card.color,
              border: '1px solid transparent',
              cursor: 'default',
              opacity: 0.7,
              transition: 'all 0.15s ease',
              minHeight: '80px',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              position: 'relative',
            }}
          >
            <Group gap={6} align="center">
              <Box
                style={{
                  width: '28px',
                  height: '28px',
                  borderRadius: '8px',
                  backgroundColor: card.iconBg,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '14px',
                }}
              >
                {card.icon}
              </Box>
            </Group>
            <Group justify="space-between" align="center" mt={10}>
              <Text size="xs" fw={600} c="carbon.5">
                {card.label}
              </Text>
              <Text size="9px" fw={500} c="carbon.4" style={{ fontStyle: 'italic' }}>
                Coming Soon
              </Text>
            </Group>
          </Box>
        </Tooltip>
      ))}
    </SimpleGrid>
  );
}