import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Box, Typography, Paper, Alert, Link } from '@mui/material';
import { styled } from '@mui/system';

type TMeter = {
  id: string;
  name: string;
  event_name: string;
  unit: string;
  aggregation_method: string;
};

interface MeterUsageGuideProps {
  meter: TMeter;
}

export default function MeterUsageGuide({ meter }: MeterUsageGuideProps) {
  const { t } = useLocaleContext();

  const curlExample = `curl -X POST https://your-domain.com/api/meter-events \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -d '{
    "event_name": "${meter.event_name}",
    "payload": {
      "customer_id": "cus_example123",
      "value": "10",
      "subscription_id": "sub_example123"
    },
    "identifier": "unique_event_id_${Date.now()}",
    "metadata": {
      "source": "api",
      "version": "1.0"
    }
  }'`;

  const jsExample = `// Using fetch API
const response = await fetch('/api/meter-events', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    event_name: '${meter.event_name}',
    payload: {
      customer_id: 'cus_example123',
      value: '10',
      subscription_id: 'sub_example123'
    },
    identifier: \`unique_event_id_\${Date.now()}\`,
    metadata: {
      source: 'web',
      version: '1.0'
    }
  })
});

const result = await response.json();
console.log('Event recorded:', result);`;

  const pythonExample = `import requests
import time

url = "https://your-domain.com/api/meter-events"
headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
}

data = {
    "event_name": "${meter.event_name}",
    "payload": {
        "customer_id": "cus_example123",
        "value": "10",
        "subscription_id": "sub_example123"
    },
    "identifier": f"unique_event_id_{int(time.time())}",
    "metadata": {
        "source": "python",
        "version": "1.0"
    }
}

response = requests.post(url, json=data, headers=headers)
print("Event recorded:", response.json())`;

  return (
    <Box>
      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
        {t('admin.meter.usageGuide.title')}
      </Typography>
      <Alert severity="info" sx={{ mb: 3 }}>
        <Typography variant="body2">
          {t('admin.meter.usageGuide.description', {
            eventName: meter.event_name,
            unit: meter.unit,
            method: meter.aggregation_method,
          })}
        </Typography>
      </Alert>
      <Typography variant="subtitle1" sx={{ mb: 2, fontWeight: 600 }}>
        {t('admin.meter.usageGuide.apiEndpoint')}
      </Typography>
      <CodeBlock>
        <Typography variant="body2" component="pre">
          POST /api/meter-events
        </Typography>
      </CodeBlock>
      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
        {t('admin.meter.usageGuide.curlExample')}
      </Typography>
      <CodeBlock>
        <Typography variant="body2" component="pre">
          {curlExample}
        </Typography>
      </CodeBlock>
      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
        {t('admin.meter.usageGuide.jsExample')}
      </Typography>
      <CodeBlock>
        <Typography variant="body2" component="pre">
          {jsExample}
        </Typography>
      </CodeBlock>
      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
        {t('admin.meter.usageGuide.pythonExample')}
      </Typography>
      <CodeBlock>
        <Typography variant="body2" component="pre">
          {pythonExample}
        </Typography>
      </CodeBlock>
      <Alert severity="warning" sx={{ mt: 3 }}>
        <Typography variant="body2">
          <strong>{t('admin.meter.usageGuide.important')}:</strong>
        </Typography>
        <ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
          <li>{t('admin.meter.usageGuide.tip1')}</li>
          <li>{t('admin.meter.usageGuide.tip2')}</li>
          <li>{t('admin.meter.usageGuide.tip3')}</li>
        </ul>
      </Alert>
      <Box sx={{ mt: 3 }}>
        <Typography
          variant="body2"
          sx={{
            color: 'text.secondary',
          }}>
          {t('admin.meter.usageGuide.moreInfo')}{' '}
          <Link href="/docs/api/meter-events" target="_blank">
            {t('admin.meter.usageGuide.apiDocs')}
          </Link>
        </Typography>
      </Box>
    </Box>
  );
}

const CodeBlock = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(2),
  backgroundColor: theme.palette.grey[50],
  border: `1px solid ${theme.palette.divider}`,
  borderRadius: theme.shape.borderRadius,
  overflow: 'auto',
  '& pre': {
    margin: 0,
    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
    fontSize: '0.875rem',
    lineHeight: 1.5,
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-all',
  },
}));
