import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import type { RangeRule } from "./contexts/DataContext";

interface WindingShaftSteelSummaryProps {
  ranges?: RangeRule[];
}

export function WindingShaftSteelSummary({ ranges }: WindingShaftSteelSummaryProps) {
  if (!ranges || ranges.length === 0) return null;

  // W1 구간별로 그룹화
  const grouped: { [key: string]: RangeRule[] } = {};
  ranges.forEach((range) => {
    const key = `${range.minValue}-${range.maxValue}`;
    if (!grouped[key]) grouped[key] = [];
    grouped[key].push(range);
  });

  return (
    <Card className="mt-4 bg-purple-50/50 border-purple-200">
      <CardHeader className="pb-3">
        <CardTitle className="text-sm flex items-center gap-2">
          <span className="text-purple-700">📊 감기샤프트 철재 복합조건 산정표</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {Object.entries(grouped).map(([key, groupRanges]) => {
            const [min, max] = key.split('-').map(Number);
            const w1Range = min === 0 && max === 2400 
              ? 'W1 ≤ 2400mm'
              : min === 2400 && max === 3000
              ? '2400 < W1 ≤ 3000mm'
              : min === 3000 && max === 3600
              ? '3000 < W1 ≤ 3600mm'
              : min === 3600
              ? 'W1 > 3600mm'
              : `${min} < W1 ≤ ${max}mm`;

            return (
              <div key={key} className="p-3 bg-white border border-purple-200 rounded-lg">
                <div className="text-xs font-medium text-purple-800 mb-2">
                  {w1Range}
                </div>
                <div className="flex flex-wrap gap-2">
                  {groupRanges.map((range) => (
                    <div 
                      key={range.id}
                      className="flex items-center gap-2 text-xs bg-purple-100 px-2 py-1 rounded border border-purple-300"
                    >
                      {range.additionalConditions && range.additionalConditions.length > 0 ? (
                        <>
                          {range.additionalConditions.map((cond, idx) => (
                            <React.Fragment key={cond.id}>
                              {idx > 0 && (
                                <Badge 
                                  variant={cond.conditionType === 'and' ? 'default' : 'secondary'}
                                  className={`text-xs ${cond.conditionType === 'and' ? 'bg-purple-700' : 'bg-orange-600'}`}
                                >
                                  {cond.conditionType.toUpperCase()}
                                </Badge>
                              )}
                              <span className="text-purple-700">
                                {cond.variable}: {cond.minValue === 0 ? '≤' : `${cond.minValue} <`} 
                                {cond.maxValue === 99999 ? '' : ` ≤ ${cond.maxValue}`}
                              </span>
                            </React.Fragment>
                          ))}
                          <span className="text-purple-500">→</span>
                          <Badge variant="default" className="bg-purple-600 text-white text-xs">
                            {range.result}
                          </Badge>
                        </>
                      ) : (
                        <Badge variant="default" className="bg-purple-600 text-white text-xs">
                          {range.result}
                        </Badge>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
        
        <div className="mt-3 pt-3 border-t border-purple-200">
          <p className="text-xs text-purple-600">
            💡 <strong>조건 적용 순서:</strong> 제작사이즈(W1)로 1차 필터링 → 산출중량(K)으로 2차 필터링 → 최종 규격 결정
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
