import { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { api } from '../../services/api-client';

interface RawReport {
  id: string; patientId: string; title: string; category: string;
  imageUrls: string[]; status: string; riskLevel?: string;
  summary?: string; suggestions?: string;
  patientName?: string; doctorName?: string;
  createdAt: string; completedAt?: string;
  items?: RawItem[];
}

interface RawItem {
  id: string; itemName: string; resultValue: string;
  unit?: string; referenceRange?: string; isAbnormal: boolean;
}

const categoryMap: Record<string, string> = {
  '血液检查': '血液检查', '心电图': '心电图', '影像学': '影像学', '尿液检查': '尿液检查', '其他': '其他',
  'Blood Test': '血液检查', 'ECG': '心电图', 'Imaging': '影像学',
};

export function ReportDetailPage() {
  const { id } = useParams<{ id: string }>();
  const [report, setReport] = useState<RawReport | null>(null);
  const [lightbox, setLightbox] = useState<string | null>(null);

  const [summary, setSummary] = useState('');
  const [riskLevel, setRiskLevel] = useState('normal');
  const [suggestions, setSuggestions] = useState('');
  const [items, setItems] = useState([{ itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (!id) return;
    api.get<RawReport>(`/api/reports/${id}`).then((r) => setReport(r.data)).catch(() => {});
  }, [id]);

  const addItem = () => setItems((prev) => [...prev, { itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
  const updateItem = (i: number, field: string, value: string | boolean) =>
    setItems((prev) => prev.map((it, idx) => idx === i ? { ...it, [field]: value } : it));
  const removeItem = (i: number) => { if (items.length > 1) setItems((prev) => prev.filter((_, idx) => idx !== i)); };

  const handleInterpret = async () => {
    if (!summary.trim() || !id) return;
    setSubmitting(true);
    try {
      await api.post(`/api/reports/${id}/interpret`, {
        summary, items: items.filter((it) => it.itemName.trim()), riskLevel,
        suggestions: suggestions || null,
      });
      const updated = await api.get<RawReport>(`/api/reports/${id}`);
      setReport(updated.data);
    } catch { alert('提交失败'); }
    finally { setSubmitting(false); }
  };

  if (!report) return <div style={{ padding: 24 }}>加载中...</div>;

  const isCompleted = report.status === 'completed';
  const riskMap: Record<string, { text: string; color: string }> = {
    normal: { text: '正常', color: '#2e7d32' },
    attention: { text: '关注', color: '#f57c00' },
    abnormal: { text: '异常', color: '#c62828' },
  };

  return (
    <div style={{ padding: 24 }}>
      <Link to="/reports" style={{ fontSize: 13, color: '#1976d2' }}>← 返回报告列表</Link>

      <div style={{ background: '#fff', marginTop: 16, padding: 24, borderRadius: 8, boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <h2 style={{ margin: 0 }}>{report.title}</h2>
            <div style={{ marginTop: 8, fontSize: 13, color: '#888' }}>
              患者：{report.patientName || '未知'} &nbsp;|&nbsp;
              分类：{categoryMap[report.category] || report.category} &nbsp;|&nbsp;
              日期：{report.createdAt?.split('T')[0]}
            </div>
          </div>
          <span style={{
            padding: '4px 12px', borderRadius: 12, fontSize: 12, fontWeight: 500,
            background: isCompleted ? '#e8f5e9' : '#fff3e0',
            color: isCompleted ? '#2e7d32' : '#f57c00',
          }}>
            {isCompleted ? '已完成' : '待审核'}
          </span>
        </div>

        {/* 图片 */}
        {report.imageUrls && report.imageUrls.length > 0 && (
          <div style={{ marginTop: 20 }}>
            <h4 style={{ fontSize: 14, marginBottom: 8 }}>上传图片（{report.imageUrls.length}张）</h4>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {report.imageUrls.map((url, i) => (
                <div key={i} onClick={() => setLightbox(url)} style={{
                  width: 120, height: 120, borderRadius: 8, overflow: 'hidden',
                  cursor: 'pointer', border: '2px solid #eee', background: '#f5f5f5',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <img src={`http://localhost:5000${url}`} alt={`图片${i}`}
                    style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 灯箱 */}
        {lightbox && (
          <div onClick={() => setLightbox(null)} style={{
            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999, cursor: 'pointer',
          }}>
            <img src={`http://localhost:5000${lightbox}`} alt="预览" style={{ maxWidth: '90vw', maxHeight: '90vh', borderRadius: 8 }} />
          </div>
        )}

        {/* 已完成解读 */}
        {isCompleted && (
          <div style={{ marginTop: 20, padding: 16, background: '#e8f5e9', borderRadius: 8 }}>
            <h4 style={{ fontSize: 14, marginBottom: 8 }}>解读结果</h4>
            <div style={{ fontSize: 13 }}>
              <p><strong>风险等级：</strong>
                <span style={{ color: riskMap[report.riskLevel || '']?.color, fontWeight: 600 }}>
                  {riskMap[report.riskLevel || '']?.text || report.riskLevel || '-'}
                </span>
              </p>
              <p><strong>总结：</strong>{report.summary || '-'}</p>
              {report.suggestions && <p><strong>建议：</strong>{report.suggestions}</p>}
            </div>

            {report.items && report.items.length > 0 && (
              <table style={{ width: '100%', marginTop: 12, borderCollapse: 'collapse', fontSize: 12 }}>
                <thead><tr style={{ textAlign: 'left', borderBottom: '2px solid #c8e6c9' }}>
                  <th style={{ padding: '6px 8px' }}>检查项目</th>
                  <th style={{ padding: '6px 8px' }}>结果</th>
                  <th style={{ padding: '6px 8px' }}>参考范围</th>
                  <th style={{ padding: '6px 8px' }}>是否异常</th>
                </tr></thead>
                <tbody>
                  {report.items.map((item) => (
                    <tr key={item.id} style={{ borderBottom: '1px solid #e8f5e9' }}>
                      <td style={{ padding: '6px 8px' }}>{item.itemName}</td>
                      <td style={{ padding: '6px 8px' }}>{item.resultValue} {item.unit || ''}</td>
                      <td style={{ padding: '6px 8px' }}>{item.referenceRange || '-'}</td>
                      <td style={{ padding: '6px 8px', color: item.isAbnormal ? '#c62828' : '#2e7d32', fontWeight: 500 }}>
                        {item.isAbnormal ? '是' : '否'}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}

        {/* 解读表单 */}
        {!isCompleted && (
          <div style={{ marginTop: 24, borderTop: '1px solid #eee', paddingTop: 20 }}>
            <h3 style={{ fontSize: 15, marginBottom: 16 }}>医生解读</h3>

            <div style={{ marginBottom: 12 }}>
              <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>解读总结</label>
              <textarea value={summary} onChange={(e) => setSummary(e.target.value)}
                placeholder="请输入您的专业解读总结..."
                rows={4}
                style={{ width: '100%', padding: '10px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, resize: 'vertical', fontFamily: 'inherit', boxSizing: 'border-box' }} />
            </div>

            <div style={{ display: 'flex', gap: 16, marginBottom: 12 }}>
              <div style={{ flex: 1 }}>
                <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>风险等级</label>
                <select value={riskLevel} onChange={(e) => setRiskLevel(e.target.value)}
                  style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit' }}>
                  <option value="normal">正常</option>
                  <option value="attention">需关注</option>
                  <option value="abnormal">异常</option>
                </select>
              </div>
              <div style={{ flex: 1 }}>
                <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>医生建议</label>
                <input value={suggestions} onChange={(e) => setSuggestions(e.target.value)}
                  placeholder="如：继续当前用药方案"
                  style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box' }} />
              </div>
            </div>

            <div style={{ marginBottom: 12 }}>
              <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>检查项目</label>
              {items.map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'center' }}>
                  <input placeholder="项目名称" value={item.itemName} onChange={(e) => updateItem(i, 'itemName', e.target.value)}
                    style={{ flex: 2, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
                  <input placeholder="结果" value={item.resultValue} onChange={(e) => updateItem(i, 'resultValue', e.target.value)}
                    style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
                  <input placeholder="单位" value={item.unit} onChange={(e) => updateItem(i, 'unit', e.target.value)}
                    style={{ width: 70, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
                  <input placeholder="参考范围" value={item.referenceRange} onChange={(e) => updateItem(i, 'referenceRange', e.target.value)}
                    style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
                  <label style={{ fontSize: 12, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 3 }}>
                    <input type="checkbox" checked={item.isAbnormal} onChange={(e) => updateItem(i, 'isAbnormal', e.target.checked)} />
                    异常
                  </label>
                  <button onClick={() => removeItem(i)}
                    style={{ background: 'none', border: 'none', color: '#c62828', cursor: 'pointer', fontSize: 16 }}
                    disabled={items.length <= 1}>✕</button>
                </div>
              ))}
              <button onClick={addItem} style={{
                padding: '4px 12px', border: '1px dashed #1976d2', borderRadius: 4,
                background: 'none', color: '#1976d2', cursor: 'pointer', fontSize: 12,
              }}>+ 添加项目</button>
            </div>

            <button onClick={handleInterpret} disabled={submitting} style={{
              padding: '10px 28px', background: '#1976d2', color: '#fff',
              border: 'none', borderRadius: 6, fontSize: 14, cursor: 'pointer',
              opacity: submitting ? 0.7 : 1, marginTop: 8,
            }}>
              {submitting ? '提交中...' : '提交解读'}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}