import { Box, Stack, Typography, IconButton, Tooltip } from '@mui/material';
import { Home, Dashboard } from '@mui/icons-material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { joinURL } from 'ufo';

interface VendorConfig {
  vendor_id: string;
  vendor_key: string;
  name?: string;
  vendor_type?: string;
}

interface VendorServiceListProps {
  vendorServices: VendorConfig[];
  subscriptionId: string;
  isOwner?: boolean;
  isCanceled: boolean;
}

export default function VendorServiceList({
  vendorServices,
  subscriptionId,
  isOwner = true,
  isCanceled,
}: VendorServiceListProps) {
  const { t } = useLocaleContext();

  if (!vendorServices || vendorServices.length === 0) {
    return null;
  }

  const prefix = window.blocklet.prefix || '/';

  return (
    <>
      <Typography variant="h3" className="section-header" sx={{ mb: 3 }}>
        {t('admin.subscription.includedServices')} ({vendorServices.length})
      </Typography>
      <Box className="section-body">
        <Stack
          sx={{
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' },
            gap: 2,
          }}>
          {vendorServices.map((vendor, index) => {
            const isLauncher = vendor.vendor_type === 'launcher';
            return (
              <Box
                key={vendor.vendor_key || index}
                className="vendor-service-item"
                sx={{
                  p: 2,
                  display: 'flex',
                  alignItems: 'center',
                  border: '1px solid',
                  borderColor: 'divider',
                  borderRadius: 2,
                  backgroundColor: 'background.paper',
                  '&:hover': {
                    backgroundColor: 'action.hover',
                  },
                  transition: 'background-color 0.2s ease',
                }}>
                <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
                  <Box
                    sx={{
                      width: 8,
                      height: 8,
                      borderRadius: '50%',
                      bgcolor: isCanceled ? 'error.main' : 'success.main',
                      flexShrink: 0,
                    }}
                  />
                  <Typography
                    variant="body1"
                    sx={{
                      fontWeight: 600,
                      fontSize: '1rem',
                      color: 'text.primary',
                    }}>
                    {vendor.name || vendor.vendor_key}
                  </Typography>
                </Stack>
                {isLauncher && !isCanceled && (
                  <Box>
                    <Stack direction="row" spacing={0.5}>
                      <Tooltip title={t('admin.subscription.serviceHome')} placement="top">
                        <IconButton
                          size="small"
                          component="a"
                          href={joinURL(prefix, '/api/vendors/open/', subscriptionId, `?vendorId=${vendor.vendor_id}`)}
                          target="_blank"
                          rel="noopener noreferrer"
                          sx={{
                            color: 'primary.main',
                            '&:hover': {
                              backgroundColor: 'primary.lighter',
                            },
                          }}>
                          <Home fontSize="small" />
                        </IconButton>
                      </Tooltip>
                      {isOwner && (
                        <Tooltip title={t('admin.subscription.serviceDashboard')} placement="top">
                          <IconButton
                            size="small"
                            component="a"
                            href={joinURL(
                              prefix,
                              '/api/vendors/open/',
                              subscriptionId,
                              `?vendorId=${vendor.vendor_id}&target=dashboard`
                            )}
                            target="_blank"
                            rel="noopener noreferrer"
                            sx={{
                              color: 'primary.main',
                              '&:hover': {
                                backgroundColor: 'primary.lighter',
                              },
                            }}>
                            <Dashboard fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      )}
                    </Stack>
                  </Box>
                )}
              </Box>
            );
          })}
        </Stack>
      </Box>
    </>
  );
}
