import { useState } from 'react'
import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, CircularProgress, Typography } from '@mui/material'
import { ChevronDown, Sparkles } from 'lucide-react'
import { useGenerateDecisionBrief } from '../../hooks/useAI'
import type { DecisionBrief } from '../../services/aiService'

interface Props {
  shortlistId: string
}

export function DecisionBriefDraftPanel({ shortlistId }: Props) {
  const [brief, setBrief] = useState<DecisionBrief | null>(null)
  const generateDecisionBrief = useGenerateDecisionBrief()
  const loading = generateDecisionBrief.isPending

  function handleGenerate() {
    generateDecisionBrief.mutate(shortlistId, {
      onSuccess: (resp) => {
        setBrief(resp.data)
      },
    })
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <Box sx={{ px: 2, py: 1.5, borderBottom: '1px solid #e2e8f0', bgcolor: 'white', flexShrink: 0 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>KI Decision Brief</Typography>
      </Box>

      <Box sx={{ flex: 1, overflowY: 'auto', p: 2 }}>
        {loading ? (
          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, py: 6 }}>
            <CircularProgress size={28} />
            <Typography variant="body2" color="text.secondary">Brief wird generiert…</Typography>
          </Box>
        ) : brief ? (
          <Box>
            <Alert severity="warning" icon={<Sparkles size={16} />} sx={{ mb: 2, py: 0.5 }}>
              <Typography variant="caption" sx={{ fontWeight: 600 }}>KI-ENTWURF</Typography>
              <Typography variant="caption" sx={{ display: 'block' }}>
                Automatisch generiert — bitte prüfen und anpassen.
              </Typography>
            </Alert>

            <Typography variant="body2" sx={{ mb: 2, color: '#475569' }}>{brief.summary}</Typography>

            {brief.sections.map((section, i) => (
              <Accordion key={i} disableGutters elevation={0} sx={{ border: '1px solid #e2e8f0', mb: 0.5, '&:before': { display: 'none' } }}>
                <AccordionSummary expandIcon={<ChevronDown size={16} />} sx={{ minHeight: 40, '& .MuiAccordionSummary-content': { my: 0.5 } }}>
                  <Typography variant="body2" sx={{ fontWeight: 600 }}>{section.title}</Typography>
                </AccordionSummary>
                <AccordionDetails sx={{ pt: 0 }}>
                  <Typography variant="body2" color="text.secondary">{section.body}</Typography>
                </AccordionDetails>
              </Accordion>
            ))}

            <Button
              fullWidth
              size="small"
              variant="outlined"
              startIcon={<Sparkles size={14} />}
              onClick={handleGenerate}
              sx={{ mt: 2 }}
            >
              Neu generieren
            </Button>
          </Box>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, py: 6, textAlign: 'center' }}>
            <Sparkles size={32} color="#94a3b8" />
            <Box>
              <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5 }}>Decision Brief</Typography>
              <Typography variant="caption" color="text.secondary">
                KI analysiert Ihre Shortlist und erstellt einen strukturierten Entscheidungsentwurf.
              </Typography>
            </Box>
            <Button
              variant="contained"
              size="small"
              startIcon={<Sparkles size={14} />}
              onClick={handleGenerate}
              sx={{ bgcolor: '#152642', '&:hover': { bgcolor: '#162d4a' } }}
            >
              Brief generieren
            </Button>
          </Box>
        )}
      </Box>
    </Box>
  )
}
