// OrchestAI — page: New Analysis
const { useState: useState_NA } = React;

function PageNewAnalysis({ t, onRun, auth }) {
  const [form, setForm] = useState_NA({
    name: "", sector: "agri", country: "AR", currency: "USD", mandate: "buyside",
    methods: ["dcf", "multiples"], research: ""
  });
  const [files, setFiles] = useState_NA([]);
  const [dragOver, setDragOver] = useState_NA(false);
  const [saving, setSaving] = useState_NA(false);

  const toggleMethod = (k) => setForm(f => ({
    ...f, methods: f.methods.includes(k) ? f.methods.filter(x => x !== k) : [...f.methods, k]
  }));

  const templates = [
    { id: "pe",   title: t("template_pe_buyout"),      sub: "DCF · LBO · Múltiplos · DDQ",   icon: Icon.bolt,    methods: ["dcf","lbo","multiples","ddq"] },
    { id: "tech", title: t("template_tech_seriesB"),   sub: "Venture · Múltiplos",            icon: Icon.sparkle, methods: ["venture","multiples"] },
    { id: "fair", title: t("template_fairness"),        sub: "DCF · Múltiplos · Precedentes",  icon: Icon.check,   methods: ["dcf","multiples","precedents"] },
    { id: "rest", title: t("template_restructuring"),   sub: "NAV · LBO · Riesgo AR",          icon: Icon.chart,   methods: ["nav","lbo","risk_ar"] }
  ];

  const methodKeys = ["dcf","multiples","precedents","lbo","nav","venture","montecarlo","risk_ar","ddq"];

  const onDrop = (e) => {
    e.preventDefault(); setDragOver(false);
    const list = Array.from(e.dataTransfer?.files || e.target?.files || []);
    const news = list.map(f => {
      const ext = (f.name.split(".").pop() || "").toLowerCase();
      const normalized = ["pdf","xlsx","docx","pptx","csv"].includes(ext) ? ext : (ext.match(/mp3|m4a|wav/) ? "audio" : ext);
      return { name: f.name, ext: normalized, size: (f.size / 1e6).toFixed(1) + " MB", progress: 0 };
    });
    setFiles(prev => [...prev, ...news]);
    news.forEach((f) => {
      let p = 0;
      const id = setInterval(() => {
        p += 15 + Math.random() * 20;
        setFiles(prev => prev.map(x => x.name === f.name ? { ...x, progress: Math.min(100, Math.round(p)) } : x));
        if (p >= 100) clearInterval(id);
      }, 180);
    });
  };

  const handleRun = () => {
    if (!form.name.trim()) return;
    setSaving(true);
    const project = window.DB.addProject({ ...form, docs: files.length });
    // Save docs to DB
    files.forEach(f => window.DB.addDoc({ name: f.name, size: f.size, ext: f.ext, cat: "financials" }));
    setTimeout(() => { setSaving(false); onRun(project.id); }, 400);
  };

  const handleDraft = () => {
    if (!form.name.trim()) return;
    window.DB.addProject({ ...form, docs: files.length });
    alert("Borrador guardado.");
  };

  return (
    <div>
      <div className="page-header">
        <h1>{t("new_title")}</h1>
        <p>{t("new_sub")}</p>
      </div>

      <div className="hero-grid">
        <div className="oai-col">
          <Card>
            <div className="oai-row" style={{ marginBottom: 16 }}>
              <h3 style={{ flex: 1 }}>{t("co_name")} · {t("mandate")}</h3>
              <Pill tone="lime" icon={Icon.ai}>{t("pill_ai")}</Pill>
            </div>

            <div className="oai-grid" style={{ gridTemplateColumns: "2fr 1fr" }}>
              <Field label={t("co_name")}>
                <Input placeholder={t("co_placeholder")} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
              </Field>
              <Field label={t("sector")}>
                <Select value={form.sector} onChange={e => setForm({ ...form, sector: e.target.value })}>
                  {Object.entries(t("sectors")).map(([k,v]) => <option key={k} value={k}>{v}</option>)}
                </Select>
              </Field>
            </div>

            <div className="oai-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 12 }}>
              <Field label={t("country")}>
                <Select value={form.country} onChange={e => setForm({ ...form, country: e.target.value })}>
                  <option value="AR">Argentina</option>
                  <option value="BR">Brasil</option>
                  <option value="UY">Uruguay</option>
                  <option value="CL">Chile</option>
                  <option value="MX">México</option>
                  <option value="US">United States</option>
                  <option value="ES">España</option>
                  <option value="PE">Perú</option>
                  <option value="CO">Colombia</option>
                </Select>
              </Field>
              <Field label={t("currency")}>
                <Select value={form.currency} onChange={e => setForm({ ...form, currency: e.target.value })}>
                  <option value="USD">USD</option>
                  <option value="ARS">ARS</option>
                  <option value="EUR">EUR</option>
                  <option value="BRL">BRL</option>
                  <option value="UYU">UYU</option>
                </Select>
              </Field>
              <Field label={t("mandate")}>
                <Select value={form.mandate} onChange={e => setForm({ ...form, mandate: e.target.value })}>
                  {Object.entries(t("mandates")).map(([k,v]) => <option key={k} value={k}>{v}</option>)}
                </Select>
              </Field>
            </div>

            <hr className="oai-hr" />

            <div>
              <div className="oai-row" style={{ marginBottom: 10 }}>
                <h4 style={{ flex: 1 }}>{t("method")}</h4>
                <span className="muted" style={{ fontSize: 12 }}>{form.methods.length} {t("methods_selected")}</span>
              </div>
              <div className="method-grid">
                {methodKeys.map(k => (
                  <div key={k} className={classNames("method-chip", form.methods.includes(k) && "is-on")} onClick={() => toggleMethod(k)}>
                    <Icon.check className="method-chip__check" />
                    <span>{t("methods." + k)}</span>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          <Card>
            <div className="oai-row" style={{ marginBottom: 12 }}>
              <div style={{ flex: 1 }}>
                <h3>{t("research_title")}</h3>
                <p style={{ fontSize: 12.5, marginTop: 2 }}>{t("research_sub")}</p>
              </div>
              <Pill tone="cobalt" icon={Icon.globe}>{t("plan_act_observe")}</Pill>
            </div>
            <Textarea
              placeholder={t("research_query_ph")}
              value={form.research}
              onChange={e => setForm({ ...form, research: e.target.value })}
            />
            <div className="oai-row" style={{ marginTop: 10, gap: 6, flexWrap: "wrap" }}>
              <span className="muted" style={{ fontSize: 11.5, marginRight: 4 }}>Tools:</span>
              {["search","scrape","crawl","extract","interact","bashExec"].map(k => <Pill key={k}>{k}</Pill>)}
            </div>
          </Card>
        </div>

        <div className="oai-col">
          <Card>
            <h3>{t("upload_title")}</h3>
            <p style={{ fontSize: 12.5, marginTop: 2, marginBottom: 14 }}>{t("upload_types")}</p>

            <div
              className={classNames("dropzone", dragOver && "is-over")}
              onDragOver={e => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={onDrop}
              onClick={() => document.getElementById("oai-file-input")?.click()}
            >
              <Icon.upload className="dropzone__icon" />
              <div style={{ fontWeight: 600, fontSize: 14 }}>{t("upload_drop")}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{t("upload_types")}</div>
              <input
                id="oai-file-input" type="file" multiple style={{ display: "none" }}
                onChange={e => onDrop({ dataTransfer: { files: e.target.files } })}
              />
              <div className="sources-row">
                <span className="muted" style={{ fontSize: 11, alignSelf: "center", marginRight: 4 }}>{t("upload_sources")}:</span>
                <div className="source-chip" onClick={e => e.stopPropagation()}><Icon.folder className="oai-btn__icon"/>{t("source_local")}</div>
                <div className="source-chip" onClick={e => e.stopPropagation()}>Drive</div>
                <div className="source-chip" onClick={e => e.stopPropagation()}>OneDrive</div>
                <div className="source-chip" onClick={e => e.stopPropagation()}>Notion</div>
                <div className="source-chip" onClick={e => e.stopPropagation()}><Icon.globe className="oai-btn__icon"/>URL</div>
              </div>
            </div>

            {files.length > 0 && (
              <div style={{ marginTop: 14, maxHeight: 240, overflowY: "auto" }}>
                {files.map((f, i) => (
                  <div key={i} className="file-row">
                    <div className="file-row__ext" data-ext={f.ext}>{f.ext === "audio" ? "♪" : f.ext}</div>
                    <div className="grow" style={{ minWidth: 0 }}>
                      <div className="file-row__name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.name}</div>
                      <div className="file-row__meta">{f.size}</div>
                    </div>
                    {f.progress < 100
                      ? <div className="file-row__progress"><div style={{ width: f.progress + "%" }}/></div>
                      : <Pill tone="lime" icon={Icon.check}>OK</Pill>
                    }
                  </div>
                ))}
              </div>
            )}
          </Card>

          <Card>
            <h3>{t("quick_start")}</h3>
            <div className="quick-templates">
              {templates.map(tpl => (
                <div key={tpl.id} className="tpl-card" onClick={() => setForm(f => ({ ...f, methods: tpl.methods }))}>
                  <div className="tpl-card__icon">{React.createElement(tpl.icon, { style: { width: 16, height: 16 } })}</div>
                  <div>
                    <div className="tpl-card__title">{tpl.title}</div>
                    <div className="tpl-card__sub">{tpl.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <div className="oai-row" style={{ justifyContent: "flex-end" }}>
            <Button kind="outline" onClick={handleDraft}>{t("save_draft")}</Button>
            <Button
              kind="accent" size="lg" icon={Icon.bolt}
              onClick={handleRun}
              disabled={!form.name.trim() || saving}
            >
              {saving ? t("saving") : t("run_analysis")}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PageNewAnalysis = PageNewAnalysis;