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

const PipeDetailsCard = ({ material }) => {
  const pipeDetails = material.pipe_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' }}>
            🔧 PIPE 상세 정보
          </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">
              {pipeDetails.size_inches || material.size_spec || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">스케줄</Typography>
            <Typography variant="body1">
              {pipeDetails.schedule_type || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">재질</Typography>
            <Typography variant="body1">
              {pipeDetails.material_spec || material.material_grade || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">제작방식</Typography>
            <Typography variant="body1">
              {pipeDetails.manufacturing_method || '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">길이</Typography>
            <Typography variant="body1">
              {pipeDetails.length_mm ? `${pipeDetails.length_mm}mm` : '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">외경</Typography>
            <Typography variant="body1">
              {pipeDetails.outer_diameter_mm ? `${pipeDetails.outer_diameter_mm}mm` : '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">두께</Typography>
            <Typography variant="body1">
              {pipeDetails.wall_thickness_mm ? `${pipeDetails.wall_thickness_mm}mm` : '-'}
            </Typography>
          </Grid>
          
          <Grid item xs={6} sm={3}>
            <Typography variant="subtitle2" color="text.secondary">중량</Typography>
            <Typography variant="body1">
              {pipeDetails.weight_per_meter_kg ? `${pipeDetails.weight_per_meter_kg}kg/m` : '-'}
            </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 PipeDetailsCard;