import React from 'react';
import {
  Box, Typography, Chip, Alert, Accordion, AccordionSummary, AccordionDetails,
  List, ListItem, ListItemText,
} from '@mui/material';
import {
  ExpandMore as ExpandMoreIcon,
  Psychology as PsychologyIcon,
} from '@mui/icons-material';
import type { AnalysisDetail } from '../types';
import { GridRow, GridCell, formatDuration } from '../helpers';

export const TechniquesSection: React.FC<{ data: AnalysisDetail }> = ({ data }) => {
  if (!data.techniques) return null;
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <PsychologyIcon sx={{ mr: 1 }} />
        <Typography variant="subtitle1" fontWeight="bold">
          Manipulation Techniques ({data.techniques.techniques_count} detected)
        </Typography>
      </AccordionSummary>
      <AccordionDetails>
        <GridRow columns={3}>
          <GridCell>
            <Typography variant="caption" color="text.secondary">Manipulation Score</Typography>
            <Typography variant="h6">{Math.round(Number(data.techniques.manipulation_score))}%</Typography>
          </GridCell>
          <GridCell>
            <Typography variant="caption" color="text.secondary">Total Severity</Typography>
            <Typography variant="h6">{data.techniques.total_severity}</Typography>
          </GridCell>
          <GridCell>
            <Typography variant="caption" color="text.secondary">Duration</Typography>
            <Typography variant="h6">{formatDuration(data.techniques.total_duration_ms || data.techniques.duration_ms?.total)}</Typography>
          </GridCell>
        </GridRow>
        {(data.techniques.llm_screening || data.techniques.llm_deep) && (
          <Box sx={{ mt: 1, display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
            {data.techniques.llm_screening && <Chip label={`Screening: ${data.techniques.llm_screening}`} size="small" variant="outlined" sx={{ fontSize: 11 }} />}
            {data.techniques.llm_deep && <Chip label={`Deep: ${data.techniques.llm_deep}`} size="small" variant="outlined" sx={{ fontSize: 11 }} />}
          </Box>
        )}
        {data.techniques.dimensions_affected?.length > 0 && (
          <Box sx={{ my: 2 }}>
            <Typography variant="caption" color="text.secondary">Dimensions Affected</Typography>
            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mt: 0.5 }}>
              {data.techniques.dimensions_affected.map((dim: string) => <Chip key={dim} label={dim} size="small" />)}
            </Box>
          </Box>
        )}
        {data.techniques.techniques_detected?.length > 0 && (
          <List dense>
            {data.techniques.techniques_detected.map((tech: any, idx: number) => (
              <ListItem key={idx} sx={{ bgcolor: 'grey.50', mb: 0.5, borderRadius: 1 }}>
                <ListItemText primary={tech.name || `Technique ${idx + 1}`} secondary={tech.description || tech.evidence} />
                {tech.severity && <Chip label={`Severity: ${tech.severity}`} size="small" color={tech.severity > 3 ? 'error' : 'warning'} />}
              </ListItem>
            ))}
          </List>
        )}
      </AccordionDetails>
    </Accordion>
  );
};

export const AISection: React.FC<{ data: AnalysisDetail }> = ({ data }) => {
  if (!data.ai_tampered) return null;
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <PsychologyIcon sx={{ mr: 1 }} />
        <Typography variant="subtitle1" fontWeight="bold">AI Content Detection - {data.ai_tampered.verdict}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <GridRow columns={3}>
          <GridCell>
            <Typography variant="caption" color="text.secondary">AI Probability</Typography>
            <Typography variant="h6">{Math.round(Number(data.ai_tampered.ai_probability))}%</Typography>
          </GridCell>
          <GridCell>
            <Typography variant="caption" color="text.secondary">Indicators Found</Typography>
            <Typography variant="h6">{data.ai_tampered.indicators_count}</Typography>
          </GridCell>
          <GridCell>
            <Typography variant="caption" color="text.secondary">Duration</Typography>
            <Typography variant="h6">{formatDuration(data.ai_tampered.total_duration_ms || data.ai_tampered.duration_ms?.total)}</Typography>
          </GridCell>
        </GridRow>
        {(data.ai_tampered.llm_screening || data.ai_tampered.llm_deep) && (
          <Box sx={{ mt: 1, display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
            {data.ai_tampered.llm_screening && <Chip label={`Screening: ${data.ai_tampered.llm_screening}`} size="small" variant="outlined" sx={{ fontSize: 11 }} />}
            {data.ai_tampered.llm_deep && <Chip label={`Deep: ${data.ai_tampered.llm_deep}`} size="small" variant="outlined" sx={{ fontSize: 11 }} />}
          </Box>
        )}
        {data.ai_tampered.disclosure_detected && (
          <Alert severity="info" sx={{ mt: 2 }}>AI Disclosure detected: {data.ai_tampered.disclosure_text}</Alert>
        )}
      </AccordionDetails>
    </Accordion>
  );
};