// drawer.jsx
function LeadDrawer({ lead, onClose, user, onLeadUpdated }) {
  const [note, setNote] = React.useState("");
  const [noteType, setNoteType] = React.useState("note");
  const [status, setStatus] = React.useState(lead.status);
  const [owner, setOwner] = React.useState(lead.owner);
  const [followUp, setFollowUp] = React.useState(lead.followUp);
  const [saving, setSaving] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  const [submittingNote, setSubmittingNote] = React.useState(false);
  const [saveError, setSaveError] = React.useState('');

  React.useEffect(() => {
    setStatus(lead.status);
    setOwner(lead.owner);
    setFollowUp(lead.followUp);
    setSaveError('');
  }, [lead.id, lead.status, lead.owner, lead.followUp]);

  const meta = window.STATUS_META[lead.status] || window.STATUS_META['new'];
  const scoreColor = lead.score >= 70 ? "#EF4444" : lead.score >= 40 ? "#EAB308" : "#94A3B8";

  const handleSave = async () => {
    setSaving(true);
    setSaveError('');
    try {
      const body = { status, follow_up_date: followUp || null };
      if (user.isAdmin) body.assigned_to = owner || null;
      const updated = await window.api.patchLead(lead.id, body);
      onLeadUpdated({ ...updated, timeline: lead.timeline });
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (e) {
      setSaveError(e.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const handleSubmitNote = async () => {
    if (!note.trim()) return;
    setSubmittingNote(true);
    try {
      const newNote = await window.api.addNote(lead.id, { content: note.trim(), type: noteType });
      onLeadUpdated({ ...lead, timeline: [...(lead.timeline || []), newNote] });
      setNote('');
    } catch (e) {
      setSaveError(e.message || '提交失败');
    } finally {
      setSubmittingNote(false);
    }
  };

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose}></div>
      <aside className="drawer">
        <header className="drawer-header">
          <div className="dh-left">
            <button className="icon-btn" onClick={onClose}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 3l4 4-4 4" /></svg>
            </button>
            <span className="lead-id">{(lead.id || '').slice(0, 8)}</span>
            <span className="status-pill" style={{ background: meta.bg, color: meta.fg }}>
              <span className="pill-dot" style={{ background: meta.dot }}></span>
              {meta.label}
            </span>
            <span className="score-inline">
              <span className="score-dot" style={{ background: scoreColor }}></span>
              评分 {lead.score}
            </span>
          </div>
          <div className="dh-right">
            <button className="icon-btn" onClick={onClose}>✕</button>
          </div>
        </header>

        <div className="drawer-body">
          <section className="drawer-left">
            <div className="lead-hero">
              <div className="hero-avatar">{(lead.name || '?').slice(0, 1)}</div>
              <div className="hero-info">
                <h2 className="hero-name">{lead.name}</h2>
                <div className="hero-sub">
                  {lead.title && <><span>{lead.title}</span><span className="sep">·</span></>}
                  <span className="hero-company">{lead.company}</span>
                </div>
                <div className="hero-tags">
                  {lead.country && <span className="hero-chip">{window.COUNTRY_FLAG[lead.country] || ''} {lead.countryName || lead.country}</span>}
                  {lead.product && <span className="hero-chip">{lead.product}</span>}
                  {lead.prefer && lead.prefer !== '–' && <span className="hero-chip">偏好：{lead.prefer}</span>}
                </div>
              </div>
            </div>

            <Block title="联系信息">
              <div className="kv-grid">
                <KV label="姓名" value={lead.name} />
                {lead.title && <KV label="职位" value={lead.title} />}
                <KV label="公司" value={lead.company} />
                {lead.phone && <KV label="电话"><a href={`tel:${lead.phone}`} className="kv-link">{lead.phone}</a></KV>}
                {lead.email && <KV label="邮件"><a href={`mailto:${lead.email}`} className="kv-link">{lead.email}</a></KV>}
                {lead.message && <KV label="需求说明" value={lead.message} />}
              </div>
            </Block>

            <Block title="来源信息">
              <div className="kv-grid">
                {lead.source && <KV label="来源页面"><code className="kv-mono">{lead.source}</code></KV>}
                {lead.cta && <KV label="CTA 按钮" value={lead.cta} />}
                {lead.country && <KV label="国家 / 地区" value={`${window.COUNTRY_FLAG[lead.country] || ''} ${lead.countryName || lead.country}`} />}
              </div>
            </Block>

            {lead.ai ? (
              <Block title={<>AI 分析 <span className="ai-badge">BETA</span></>} accent>
                <div className="ai-head">
                  <div className="ai-score">
                    <div className="ai-score-num">{lead.score}</div>
                    <div className="ai-score-label">AI 评分</div>
                    <div className="ai-score-bar"><div className="ai-score-bar-fill" style={{ width: `${lead.score}%` }}></div></div>
                  </div>
                  <div className="ai-meta">
                    <span className="priority-tag">{lead.ai.priority}</span>
                    <p className="ai-summary">{lead.ai.summary}</p>
                  </div>
                </div>
                {lead.ai.suggestions?.length > 0 && (
                  <div className="ai-sub">
                    <div className="ai-sub-title"><span className="spark">✦</span> 建议话术 / 下一步行动</div>
                    <ul className="ai-list">
                      {lead.ai.suggestions.map((s, i) => (
                        <li key={i}><span className="ai-bullet">{i + 1}</span><span>{s}</span></li>
                      ))}
                    </ul>
                  </div>
                )}
              </Block>
            ) : (
              <Block title={<>AI 分析 <span className="ai-badge">BETA</span></>}>
                <div className="ai-empty-dashed">
                  <div className="ai-empty-icon">✦</div>
                  <div className="ai-empty-title">暂未分析</div>
                  <div className="ai-empty-sub">AI 评分功能即将上线</div>
                </div>
              </Block>
            )}

            <Block title="跟进记录">
              {(lead.timeline || []).length > 0 ? (
                <ol className="timeline">
                  {lead.timeline.map((t, i) => (
                    <li key={i} className="tl-item">
                      <span className={`tl-icon tl-${t.type}`}>{t.icon}</span>
                      <div className="tl-body">
                        <div className="tl-meta">
                          <span className="tl-author">{t.author}</span>
                          <span className="tl-time">{t.time}</span>
                        </div>
                        <div className="tl-text">{t.text}</div>
                      </div>
                    </li>
                  ))}
                </ol>
              ) : (
                <div className="ai-empty">
                  <div className="ai-empty-icon">◷</div>
                  <div className="ai-empty-title">还没有跟进记录</div>
                  <div className="ai-empty-sub">在右侧新增备注记录第一次互动</div>
                </div>
              )}
            </Block>
          </section>

          <aside className="drawer-right">
            <div className="action-group">
              <label className="action-label">状态</label>
              <select className="action-select" value={status} onChange={(e) => setStatus(e.target.value)}>
                {window.STATUS_ORDER.map((s) => (
                  <option key={s} value={s}>{window.STATUS_META[s].label}</option>
                ))}
              </select>
            </div>

            {user?.isAdmin && (
              <div className="action-group">
                <label className="action-label">负责人（邮箱）</label>
                <input className="action-select" type="email" value={owner} onChange={(e) => setOwner(e.target.value)} placeholder="name@cloudmate.ai" />
              </div>
            )}

            <div className="action-group">
              <label className="action-label">下次跟进日期</label>
              <input type="date" className="action-select" value={followUp} onChange={(e) => setFollowUp(e.target.value)} />
            </div>

            {saveError && <div style={{ fontSize: 12, color: '#ef4444', marginBottom: 8 }}>{saveError}</div>}

            <button className="btn-primary full" onClick={handleSave} disabled={saving}>
              {saving ? '保存中…' : saved ? '✓ 已保存' : '保存变更'}
            </button>
            <button className="btn-ghost full">转为商机</button>

            <div className="divider-label">新增备注</div>

            <div className="action-group">
              <label className="action-label">类型</label>
              <select className="action-select" value={noteType} onChange={(e) => setNoteType(e.target.value)}>
                <option value="note">📝 备注</option>
                <option value="call">📞 通话</option>
                <option value="email">📧 邮件</option>
                <option value="meeting">🤝 会议</option>
              </select>
            </div>

            <textarea className="note-input" placeholder="记录本次互动要点..." value={note} onChange={(e) => setNote(e.target.value)} rows={5} />

            <div className="note-foot">
              <div className="note-tools"></div>
              <button className="btn-primary sm" disabled={!note.trim() || submittingNote} onClick={handleSubmitNote}>
                {submittingNote ? '提交中…' : '提交'}
              </button>
            </div>
          </aside>
        </div>
      </aside>
    </>
  );
}

window.LeadDrawer = LeadDrawer;