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

interface Patient {
  id: string; name: string; phone: string; gender: string;
  medicalHistory: string[]; stentDate: string;
}

export function PatientListPage() {
  const [patients, setPatients] = useState<Patient[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get<Patient[]>('/api/patients')
      .then((r) => setPatients(r.data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const filtered = patients.filter((p) =>
    !search || p.name.includes(search) || p.phone.includes(search)
  );

  return (
    <div style={{ padding: 28 }}>
      <h2 style={{ marginBottom: 6, fontSize: 20, fontWeight: 700, color: '#1A1D28' }}>患者管理</h2>
      <p style={{ marginBottom: 18, fontSize: 13, color: '#9BA0B4' }}>共 {patients.length} 位患者</p>

      <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="搜索姓名或手机号..."
        style={{
          width: 280, padding: '10px 14px', border: '1.5px solid #E1E5ED', borderRadius: 10,
          fontSize: 13, marginBottom: 18, outline: 'none', boxSizing: 'border-box',
          transition: 'border-color 0.2s',
        }}
        onFocus={(e) => e.currentTarget.style.borderColor = '#4F6EF7'}
        onBlur={(e) => e.currentTarget.style.borderColor = '#E1E5ED'} />

      {loading ? <div style={{ color: '#9BA0B4' }}>加载中...</div> : (
        <div style={{ background: '#fff', borderRadius: 16, boxShadow: '0 2px 12px rgba(0,0,0,0.04)', overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ borderBottom: '2px solid #F0F2F5', textAlign: 'left', background: '#F9FAFC' }}>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>姓名</th>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>手机号</th>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>性别</th>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>病史</th>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>支架日期</th>
                <th style={{ padding: '13px 20px', fontWeight: 600, color: '#5A6072' }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p) => (
                <tr key={p.id} style={{ borderBottom: '1px solid #F5F6F9' }}>
                  <td style={{ padding: '12px 20px', fontWeight: 500 }}>{p.name}</td>
                  <td style={{ padding: '12px 20px', color: '#9BA0B4' }}>{p.phone}</td>
                  <td style={{ padding: '12px 20px' }}>{p.gender || '-'}</td>
                  <td style={{ padding: '12px 20px', color: '#5A6072' }}>{(p.medicalHistory || []).slice(0, 3).join('、') || '-'}</td>
                  <td style={{ padding: '12px 20px', color: '#5A6072' }}>{p.stentDate || '-'}</td>
                  <td style={{ padding: '12px 20px' }}>
                    <Link to={`/patients/${p.id}`} style={{
                      color: '#4F6EF7', fontSize: 12, fontWeight: 600,
                      padding: '4px 12px', background: '#EDF0FD', borderRadius: 6,
                    }}>查看详情</Link>
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={6} style={{ padding: 32, textAlign: 'center', color: '#9BA0B4' }}>暂无患者数据</td></tr>
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}