// First-login company profile onboarding.

function CompanyProfile({ go }) {
  const [profile, setProfile] = React.useState({
    displayName: "",
    roleTitle: "",
    companyName: "",
    companyEnglishName: "",
    city: "",
    country: "China",
    timezone: "Asia/Shanghai",
    primaryCategory: "",
    companyBio: "",
    phone: "",
    website: "",
    employeeCount: "",
    annualRevenueRange: "",
    exportExperience: "",
    targetMarketsText: ""
  });
  const [error, setError] = React.useState("");
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let mounted = true;
    async function load() {
      try {
        const user = await window.GGGApi.getCurrentUser();
        if (!user) {
          go("login");
          return;
        }
        const data = await window.GGGApi.request("/api/company-profile");
        if (!mounted) return;
        if (data.profile) {
          setProfile({
            displayName: data.profile.displayName || user.name || "",
            roleTitle: data.profile.roleTitle || "",
            companyName: data.profile.companyName || user.company_name || "",
            companyEnglishName: data.profile.companyEnglishName || "",
            city: data.profile.city || "",
            country: data.profile.country || user.country || "China",
            timezone: data.profile.timezone || "Asia/Shanghai",
            primaryCategory: data.profile.primaryCategory || "",
            companyBio: data.profile.companyBio || "",
            phone: data.profile.phone || "",
            website: data.profile.website || "",
            employeeCount: data.profile.employeeCount || "",
            annualRevenueRange: data.profile.annualRevenueRange || "",
            exportExperience: data.profile.exportExperience || "",
            targetMarketsText: (data.profile.targetMarkets || []).join(", ")
          });
        } else {
          setProfile((current) => ({ ...current, displayName: user.name || "" }));
        }
      } catch (err) {
        setError(err.message || "公司信息加载失败。");
      } finally {
        if (mounted) setLoading(false);
      }
    }
    load();
    return () => { mounted = false; };
  }, []);

  const update = (key, value) => setProfile((current) => ({ ...current, [key]: value }));
  const submit = async (event) => {
    event.preventDefault();
    setError("");
    const required = ["displayName", "roleTitle", "companyName", "city", "country", "primaryCategory", "companyBio"];
    const missing = required.filter((key) => !String(profile[key] || "").trim());
    if (missing.length) {
      setError("请补全所有必填字段。");
      return;
    }
    try {
      await window.GGGApi.saveCompanyProfile({
        ...profile,
        targetMarkets: profile.targetMarketsText.split(",").map((item) => item.trim()).filter(Boolean)
      });
      go("dashboard");
    } catch (err) {
      setError(err.message || "公司信息保存失败。");
    }
  };

  return (
    <div className="company-onboarding">
      <header className="company-onboarding-head">
        <Brand small />
        <div>
          <span>首次设置</span>
          <b>公司信息详情</b>
        </div>
        <button className="btn btn-ghost btn-sm" type="button" onClick={() => go("login")}>切换账号</button>
      </header>

      <main className="company-onboarding-main">
        <section className="company-onboarding-copy">
          <div className="company-step-pill"><Icon name="shield-check" size={15} /> 已完成邮箱验证</div>
          <h1>用真实企业资料建立出海工作台</h1>
          <p>这些信息会用于企业画像、项目建议、报告上下文和订阅工作区，不会填入任何演示数据。</p>
          <div className="company-proof-grid">
            <div><b>01</b><span>企业身份</span></div>
            <div><b>02</b><span>主营品类</span></div>
            <div><b>03</b><span>出海经验</span></div>
          </div>
        </section>

        <form className="company-profile-form" onSubmit={submit}>
          <div className="form-section-title">
            <h2>{loading ? "正在加载..." : "请补全公司信息"}</h2>
            <p>带 * 的字段为首次进入后台前必填项。</p>
          </div>
          {error && <div className="form-alert"><Icon name="alert" size={15} /> {error}</div>}

          <div className="form-grid-2">
            <CompanyField label="联系人姓名 *" icon="user" value={profile.displayName} onChange={(v) => update("displayName", v)} autoComplete="name" />
            <CompanyField label="职务 *" icon="briefcase" value={profile.roleTitle} onChange={(v) => update("roleTitle", v)} placeholder="例：创始人 / 外贸负责人" />
            <CompanyField label="公司名称 *" icon="office" value={profile.companyName} onChange={(v) => update("companyName", v)} />
            <CompanyField label="公司英文名" icon="globe" value={profile.companyEnglishName} onChange={(v) => update("companyEnglishName", v)} />
            <CompanyField label="所在城市 *" icon="map" value={profile.city} onChange={(v) => update("city", v)} placeholder="例：深圳" />
            <CompanyField label="国家 / 地区 *" icon="globe" value={profile.country} onChange={(v) => update("country", v)} />
            <CompanyField label="主营品类 *" icon="package" value={profile.primaryCategory} onChange={(v) => update("primaryCategory", v)} placeholder="例：成衣、家居用品、电子配件" />
            <CompanyField label="目标市场" icon="map" value={profile.targetMarketsText} onChange={(v) => update("targetMarketsText", v)} placeholder="例：Canada, UAE, Germany" />
            <CompanyField label="联系电话" icon="phone" value={profile.phone} onChange={(v) => update("phone", v)} />
            <CompanyField label="官网" icon="external" value={profile.website} onChange={(v) => update("website", v)} placeholder="https://..." />
            <CompanyField label="员工规模" icon="users" value={profile.employeeCount} onChange={(v) => update("employeeCount", v)} placeholder="例：50-100 人" />
            <CompanyField label="年营收区间" icon="barchart" value={profile.annualRevenueRange} onChange={(v) => update("annualRevenueRange", v)} placeholder="例：1000万-5000万人民币" />
          </div>

          <div className="field">
            <label className="field-label">出海经验</label>
            <select className="select" value={profile.exportExperience} onChange={(e) => update("exportExperience", e.target.value)}>
              <option value="">请选择</option>
              <option value="no_export">尚未出口</option>
              <option value="oem_export">已有 OEM / 外贸订单</option>
              <option value="marketplace">已做跨境电商</option>
              <option value="local_distribution">已有海外经销或本地团队</option>
            </select>
          </div>

          <div className="field">
            <label className="field-label">公司简介 *</label>
            <textarea
              className="textarea"
              value={profile.companyBio}
              onChange={(e) => update("companyBio", e.target.value)}
              placeholder="请简要说明主营产品、生产/供应能力、已有客户或渠道、希望解决的出海问题。"
              required
            />
          </div>

          <div className="company-form-actions">
            <button className="btn btn-primary btn-lg" type="submit" disabled={loading}>
              保存并进入工作台 <Icon name="arrow-right" size={14} />
            </button>
          </div>
        </form>
      </main>
    </div>
  );
}

function CompanyField({ label, icon, value, onChange, placeholder = "", autoComplete = "" }) {
  return (
    <div className="field">
      <label className="field-label">{label}</label>
      <div className="input-group">
        <span className="ico"><Icon name={icon} size={16} /></span>
        <input className="input" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} autoComplete={autoComplete} />
      </div>
    </div>
  );
}

window.CompanyProfile = CompanyProfile;