import React from 'react'
import { X, Brain, TrendingUp, AlertTriangle, Lightbulb, Calendar } from 'lucide-react'

function IntegrationResult({ result, onClose }) {
  const getSeverityColor = (severity) => {
    switch (severity) {
      case '高': return 'bg-red-100 border-red-300 text-red-900'
      case '中': return 'bg-yellow-100 border-yellow-300 text-yellow-900'
      case '低': return 'bg-green-100 border-green-300 text-green-900'
      default: return 'bg-gray-100 border-gray-300 text-gray-900'
    }
  }

  return (
    <div className="bg-white rounded-lg shadow-md">
      {/* Header */}
      <div className="border-b border-gray-200 p-6 flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 flex items-center">
            <Brain className="w-6 h-6 mr-2 text-purple-600" />
            综合分析报告
          </h2>
          <p className="text-sm text-gray-600 mt-1">
            整合了 {result.report_count || result.reports_included?.length || 0} 份医疗报告
          </p>
        </div>
        <button
          onClick={onClose}
          className="text-gray-400 hover:text-gray-600 transition-colors"
        >
          <X className="w-6 h-6" />
        </button>
      </div>

      {/* Content */}
      <div className="p-6 space-y-6 max-h-[calc(100vh-300px)] overflow-y-auto">
        {/* Overall Summary */}
        <div className="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-lg p-6">
          <h3 className="font-semibold text-purple-900 mb-3 text-lg">整体健康状况</h3>
          <p className="text-purple-800 leading-relaxed">
            {result.integrated_analysis?.overall_summary || result.overall_summary || '暂无摘要'}
          </p>
        </div>

        {/* Health Trends */}
        {(result.integrated_analysis?.health_trends || result.health_trends) && (
          <div>
            <h3 className="font-semibold text-gray-900 mb-4 flex items-center text-lg">
              <TrendingUp className="w-5 h-5 mr-2 text-blue-600" />
              健康趋势
            </h3>
            <div className="grid gap-3">
              {(result.integrated_analysis?.health_trends || result.health_trends).map((trend, index) => (
                <div key={index} className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <p className="text-blue-900">{trend}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Priority Concerns */}
        {(result.integrated_analysis?.priority_concerns || result.priority_concerns) &&
         (result.integrated_analysis?.priority_concerns || result.priority_concerns).length > 0 && (
          <div>
            <h3 className="font-semibold text-gray-900 mb-4 flex items-center text-lg">
              <AlertTriangle className="w-5 h-5 mr-2 text-red-600" />
              优先关注事项
            </h3>
            <div className="space-y-3">
              {(result.integrated_analysis?.priority_concerns || result.priority_concerns).map((concern, index) => (
                <div
                  key={index}
                  className={`border rounded-lg p-4 ${getSeverityColor(concern.severity)}`}
                >
                  <div className="flex items-start justify-between mb-2">
                    <p className="font-semibold">{concern.concern}</p>
                    <span className="text-xs font-medium px-2 py-1 rounded">
                      {concern.severity}
                    </span>
                  </div>
                  <p className="text-sm">{concern.description}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Comprehensive Assessment */}
        {(result.integrated_analysis?.comprehensive_assessment || result.comprehensive_assessment) && (
          <div className="bg-gray-50 border border-gray-300 rounded-lg p-5">
            <h3 className="font-semibold text-gray-900 mb-3">综合评估</h3>
            <p className="text-gray-800 leading-relaxed">
              {result.integrated_analysis?.comprehensive_assessment || result.comprehensive_assessment}
            </p>
          </div>
        )}

        {/* Integrated Recommendations */}
        {(result.integrated_analysis?.integrated_recommendations || result.integrated_recommendations) && (
          <div>
            <h3 className="font-semibold text-gray-900 mb-4 flex items-center text-lg">
              <Lightbulb className="w-5 h-5 mr-2 text-yellow-600" />
              综合建议
            </h3>
            <ul className="space-y-2">
              {(result.integrated_analysis?.integrated_recommendations || result.integrated_recommendations).map((rec, index) => (
                <li key={index} className="flex items-start bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                  <span className="inline-block w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  <span className="text-gray-800">{rec}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Follow-up Suggestions */}
        {(result.integrated_analysis?.follow_up_suggestions || result.follow_up_suggestions) && (
          <div>
            <h3 className="font-semibold text-gray-900 mb-4 flex items-center text-lg">
              <Calendar className="w-5 h-5 mr-2 text-green-600" />
              后续跟踪建议
            </h3>
            <ul className="space-y-2">
              {(result.integrated_analysis?.follow_up_suggestions || result.follow_up_suggestions).map((suggestion, index) => (
                <li key={index} className="flex items-start">
                  <span className="inline-block w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                  <span className="text-gray-700">{suggestion}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Reports Included */}
        {result.reports_included && result.reports_included.length > 0 && (
          <div className="border-t pt-6">
            <h3 className="font-semibold text-gray-900 mb-3 text-sm">包含的报告</h3>
            <div className="space-y-2">
              {result.reports_included.map((report, index) => (
                <div key={index} className="text-sm text-gray-600 bg-gray-50 rounded p-2">
                  <span className="font-medium">{index + 1}. </span>
                  {report.filename}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Note */}
        {result.note && (
          <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
            <p className="text-xs text-gray-600 italic">{result.note}</p>
          </div>
        )}
      </div>
    </div>
  )
}

export default IntegrationResult
