import { useState } from 'react';
import { api, ApiError } from '../api/client';
import { useAuth } from '../auth/AuthContext';
import { useToast } from './Toast';

/**
 * 绑定被照护孕妇（家属受授权查看，PRD §6）。
 * MVP：通过"关怀码"（孕妇档案编号）绑定；正式授权链路（孕妇主动授权/审批）列入 V2。
 */
export function BindPatient({ onBound }: { onBound?: () => void }): JSX.Element {
  const { bindPatient } = useAuth();
  const { show } = useToast();
  const [code, setCode] = useState('');
  const [checking, setChecking] = useState(false);

  async function submit(e: React.FormEvent): Promise<void> {
    e.preventDefault();
    const value = code.trim();
    if (!value) {
      show('请输入关怀码');
      return;
    }
    setChecking(true);
    try {
      // 凭编号（关怀码）解析孕妇档案
      const p = await api.lookupByNo(value);
      bindPatient(p.id);
      show(`已绑定：${p.name}`);
      onBound?.();
    } catch (err) {
      show(err instanceof ApiError ? err.message : '绑定失败，请确认关怀码');
    } finally {
      setChecking(false);
    }
  }

  return (
    <form className="card" onSubmit={submit}>
      <h2 className="section-title" style={{ marginTop: 0 }}>
        绑定我要关怀的孕妇
      </h2>
      <p className="muted" style={{ marginBottom: 16 }}>
        请输入孕妇分享给你的「关怀码」（即她的档案编号）。绑定后你可以查看她的孕期状态并接收关怀提醒。
      </p>
      <div className="field">
        <label>关怀码</label>
        <input
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="如 PCM-000001"
        />
      </div>
      <button className="btn btn-primary btn-block" type="submit" disabled={checking}>
        {checking ? '绑定中…' : '绑定'}
      </button>
    </form>
  );
}