import { useState } from 'react'
import PageContainer from '../../components/PageContainer'
import PageHeader from '../../components/PageHeader'
import './ProjectQuotes.css'

const ALL_INSURERS = [
  { id: 'pacific', name: '太平洋' },
  { id: 'taiping', name: '太平' },
  { id: 'dadi', name: '大地' },
  { id: 'pingan', name: '平安' },
  { id: 'huatai', name: '华泰财' },
  { id: 'yatai', name: '亚太' },
]

type QuoteItem = {
  insurer: string
  premium?: string
  coverage?: string
  note?: string
  status: 'pending' | 'received'
}

type FormData = {
  projectCode: string
  projectTitle: string
  sponsor: string
  projectPhase: string
}

const initialForm: FormData = {
  projectCode: '',
  projectTitle: '',
  sponsor: '',
  projectPhase: '',
}

function ProjectQuotes() {
  const [fillMode, setFillMode] = useState<'manual' | 'upload'>('manual')
  const [formData, setFormData] = useState<FormData>(initialForm)
  const [uploading, setUploading] = useState(false)
  const [aiQuote, setAiQuote] = useState<string | null>(null)
  const [generatingQuote, setGeneratingQuote] = useState(false)
  const [preciseSent, setPreciseSent] = useState(false)
  const [sendingPrecise, setSendingPrecise] = useState(false)
  const [quotes, setQuotes] = useState<QuoteItem[]>([])
  const [preciseReceived, setPreciseReceived] = useState(false)

  const canGenerateQuote =
    formData.projectCode.trim() &&
    formData.projectTitle.trim() &&
    formData.sponsor.trim() &&
    formData.projectPhase.trim()

  const handleUploadChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setUploading(true)
    await new Promise((r) => setTimeout(r, 1200))
    setFormData({
      projectCode: 'CT-2025-' + Math.floor(1000 + Math.random() * 9000),
      projectTitle: file.name.replace(/\.[^.]+$/, '') || '临床试验方案',
      sponsor: '示例申办者',
      projectPhase: 'I期',
    })
    setUploading(false)
  }

  const handleGenerateQuote = async () => {
    if (!canGenerateQuote) return
    setGeneratingQuote(true)
    await new Promise((r) => setTimeout(r, 1500))
    setAiQuote(
      `基于当前项目信息（${formData.projectTitle}，${formData.projectPhase}）的预估报价：\n` +
        '· 建议每人保额：80–120 万\n· 每次事故限额：400–600 万\n· 预估年保费区间：约 1.1 万–1.4 万元\n（实际以各保司精准报价为准）'
    )
    setGeneratingQuote(false)
  }

  const handleGetPreciseQuote = async () => {
    if (!aiQuote) return
    setSendingPrecise(true)
    setPreciseSent(true)
    setQuotes(ALL_INSURERS.map(({ name }) => ({ insurer: name, status: 'pending' as const })))
    setSendingPrecise(false)
    // Mock: 保司回复后展示
    const mockQuotes: QuoteItem[] = [
      { insurer: '太平洋', premium: '¥12,800/年', coverage: '每人保额 100 万，每次事故 500 万', note: '3 个工作日内出单', status: 'received' },
      { insurer: '太平', premium: '¥11,500/年', coverage: '每人保额 80 万，每次事故 400 万', note: '支持医疗直付', status: 'received' },
      { insurer: '大地', premium: '¥13,200/年', coverage: '每人保额 100 万，每次事故 600 万', note: '含 SUSAR/SAE 专项', status: 'received' },
      { insurer: '平安', premium: '¥14,000/年', coverage: '每人保额 120 万，每次事故 800 万', note: '全国网点理赔', status: 'received' },
      { insurer: '华泰财', premium: '¥12,000/年', coverage: '每人保额 100 万，每次事故 500 万', note: '与经纪服务联动', status: 'received' },
      { insurer: '亚太', premium: '¥11,800/年', coverage: '每人保额 80 万，每次事故 400 万', note: '5 个工作日报价', status: 'received' },
    ]
    setTimeout(() => {
      setQuotes(mockQuotes)
      setPreciseReceived(true)
    }, 2000)
  }

  const startNewInquiry = () => {
    setFormData(initialForm)
    setAiQuote(null)
    setPreciseSent(false)
    setQuotes([])
    setPreciseReceived(false)
  }

  return (
    <PageContainer>
      <div className="project-quotes-page">
        <PageHeader
          title="报价页面"
          description="填写项目方案编号、项目标题、申办者、项目分期（可手动填写或上传方案由 AI 识别），生成报价后向各保司获取精准报价；系统将询价发至保司，保司回复至 rmo@vdano.com，经临研安审核后在此展示。"
        />
        <div className="page-body">
          <section className="section section-project-quotes">
            <div className="container">
              <div className="quote-form-card card main-card">
                <h3 className="quote-form-title">1. 报价需提交的资料</h3>
                <div className="quote-fill-mode">
                  <label className="quote-radio">
                    <input
                      type="radio"
                      name="fillMode"
                      checked={fillMode === 'manual'}
                      onChange={() => setFillMode('manual')}
                    />
                    <span>手动填写</span>
                  </label>
                  <label className="quote-radio">
                    <input
                      type="radio"
                      name="fillMode"
                      checked={fillMode === 'upload'}
                      onChange={() => setFillMode('upload')}
                    />
                    <span>上传项目方案（AI 识别填充）</span>
                  </label>
                </div>

                {fillMode === 'upload' && (
                  <div className="form-group">
                    <label>上传项目方案</label>
                    <input type="file" accept=".pdf,.doc,.docx" onChange={handleUploadChange} />
                    {uploading && <p className="form-hint">AI 识别中…</p>}
                  </div>
                )}

                <div className="quote-form-grid">
                  <div className="form-group">
                    <label>项目方案编号</label>
                    <input
                      type="text"
                      value={formData.projectCode}
                      onChange={(e) => setFormData((d) => ({ ...d, projectCode: e.target.value }))}
                      placeHolder="如：CT-2025-001"
                    />
                  </div>
                  <div className="form-group">
                    <label>项目标题</label>
                    <input
                      type="text"
                      value={formData.projectTitle}
                      onChange={(e) => setFormData((d) => ({ ...d, projectTitle: e.target.value }))}
                      placeHolder="试验方案标题"
                    />
                  </div>
                  <div className="form-group">
                    <label>申办者</label>
                    <input
                      type="text"
                      value={formData.sponsor}
                      onChange={(e) => setFormData((d) => ({ ...d, sponsor: e.target.value }))}
                      placeHolder="申办者名称"
                    />
                  </div>
                  <div className="form-group">
                    <label>项目分期</label>
                    <input
                      type="text"
                      value={formData.projectPhase}
                      onChange={(e) => setFormData((d) => ({ ...d, projectPhase: e.target.value }))}
                      placeHolder="如：I期、II期、III期"
                    />
                  </div>
                </div>
              </div>

              <div className="quote-form-card card main-card">
                <h3 className="quote-form-title">2. 生成报价</h3>
                <p className="quote-form-desc">由 AI 基于上述资料自动生成预估报价。</p>
                <div className="form-actions">
                  <button
                    type="button"
                    className="btn btn-primary"
                    disabled={!canGenerateQuote || generatingQuote}
                    onClick={handleGenerateQuote}
                  >
                    {generatingQuote ? 'AI 生成中…' : '生成报价'}
                  </button>
                </div>
                {aiQuote && (
                  <div className="quote-ai-result">
                    <pre>{aiQuote}</pre>
                  </div>
                )}
              </div>

              <div className="quote-form-card card main-card">
                <h3 className="quote-form-title">3. 获取精准报价</h3>
                <p className="quote-form-desc">系统将报价资料整合后以 Email 发送至各保司，保司回复至 rmo@vdano.com，经临研安审核后在此展示。</p>
                <div className="form-actions">
                  <button
                    type="button"
                    className="btn btn-primary"
                    disabled={!aiQuote || sendingPrecise}
                    onClick={handleGetPreciseQuote}
                  >
                    {sendingPrecise ? '发送中…' : preciseSent ? '已发送至各保司' : '获取精准报价'}
                  </button>
                  {(preciseSent || preciseReceived) && (
                    <button type="button" className="btn btn-secondary" onClick={startNewInquiry}>
                      发起新询价
                    </button>
                  )}
                </div>
                {preciseSent && (
                  <p className="quote-sent-tip">
                    已向各保司发送询价邮件，保司将回复至 rmo@vdano.com，审核通过后展示如下。
                  </p>
                )}
                {quotes.length > 0 && (
                  <div className="insurer-quotes-grid">
                    {quotes.map((q) => (
                      <div key={q.insurer} className={`insurer-quote-card ${q.status === 'received' ? 'received' : 'pending'}`}>
                        <h4 className="insurer-quote-name">{q.insurer}</h4>
                        {q.status === 'pending' ? (
                          <p className="insurer-quote-pending">等待保司报价回复…</p>
                        ) : (
                          <>
                            {q.premium && <p className="insurer-quote-premium">{q.premium}</p>}
                            {q.coverage && <p className="insurer-quote-coverage">{q.coverage}</p>}
                            {q.note && <p className="insurer-quote-note">{q.note}</p>}
                          </>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </section>
        </div>
      </div>
    </PageContainer>
  )
}

export default ProjectQuotes