'use client';

import { Alert, AlertTitle, Box, Chip, List, ListItem, ListItemIcon, ListItemText, Collapse } from '@mui/material';
import { ChildCare, CheckCircle, Timeline, Schedule } from '@mui/icons-material';
import { useState } from 'react';
import { GrowthSpurtDetection } from '@/lib/api/analytics';

interface GrowthSpurtAlertProps {
  growthSpurt: GrowthSpurtDetection | null;
}

export default function GrowthSpurtAlert({ growthSpurt }: GrowthSpurtAlertProps) {
  const [expanded, setExpanded] = useState(false);

  if (!growthSpurt || !growthSpurt.isLikelyGrowthSpurt) {
    return null;
  }

  const confidencePercent = Math.round(growthSpurt.confidence * 100);
  const severityColor = growthSpurt.confidence >= 0.7 ? 'warning' : 'info';

  return (
    <Alert
      severity={severityColor}
      icon={<ChildCare />}
      sx={{ mb: 3, cursor: 'pointer' }}
      onClick={() => setExpanded(!expanded)}
    >
      <AlertTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <span>Possible Growth Spurt Detected</span>
        <Chip
          size="small"
          label={`${confidencePercent}% confidence`}
          color={severityColor}
          sx={{ height: 20, fontSize: '0.75rem' }}
        />
      </AlertTitle>

      <Box sx={{ mt: 1 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <Schedule sx={{ fontSize: 18 }} />
          <strong>Expected duration:</strong> {growthSpurt.expectedDuration}
        </Box>

        <Collapse in={expanded} timeout="auto">
          {/* Indicators */}
          {growthSpurt.indicators.length > 0 && (
            <Box sx={{ mt: 2 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                <Timeline sx={{ fontSize: 18, mr: 0.5 }} />
                <strong>Indicators observed:</strong>
              </Box>
              <List dense sx={{ pl: 2 }}>
                {growthSpurt.indicators.map((indicator, index) => (
                  <ListItem key={index} sx={{ py: 0.5 }}>
                    <ListItemIcon sx={{ minWidth: 32 }}>
                      <CheckCircle sx={{ fontSize: 16, color: 'success.main' }} />
                    </ListItemIcon>
                    <ListItemText
                      primary={indicator}
                      primaryTypographyProps={{ variant: 'body2' }}
                    />
                  </ListItem>
                ))}
              </List>
            </Box>
          )}

          {/* Recommendations */}
          {growthSpurt.recommendations.length > 0 && (
            <Box sx={{ mt: 2, p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
              <strong>What to do:</strong>
              <List dense sx={{ mt: 1 }}>
                {growthSpurt.recommendations.map((rec, index) => (
                  <ListItem key={index} sx={{ py: 0.5 }}>
                    <ListItemIcon sx={{ minWidth: 32 }}>
                      <CheckCircle sx={{ fontSize: 16, color: 'primary.main' }} />
                    </ListItemIcon>
                    <ListItemText primary={rec} primaryTypographyProps={{ variant: 'body2' }} />
                  </ListItem>
                ))}
              </List>
            </Box>
          )}
        </Collapse>

        {!expanded && (
          <Box sx={{ mt: 1, fontSize: '0.875rem', color: 'text.secondary' }}>
            Click to see details and recommendations
          </Box>
        )}
      </Box>
    </Alert>
  );
}