import React from 'react';
import { Card, CardContent, Typography, Box, Grid, Chip, Divider } from '@mui/material';

const FittingDetailsCard = ({ material }) => {
  const fittingDetails = material.fitting_details || {};
  
  return (
    <Card sx={{ mt: 2, backgroundColor: '#f5f5f5' }}>
      <CardContent>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
            🔗 FITTING 상세 정보
          </Typography>
          <Chip 
            label={`신뢰도: ${Math.round((material.classification_confidence || 0) * 100)}%`}
            color={material.classification_confidence >= 0.8 ? 'success' : 'warning'}
            size="small"
          />
        </Box>
        
        <Divider sx={{ mb: 2 }} />
        
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Typography variant="subtitle2" color="text.secondary">자재명</Typography>
            <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
              {material.original_description}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">피팅 타입</Typography>
            <Typography variant="body1">
              {fittingDetails.fitting_type || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">세부 타입</Typography>
            <Typography variant="body1">
              {fittingDetails.fitting_subtype || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">연결 방식</Typography>
            <Typography variant="body1">
              {fittingDetails.connection_method || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">압력 등급</Typography>
            <Typography variant="body1">
              {fittingDetails.pressure_rating || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">재질 규격</Typography>
            <Typography variant="body1">
              {fittingDetails.material_standard || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">재질 등급</Typography>
            <Typography variant="body1">
              {fittingDetails.material_grade || material.material_grade || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">주 사이즈</Typography>
            <Typography variant="body1">
              {fittingDetails.main_size || material.size_spec || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">축소 사이즈</Typography>
            <Typography variant="body1">
              {fittingDetails.reduced_size || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={12}>
            <Typography variant="subtitle2" color="text.secondary">수량</Typography>
            <Typography variant="body1" sx={{ fontWeight: 'bold', color: 'primary.main' }}>
              {material.quantity} {material.unit}
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default FittingDetailsCard;