'use client'

import { useTranslations } from 'next-intl'
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'
import CustomAvatar from '@core/components/mui/Avatar'

export interface PestResult {
  pest: string
  confidence: number
  description: string
  treatment: string
}

interface ResultCardProps {
  result: PestResult
}

function getConfidenceColor(confidence: number): 'success' | 'warning' | 'error' {
  if (confidence > 80) return 'success'
  if (confidence >= 50) return 'warning'
  return 'error'
}

export default function ResultCard({ result }: ResultCardProps) {
  const t = useTranslations('pestDetection.resultCard')
  const color = getConfidenceColor(result.confidence)

  return (
    <Card
      elevation={0}
      sx={{
        borderRadius: '24px',
        overflow: 'hidden',
        border: '1px solid',
        borderColor: `${color}.main`,
        background: (theme) =>
          `linear-gradient(160deg, ${theme.palette.background.paper} 0%, ${theme.palette[color].lighterOpacity} 100%)`,
        boxShadow: '0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)',
      }}
    >
      <CardContent className="p-5 sm:p-6">
        {/* Pest name & icon */}
        <Box className="flex items-center gap-3 mbe-4">
          <CustomAvatar
            variant="rounded"
            skin="filled"
            color={color}
            sx={{ width: 48, height: 48 }}
          >
            <i className="tabler-bug text-2xl" />
          </CustomAvatar>
          <Box>
            <Typography variant="h6" fontWeight={700} color="text.primary">
              {result.pest}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              {t('detectedPest')}
            </Typography>
          </Box>
        </Box>

        {/* Confidence bar */}
        <Box className="mbe-5">
          <Box className="flex justify-between mbe-2">
            <Typography variant="caption" fontWeight={600} color="text.secondary">
              {t('confidence')}
            </Typography>
            <Typography variant="body2" fontWeight={700} color={color}>
              {result.confidence}%
            </Typography>
          </Box>
          <LinearProgress
            variant="determinate"
            value={result.confidence}
            color={color}
            sx={{
              height: 10,
              borderRadius: 5,
              '& .MuiLinearProgress-bar': {
                borderRadius: 5,
              },
            }}
          />
        </Box>

        {/* Description */}
        <Box className="mbe-5">
          <Box className="flex items-center gap-2 mbe-2">
            <i className="tabler-leaf text-lg text-success" />
            <Typography variant="caption" fontWeight={600} color="text.secondary">
              {t('description')}
            </Typography>
          </Box>
          <Typography variant="body2" color="text.primary">
            {result.description}
          </Typography>
        </Box>

        {/* Treatment */}
        <Box>
          <Box className="flex items-center gap-2 mbe-2">
            <i className="tabler-heart-rate-monitor text-lg text-primary" />
            <Typography variant="caption" fontWeight={600} color="text.secondary">
              {t('recommendedTreatment')}
            </Typography>
          </Box>
          <Typography variant="body2" color="text.primary">
            {result.treatment}
          </Typography>
        </Box>
      </CardContent>
    </Card>
  )
}
