import React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import DescriptionIcon from '@mui/icons-material/Description';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

const ACTIONS = [
  {
    key: 'bom',
    page: 'unified-bom',
    title: 'BOM 관리',
    desc: 'BOM 파일 업로드, 리비전 관리, 자재 분류를 통합 관리합니다.',
    icon: DescriptionIcon,
    color: '#2563eb',
    tags: ['Upload', 'Revision', 'Materials'],
  },
  {
    key: 'purchase',
    page: 'purchase-request',
    title: '구매요청 관리',
    desc: '구매요청을 관리하고 Excel로 내보내기합니다.',
    icon: ShoppingCartIcon,
    color: '#16a34a',
    tags: ['Request', 'Excel Export'],
  },
];

export default function QuickActionCards({ selectedProject, navigateToPage }) {
  if (!selectedProject) return null;

  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' }, gap: 2 }}>
      {ACTIONS.map(({ key, page, title, desc, icon: Icon, color, tags }) => (
        <Card key={key} sx={{ transition: 'box-shadow 0.2s', '&:hover': { boxShadow: '0 4px 16px rgba(0,0,0,0.12)' } }}>
          <CardActionArea
            onClick={() => navigateToPage(page, { selectedProject })}
            sx={{ p: 3, display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 2 }}
          >
            <Box
              sx={{
                width: 56,
                height: 56,
                borderRadius: 2,
                bgcolor: `${color}14`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
              }}
            >
              <Icon sx={{ color, fontSize: 28 }} />
            </Box>
            <Box sx={{ minWidth: 0 }}>
              <Typography variant="h6" sx={{ mb: 0.5 }}>{title}</Typography>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
                {desc}
              </Typography>
              <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
                {tags.map(t => (
                  <Chip key={t} label={t} size="small" sx={{ bgcolor: `${color}14`, color, fontWeight: 500, fontSize: '0.75rem' }} />
                ))}
              </Box>
            </Box>
          </CardActionArea>
        </Card>
      ))}
    </Box>
  );
}
