import { useParams, Link } from 'react-router-dom'
import { useAuth } from '../../contexts/AuthContext'
import PageContainer from '../../components/PageContainer'
import PageHeader from '../../components/PageHeader'
import './ClaimDetail.css'

function ClaimDetail() {
  const { id } = useParams()
  const { user } = useAuth()
  const isPolicyHolder = user?.role === '投保人'
  const _isInsurer = user?.role === '保险人'
  void _isInsurer // 预留：保险人视图

  // 模拟数据（后续替换为 API 调用）
  const mockClaim = {
    id: id || '1',
    projectNumber: 'CT-2025-001',
    projectTitle: 'XX药物临床试验项目',
    coverage: '全面保障',
    insurer: '太平洋保险',
    status: '待处理',
    details: {
      claimNumber: 'CL-2025-001',
      claimDate: '2025-02-01',
      claimAmount: '50000',
      claimReason: '受试者发生不良事件，需要医疗费用报销',
      description: '理赔详细描述信息...'
    },
    documents: [
      { name: '理赔申请书', type: 'pdf', url: '#' },
      { name: '医疗费用清单', type: 'xlsx', url: '#' },
      { name: '医院诊断证明', type: 'pdf', url: '#' }
    ]
  }

  return (
    <PageContainer>
      <div className="claim-detail-page">
        <PageHeader
          title="理赔评估明细"
          description={`理赔编号：${mockClaim.details.claimNumber}`}
        />
        <div className="page-body">
          {/* 基本信息 */}
          <section className="detail-section">
            <h2 className="section-title">基本信息</h2>
            <div className="card main-card">
              <div className="info-grid">
                <div className="info-item">
                  <label>项目编号</label>
                  <span>{mockClaim.projectNumber}</span>
                </div>
                <div className="info-item">
                  <label>试验题目</label>
                  <span>{mockClaim.projectTitle}</span>
                </div>
                <div className="info-item">
                  <label>保障范围</label>
                  <span>{mockClaim.coverage}</span>
                </div>
                <div className="info-item">
                  <label>承保公司</label>
                  <span>{mockClaim.insurer}</span>
                </div>
                <div className="info-item">
                  <label>理赔编号</label>
                  <span>{mockClaim.details.claimNumber}</span>
                </div>
                <div className="info-item">
                  <label>理赔日期</label>
                  <span>{mockClaim.details.claimDate}</span>
                </div>
                <div className="info-item">
                  <label>理赔金额</label>
                  <span className="amount">¥{mockClaim.details.claimAmount}</span>
                </div>
                <div className="info-item">
                  <label>理赔状态</label>
                  <span className={`status-badge status-pending`}>{mockClaim.status}</span>
                </div>
                <div className="info-item full-width">
                  <label>理赔原因</label>
                  <span>{mockClaim.details.claimReason}</span>
                </div>
                <div className="info-item full-width">
                  <label>详细描述</label>
                  <span>{mockClaim.details.description}</span>
                </div>
              </div>
            </div>
          </section>

          {/* 相关文档 */}
          <section className="detail-section">
            <h2 className="section-title">相关文档</h2>
            <div className="card main-card">
              <div className="documents-list">
                {mockClaim.documents.map((doc, index) => (
                  <div key={index} className="document-item">
                    <div className="document-icon">
                      {doc.type === 'pdf' ? '📄' : '📊'}
                    </div>
                    <div className="document-info">
                      <div className="document-name">{doc.name}</div>
                      <div className="document-type">{doc.type.toUpperCase()}</div>
                    </div>
                    <div className="document-actions">
                      <a href={doc.url} className="btn btn-sm btn-link" download>
                        下载
                      </a>
                      <button className="btn btn-sm btn-link">
                        预览
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* 操作按钮 */}
          <div className="action-bar">
            <Link to="/dashboard/claims" className="btn btn-secondary">
              返回列表
            </Link>
            {isPolicyHolder ? (
              <button className="btn btn-primary">
                申请理赔
              </button>
            ) : (
              <button className="btn btn-primary">
                处理理赔
              </button>
            )}
          </div>
        </div>
      </div>
    </PageContainer>
  )
}

export default ClaimDetail