const { useState } = React;
const { Icon, ProtoNav, Topbar, Sidebar, Footer } = window;

// 模拟数据
const MOCK_USERS = [
  { id: 1, email: "u1@example.com", phone: "+86 138****1234", company: "A公司", source: "展会", ref: "S001", state: "LEAD_APPLIED", total: 0, remain: 0, expire: "—", consume: 0, regTime: "2026-05-22 14:30", salesEmail: "" },
  { id: 2, email: "u2@example.com", phone: "+86 139****5678", company: "B公司", source: "销售推荐", ref: "S003", state: "LEAD_APPROVED", total: 20, remain: 14, expire: "2026-06-21", consume: 70, regTime: "2026-05-20 10:15", salesEmail: "sales@cmi.com" },
  { id: 3, email: "u3@example.com", phone: "+86 137****9012", company: "C公司", source: "自来", ref: "—", state: "VERIFIED", total: 200, remain: 85, expire: "2026-06-28", consume: 42, regTime: "2026-04-18 09:30", salesEmail: "" },
  { id: 4, email: "u4@example.com", phone: "+86 136****3456", company: "D公司", source: "其他", ref: "S005", state: "SUBSCRIBED", total: 200, remain: 120, expire: "2026-07-01", consume: 60, regTime: "2026-03-10 16:00", salesEmail: "zhang@cmi.com" },
  { id: 5, email: "u5@example.com", phone: "+86 135****7890", company: "E公司", source: "展会", ref: "S002", state: "EB_APPROVED", total: 200, remain: 180, expire: "2026-06-25", consume: 10, regTime: "2026-05-25 11:20", salesEmail: "li@cmi.com" },
  { id: 6, email: "u6@example.com", phone: "+86 134****2345", company: "F公司", source: "销售推荐", ref: "—", state: "LEAD_REJECTED", total: 0, remain: 0, expire: "—", consume: 0, regTime: "2026-05-28 08:45", salesEmail: "" },
];

const STATE_META = {
  LEAD_APPLIED:  { label: "审核中", tone: "warning", count: 156 },
  LEAD_APPROVED: { label: "试用中", tone: "info", count: 892 },
  EB_APPROVED:   { label: "EB通过", tone: "info", count: 634 },
  VERIFIED:      { label: "待订购", tone: "info", count: 210 },
  SUBSCRIBED:    { label: "已订购", tone: "success", count: 180 },
  LEAD_REJECTED: { label: "已驳回", tone: "error", count: 12 },
  EB_REJECTED:   { label: "EB驳回", tone: "error", count: 8 },
};

const STATE_ORDER = ["LEAD_APPLIED", "LEAD_APPROVED", "EB_APPROVED", "VERIFIED", "SUBSCRIBED", "LEAD_REJECTED", "EB_REJECTED"];

function StatCard({ state, active, onClick }) {
  const meta = STATE_META[state];
  return (
    <button className={"stat-card" + (active === state ? " stat-card--active" : "")} onClick={() => onClick(state)}>
      <div className={"stat-card-num stat-card-num--" + meta.tone}>{meta.count}</div>
      <div className="stat-card-label">{meta.label}</div>
      <div className="stat-card-key">{state}</div>
    </button>
  );
}

function ProgressBar({ pct }) {
  let tone = "success";
  if (pct <= 20) tone = "error";
  else if (pct <= 50) tone = "warning";
  return (
    <div className="progress-bar">
      <div className={"progress-bar-fill progress-bar-fill--" + tone} style={{ width: pct + "%" }} />
      <span className="progress-bar-text">{pct}%</span>
    </div>
  );
}

// 环状饼图：直径 32px，stroke-dasharray 实现
function RingPieChart({ pct }) {
  const r = 14;
  const c = 2 * Math.PI * r;
  const offset = c - (pct / 100) * c;
  let color = "var(--color-success)";
  if (pct <= 20) color = "var(--color-error)";
  else if (pct <= 50) color = "var(--color-warning)";
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" className="ring-pie">
      <circle cx="16" cy="16" r={r} fill="none" stroke="var(--color-border)" strokeWidth="3" />
      <circle cx="16" cy="16" r={r} fill="none" stroke={color} strokeWidth="3"
        strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
        transform="rotate(-90 16 16)" />
      <text x="16" y="17" textAnchor="middle" dominantBaseline="middle" fontSize="9" fill="var(--color-text-primary)">{pct}%</text>
    </svg>
  );
}

function maskEmail(email) { return email; }

function StateTag({ state }) {
  const meta = STATE_META[state] || { label: state, tone: "neutral" };
  return <span className={"tag tag--" + meta.tone}>{meta.label}</span>;
}

// =====================================================================
// 线索详情 / 审核弹窗 (600px)
// =====================================================================
function LeadDetailModal({ user, onClose, onApprove, onReject }) {
  const [source, setSource] = useState(user.source);
  const [salesEmail, setSalesEmail] = useState(user.salesEmail);
  const [followUp, setFollowUp] = useState("");
  const [records, setRecords] = useState([
    { time: "2026-05-22 15:00", text: "用户提交留资申请，待审核" },
  ]);
  const [error, setError] = useState("");

  const addRecord = () => {
    if (!followUp.trim()) return;
    setRecords([...records, { time: new Date().toLocaleString("zh-CN"), text: followUp }]);
    setFollowUp("");
  };

  const handleApprove = () => {
    if (!salesEmail.trim()) {
      setError("审核通过前必须填写负责跟进的销售邮箱");
      return;
    }
    setError("");
    onApprove({ ...user, source, salesEmail });
  };

  const handleReject = () => {
    if (!window.confirm("确认驳回？驳回后用户仍看到审核中，不可重新提交。")) return;
    onReject(user);
  };

  const isReadOnly = user.state !== "LEAD_APPLIED";

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal--md" onClick={e => e.stopPropagation()} data-screen-label="lead-detail-modal">
        <div className="modal-header">
          <h3 className="modal-title">线索详情</h3>
          <button className="modal-close" onClick={onClose}><Icon.Close size={18} /></button>
        </div>
        <div className="modal-body">
          {/* 只读信息 */}
          <div className="detail-section">
            <div className="detail-row">
              <span className="detail-label">邮箱</span>
              <span className="detail-value">{user.email}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">手机号</span>
              <span className="detail-value">{user.phone}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">企业名</span>
              <span className="detail-value">{user.company}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">注册时间</span>
              <span className="detail-value">{user.regTime}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">当前状态</span>
              <span className="detail-value"><StateTag state={user.state} /></span>
            </div>
          </div>

          {/* 来源标记（可编辑） */}
          <div className="detail-section">
            <label className="detail-field-label">来源标记</label>
            <select className="select" value={source} onChange={e => setSource(e.target.value)} disabled={isReadOnly}>
              <option>展会</option><option>自来</option><option>销售推荐</option><option>其他</option>
            </select>
          </div>

          {/* 跟进销售邮箱 */}
          <div className="detail-section">
            <label className="detail-field-label">
              跟进销售邮箱
              {!isReadOnly && <span className="detail-required">（必填，审核通过前）</span>}
            </label>
            <input
              className="input"
              placeholder="请输入销售邮箱"
              value={salesEmail}
              onChange={e => { setSalesEmail(e.target.value); setError(""); }}
              disabled={isReadOnly}
            />
            {error && <span className="detail-error">{error}</span>}
          </div>

          {/* 跟进记录 */}
          <div className="detail-section">
            <label className="detail-field-label">跟进记录</label>
            <div className="detail-records">
              {records.map((r, i) => (
                <div key={i} className="detail-record">
                  <span className="detail-record-time">{r.time}</span>
                  <span className="detail-record-text">{r.text}</span>
                </div>
              ))}
            </div>
            {!isReadOnly && (
              <div className="detail-record-input">
                <textarea
                  className="textarea"
                  placeholder="记录联系情况和跟进状态"
                  value={followUp}
                  onChange={e => setFollowUp(e.target.value)}
                  rows={2}
                />
                <button className="btn btn--secondary btn--sm" onClick={addRecord}>追加记录</button>
              </div>
            )}
          </div>
        </div>
        <div className="modal-footer">
          {!isReadOnly ? (
            <>
              <button className="btn btn--danger" onClick={handleReject}>驳回</button>
              <div className="modal-footer-spacer" />
              <button className="btn btn--primary" onClick={handleApprove}>审核通过</button>
            </>
          ) : (
            <button className="btn btn--secondary" onClick={onClose}>关闭</button>
          )}
        </div>
      </div>
    </div>
  );
}

// =====================================================================
// 手动跟进提醒弹窗 (480px)
// =====================================================================
function ReminderModal({ user, onClose, onSend }) {
  const [salesEmail, setSalesEmail] = useState(user.salesEmail || "");

  const handleSend = () => {
    if (!salesEmail.trim()) {
      alert("请填写销售邮箱，不填则不发送。");
      return;
    }
    onSend({ userId: user.id, salesEmail });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal--sm" onClick={e => e.stopPropagation()} data-screen-label="trial-reminder-modal">
        <div className="modal-header">
          <h3 className="modal-title">发送跟进提醒</h3>
          <button className="modal-close" onClick={onClose}><Icon.Close size={18} /></button>
        </div>
        <div className="modal-body">
          <div className="detail-section">
            <div className="detail-row">
              <span className="detail-label">用户</span>
              <span className="detail-value">{user.email}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">当前额度</span>
              <span className="detail-value">${user.remain} / ${user.total}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">到期日</span>
              <span className="detail-value">{user.expire}</span>
            </div>
          </div>
          <div className="detail-section">
            <label className="detail-field-label">销售邮箱</label>
            <input
              className="input"
              placeholder="请输入销售邮箱"
              value={salesEmail}
              onChange={e => setSalesEmail(e.target.value)}
            />
            <span className="detail-hint">ℹ️ 默认填入该线索销售邮箱，不填则不发送</span>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn--secondary" onClick={onClose}>取消</button>
          <button className="btn btn--primary" onClick={handleSend}>发送提醒</button>
        </div>
      </div>
    </div>
  );
}

// =====================================================================
// 主页面
// =====================================================================
function CampaignAdmin() {
  const [filterState, setFilterState] = useState("ALL");
  const [keyword, setKeyword] = useState("");
  const [detailUser, setDetailUser] = useState(null);
  const [reminderUser, setReminderUser] = useState(null);
  const [users, setUsers] = useState(MOCK_USERS);
  const [sortField, setSortField] = useState(null);
  const [sortOrder, setSortOrder] = useState("asc"); // "asc" | "desc"

  const handleSort = (field) => {
    if (sortField === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortOrder("asc");
    }
  };

  const sortArrow = (field) => {
    if (sortField !== field) return <span className="sort-arrow sort-arrow--idle">↕</span>;
    return <span className="sort-arrow">{sortOrder === "asc" ? "↑" : "↓"}</span>;
  };

  let filtered = users.filter(u => {
    if (filterState !== "ALL" && u.state !== filterState) return false;
    if (keyword && !u.email.includes(keyword) && !u.company.includes(keyword)) return false;
    return true;
  });

  if (sortField) {
    filtered = [...filtered].sort((a, b) => {
      let av = a[sortField], bv = b[sortField];
      if (sortField === "regTime" || sortField === "expire") {
        av = av === "—" ? "" : av;
        bv = bv === "—" ? "" : bv;
      }
      if (sortField === "consume") {
        av = Number(av) || 0;
        bv = Number(bv) || 0;
      }
      if (av < bv) return sortOrder === "asc" ? -1 : 1;
      if (av > bv) return sortOrder === "asc" ? 1 : -1;
      return 0;
    });
  }

  const total = Object.values(STATE_META).reduce((s, m) => s + m.count, 0);

  const handleApprove = (updatedUser) => {
    setUsers(users.map(u => u.id === updatedUser.id ? { ...u, ...updatedUser, state: "LEAD_APPROVED", total: 20, remain: 20, expire: "2026-07-18" } : u));
    alert(`审核通过！已发放 $20 额度，并发送邮件至 ${updatedUser.salesEmail}`);
    setDetailUser(null);
  };

  const handleReject = (user) => {
    setUsers(users.map(u => u.id === user.id ? { ...u, state: "LEAD_REJECTED" } : u));
    setDetailUser(null);
  };

  const handleSendReminder = ({ userId, salesEmail }) => {
    alert(`跟进提醒已发送至 ${salesEmail}`);
    setReminderUser(null);
  };

  return (
    <div className="proto-root">
      <ProtoNav active="admin-campaign" />
      <div className="app-shell">
        <Sidebar active="campaign-2026" showAdmin={true} />
        <div className="app-main">
          <Topbar crumbs={[{ label: "运营管理", href: "#" }, { label: "2026大模型拉新" }]} state="SUBSCRIBED" balance={200} />
          <main className="app-content" data-screen-label="admin-campaign-2026">
            <div className="admin-page">
              <div className="admin-header" data-region="admin-campaign-header">
                <h1 className="admin-title">2026大模型拉新营销活动管理</h1>
                <p className="admin-sub">运营管理 / 2026大模型拉新</p>
              </div>

              <div className="stat-grid" data-region="admin-campaign-stats">
                {STATE_ORDER.map(s => (
                  <StatCard key={s} state={s} active={filterState} onClick={setFilterState} />
                ))}
                <button className={"stat-card" + (filterState === "ALL" ? " stat-card--active" : "")} onClick={() => setFilterState("ALL")}>
                  <div className="stat-card-num">{total}</div>
                  <div className="stat-card-label">总计</div>
                  <div className="stat-card-key">ALL</div>
                </button>
              </div>

              <div className="filter-bar" data-region="admin-campaign-filter">
                <div className="filter-fields">
                  <div className="filter-field">
                    <label>状态</label>
                    <select className="select select--sm" value={filterState} onChange={e => setFilterState(e.target.value)}>
                      <option value="ALL">全部</option>
                      {STATE_ORDER.map(s => <option key={s} value={s}>{STATE_META[s].label} ({STATE_META[s].count})</option>)}
                    </select>
                  </div>
                  <div className="filter-field">
                    <label>来源</label>
                    <select className="select select--sm"><option>全部</option><option>展会</option><option>自来</option><option>销售推荐</option><option>其他</option></select>
                  </div>
                  <div className="filter-field">
                    <label>时间</label>
                    <select className="select select--sm"><option>最近7天</option><option>最近30天</option><option>本季度</option><option>全部</option></select>
                  </div>
                  <div className="filter-field filter-field--grow">
                    <label>关键词</label>
                    <input className="input input--sm" placeholder="邮箱 / 手机号 / 企业名" value={keyword} onChange={e => setKeyword(e.target.value)} />
                  </div>
                </div>
                <div className="filter-actions">
                  <button className="btn btn--secondary btn--sm">查询</button>
                  <button className="btn btn--text btn--sm">重置</button>
                  <button className="btn btn--primary btn--sm"><Icon.External size={14} /> 导出</button>
                </div>
              </div>

              <div className="table-wrap" data-region="admin-campaign-table">
                <table className="data-table">
                  <thead>
                    <tr>
                      <th className="sortable" onClick={() => handleSort("regTime")}>申请日期 {sortArrow("regTime")}</th>
                      <th>邮箱</th>
                      <th>手机号</th>
                      <th>企业名</th>
                      <th>来源</th>
                      <th>状态</th>
                      <th>总额度</th>
                      <th>剩余</th>
                      <th className="sortable" onClick={() => handleSort("expire")}>到期日 {sortArrow("expire")}</th>
                      <th className="sortable" onClick={() => handleSort("consume")}>消耗 {sortArrow("consume")}</th>
                      <th style={{ width: 200 }}>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.map(u => (
                      <tr key={u.id}>
                        <td>{u.regTime}</td>
                        <td>
                          <button className="btn btn--text btn--sm cell-link" onClick={() => setDetailUser(u)}>
                            {maskEmail(u.email)}
                          </button>
                        </td>
                        <td>
                          <button className="btn btn--text btn--sm cell-link" onClick={() => setDetailUser(u)}>
                            {u.phone}
                          </button>
                        </td>
                        <td>{u.company}</td>
                        <td><span className="tag tag--neutral">{u.source}</span></td>
                        <td><StateTag state={u.state} /></td>
                        <td>${u.total}</td>
                        <td>${u.remain}</td>
                        <td>{u.expire}</td>
                        <td><RingPieChart pct={u.consume} /></td>
                        <td>
                          <div className="action-btns">
                            {u.state === "LEAD_APPLIED" && (
                              <>
                                <button className="btn btn--primary btn--sm" onClick={() => setDetailUser(u)}>通过</button>
                                <button className="btn btn--danger btn--sm" onClick={() => setDetailUser(u)}>驳回</button>
                              </>
                            )}
                            {(u.state === "LEAD_APPROVED" || u.state === "EB_APPROVED") && (
                              <button className="btn btn--secondary btn--sm" onClick={() => setReminderUser(u)}>提醒</button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="pagination" data-region="admin-campaign-pagination">
                <span className="pagination-info">共 {filtered.length} 条</span>
                <div className="pagination-btns">
                  <button className="btn btn--text btn--sm">&lt;</button>
                  <button className="btn btn--text btn--sm pagination-btn--active">1</button>
                  <button className="btn btn--text btn--sm">2</button>
                  <button className="btn btn--text btn--sm">3</button>
                  <span className="pagination-ellipsis">...</span>
                  <button className="btn btn--text btn--sm">10</button>
                  <button className="btn btn--text btn--sm">&gt;</button>
                </div>
              </div>
            </div>
          </main>
          <Footer />
        </div>
      </div>

      {detailUser && (
        <LeadDetailModal
          user={detailUser}
          onClose={() => setDetailUser(null)}
          onApprove={handleApprove}
          onReject={handleReject}
        />
      )}
      {reminderUser && (
        <ReminderModal
          user={reminderUser}
          onClose={() => setReminderUser(null)}
          onSend={handleSendReminder}
        />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CampaignAdmin />);