// WTS Cyprus — TP: New study form
const { useState: useStateTN } = React;

const FUNCTIONAL_PROFILES = [
  'Limited-risk distributor', 'Full-fledged distributor',
  'Contract manufacturer', 'Toll manufacturer',
  'Service provider', 'R&D contractor',
  'Licensor', 'Licensee', 'Other',
];
const NACE_OPTIONS = [
  '46.46 — Wholesale of pharmaceutical goods',
  '46.49 — Wholesale of other household goods',
  '46.69 — Wholesale of other machinery and equipment',
  '46.90 — Non-specialised wholesale trade',
  '62.01 — Computer programming activities',
  '62.02 — Computer consultancy activities',
  '63.11 — Data processing, hosting and related activities',
  '68.20 — Renting and operating of own real estate',
  '68.32 — Management of real estate on a fee or contract basis',
  '70.22 — Business and other management consultancy',
  '71.12 — Engineering activities and related technical consultancy',
  '72.19 — Other research and experimental development on natural sciences',
  '74.90 — Other professional, scientific and technical activities',
];
const COUNTRIES_EU = [
  { code: 'AT', label: 'Austria' },
  { code: 'BE', label: 'Belgium' },
  { code: 'CY', label: 'Cyprus' },
  { code: 'DE', label: 'Germany' },
  { code: 'DK', label: 'Denmark' },
  { code: 'ES', label: 'Spain' },
  { code: 'FI', label: 'Finland' },
  { code: 'FR', label: 'France' },
  { code: 'GR', label: 'Greece' },
  { code: 'IE', label: 'Ireland' },
  { code: 'IT', label: 'Italy' },
  { code: 'NL', label: 'Netherlands' },
  { code: 'PT', label: 'Portugal' },
  { code: 'SE', label: 'Sweden' },
  { code: 'GB', label: 'United Kingdom' },
];

const SectionHeader = ({ number, title, hint }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 14 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 22, height: 22, borderRadius: 6, background: 'hsl(220 14% 96%)',
        border: '1px solid var(--border)', color: 'var(--muted-foreground)',
        fontSize: 11, fontWeight: 600, display: 'inline-grid', placeItems: 'center',
        fontFamily: 'var(--font-mono)',
      }}>{number}</span>
      <h3 style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', margin: 0 }}>{title}</h3>
    </div>
    {hint && <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', lineHeight: 1.55, marginLeft: 32 }}>{hint}</div>}
  </div>
);

const NewStudyForm = ({ onCancel, onRun }) => {
  const toast = useToast();
  const [name, setName]                       = useStateTN('');
  const [linkedEngagement, setLinkedEngagement] = useStateTN('');
  const [profile, setProfile]                 = useStateTN(FUNCTIONAL_PROFILES[0]);
  const [nace, setNace]                       = useStateTN(NACE_OPTIONS[0]);
  const [naceQuery, setNaceQuery]             = useStateTN('');
  const [geo, setGeo]                         = useStateTN(['DE', 'FR', 'IT', 'NL', 'CY']);
  const [currency, setCurrency]               = useStateTN('EUR');
  const [tnMin, setTnMin]                     = useStateTN('5');
  const [tnMax, setTnMax]                     = useStateTN('50');
  const currentYear = 2025;
  const [yearFrom, setYearFrom]               = useStateTN(currentYear - 3);
  const [yearTo, setYearTo]                   = useStateTN(currentYear - 1);
  const [notes, setNotes]                     = useStateTN('');
  const [indReq, setIndReq]                   = useStateTN('lt25');
  const [indCustom, setIndCustom]             = useStateTN('');
  const [activityStrict, setActivityStrict]   = useStateTN('moderate');
  const [geoStrict, setGeoStrict]             = useStateTN('moderate');
  const [customCrit, setCustomCrit]           = useStateTN(['']);
  const [rejLoss, setRejLoss]                 = useStateTN(true);
  const [rejTurnover, setRejTurnover]         = useStateTN(true);
  const [rejNace, setRejNace]                 = useStateTN(true);
  const [rejNaceDigits, setRejNaceDigits]     = useStateTN(3);
  const [rejIndep, setRejIndep]               = useStateTN(true);
  const [customRej, setCustomRej]             = useStateTN(['']);
  const [uploaded, setUploaded]               = useStateTN(false);
  const [previewOpen, setPreviewOpen]         = useStateTN(false);

  const handleUpload = () => {
    setUploaded(true);
    toast.success('File uploaded', '187 rows detected · column mapping complete');
  };

  const yearOpts = [];
  for (let y = currentYear; y >= currentYear - 10; y--) yearOpts.push(y);

  const naceFiltered = naceQuery
    ? NACE_OPTIONS.filter(n => n.toLowerCase().includes(naceQuery.toLowerCase()))
    : NACE_OPTIONS;

  const canRun = name.trim().length > 0 && uploaded;

  const handleRun = () => {
    if (!canRun) return;
    onRun({ name: name.trim(), linkedEngagement, profile, nace, geo, currency, tnMin, tnMax, yearFrom, yearTo });
  };
  const handleSaveDraft = () => {
    toast.success('Saved as draft', 'You can resume this study from the list.');
    setTimeout(onCancel, 600);
  };

  return (
    <div className="wts-newstudy">
      <div style={{ maxWidth: 800, margin: '0 auto', padding: '4px 0 90px' }}>
        <div style={{ marginBottom: 8 }}>
          <button type="button" className="wts-link" style={{ fontSize: 12.5 }} onClick={onCancel}>
            ← Back to studies
          </button>
        </div>
        <h1 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', margin: '6px 0 8px' }}>New study</h1>
        <p style={{ fontSize: 13.5, color: 'var(--muted-foreground)', lineHeight: 1.6, maxWidth: 680 }}>
          Configure the tested party, comparability criteria, and rejection rules. These are persisted with the study
          and recorded against every enrichment run and analyst verdict.
        </p>

        <div className="wts-newstudy__section">
          <SectionHeader number={1} title="Study identity" />
          <div className="wts-form" style={{ maxWidth: 'none' }}>
            <div className="wts-field">
              <Label>Study name <span style={{ color: 'var(--destructive)' }}>*</span></Label>
              <Input placeholder="e.g. Distribution Benchmark FY2025" value={name} onChange={(e) => setName(e.target.value)} />
            </div>
            <div className="wts-field">
              <Label>Linked engagement <span style={{ color: 'var(--muted-foreground)', fontWeight: 400, fontSize: 11.5 }}>(optional)</span></Label>
              <select className="wts-input" value={linkedEngagement} onChange={(e) => setLinkedEngagement(e.target.value)} style={{ appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6'  stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center', backgroundSize: '14px', paddingRight: 32 }}>
                <option value="">None</option>
                {ENGAGEMENTS.map(e => <option key={e.id} value={e.id}>{e.client} — {e.name}</option>)}
              </select>
            </div>
          </div>
        </div>

        <div className="wts-newstudy__section">
          <SectionHeader number={2} title="Tested party profile" hint="Describe the company being benchmarked. These fields anchor comparability and the rejection rules below." />
          <div className="wts-form" style={{ maxWidth: 'none', gap: 16 }}>
            <div className="wts-field">
              <Label>Functional profile <span style={{ color: 'var(--destructive)' }}>*</span></Label>
              <select className="wts-input" value={profile} onChange={(e) => setProfile(e.target.value)} style={{ appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center', backgroundSize: '14px', paddingRight: 32 }}>
                {FUNCTIONAL_PROFILES.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>

            <div className="wts-field">
              <Label>Industry / NACE code <span style={{ color: 'var(--destructive)' }}>*</span></Label>
              <div className="wts-search-wrap" style={{ width: '100%', height: 34 }}>
                <Icon name="search" size={13} style={{ opacity: 0.4 }} />
                <input className="wts-search" placeholder="Search NACE codes…" value={naceQuery || (nace ? nace : '')} onChange={(e) => { setNaceQuery(e.target.value); }} onFocus={() => setNaceQuery('')} />
              </div>
              {naceQuery && naceQuery !== nace && (
                <div className="wts-combobox-list">
                  {naceFiltered.slice(0, 8).map(n => (
                    <button key={n} type="button" className="wts-combobox-item" onClick={() => { setNace(n); setNaceQuery(''); }}>
                      {n}
                    </button>
                  ))}
                  {naceFiltered.length === 0 && <div className="wts-combobox-empty">No matching codes</div>}
                </div>
              )}
            </div>

            <div className="wts-field">
              <Label>Geographic market</Label>
              <div className="wts-multi-chips">
                {geo.map(c => {
                  const country = COUNTRIES_EU.find(x => x.code === c);
                  return (
                    <span key={c} className="wts-chip-assigned">
                      {country?.label || c}
                      <button type="button" className="wts-chip-x" onClick={() => setGeo(xs => xs.filter(x => x !== c))} aria-label="Remove">
                        <Icon name="x" size={11} />
                      </button>
                    </span>
                  );
                })}
                <select
                  className="wts-select"
                  value=""
                  onChange={(e) => { if (e.target.value && !geo.includes(e.target.value)) setGeo(xs => [...xs, e.target.value]); }}
                  style={{ width: 'auto', paddingRight: 20, fontSize: 12.5, color: 'var(--muted-foreground)' }}
                >
                  <option value="">+ Add country</option>
                  {COUNTRIES_EU.filter(c => !geo.includes(c.code)).map(c => <option key={c.code} value={c.code}>{c.label}</option>)}
                </select>
              </div>
            </div>

            <div className="wts-field">
              <Label>Turnover band</Label>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <div className="wts-currency-input">
                  <span className="wts-currency-input__pre">{currency}</span>
                  <input className="wts-currency-input__input" type="number" min="0" value={tnMin} onChange={(e) => setTnMin(e.target.value)} />
                  <span className="wts-currency-input__suf">M</span>
                </div>
                <span style={{ color: 'var(--muted-foreground)', fontSize: 12.5 }}>to</span>
                <div className="wts-currency-input">
                  <span className="wts-currency-input__pre">{currency}</span>
                  <input className="wts-currency-input__input" type="number" min="0" value={tnMax} onChange={(e) => setTnMax(e.target.value)} />
                  <span className="wts-currency-input__suf">M</span>
                </div>
                <select className="wts-input" value={currency} onChange={(e) => setCurrency(e.target.value)} style={{ width: 88, height: 34, paddingRight: 26, appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '12px' }}>
                  <option>EUR</option>
                  <option>USD</option>
                  <option>GBP</option>
                </select>
              </div>
            </div>

            <div className="wts-field">
              <Label>Tested period</Label>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <select className="wts-input" value={yearFrom} onChange={(e) => setYearFrom(+e.target.value)} style={{ width: 100, height: 34, paddingRight: 26, appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '12px' }}>
                  {yearOpts.map(y => <option key={y} value={y}>{y}</option>)}
                </select>
                <span style={{ color: 'var(--muted-foreground)', fontSize: 12.5 }}>through</span>
                <select className="wts-input" value={yearTo} onChange={(e) => setYearTo(+e.target.value)} style={{ width: 100, height: 34, paddingRight: 26, appearance: 'none', backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 8px center', backgroundSize: '12px' }}>
                  {yearOpts.map(y => <option key={y} value={y}>{y}</option>)}
                </select>
              </div>
            </div>

            <div className="wts-field">
              <Label>Free-text notes <span style={{ color: 'var(--muted-foreground)', fontWeight: 400, fontSize: 11.5 }}>(optional)</span></Label>
              <Textarea
                placeholder="Functions, risks, assets, or other nuance not captured above. The AI reads this verbatim when generating descriptions."
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                style={{ minHeight: 96 }}
              />
            </div>
          </div>
        </div>

        <div className="wts-newstudy__section">
          <SectionHeader number={3} title="Comparability criteria" />
          <div className="wts-form" style={{ maxWidth: 'none', gap: 16 }}>
            <div className="wts-field">
              <Label>Independence requirement</Label>
              <div className="wts-radio-group">
                {[
                  { v: 'none',   l: 'Not part of any group' },
                  { v: 'lt25',   l: '<25% group ownership' },
                  { v: 'lt50',   l: '<50% group ownership' },
                  { v: 'custom', l: 'Custom threshold' },
                ].map(opt => (
                  <label key={opt.v} className="wts-radio">
                    <input type="radio" name="indep" value={opt.v} checked={indReq === opt.v} onChange={() => setIndReq(opt.v)} />
                    <span>{opt.l}</span>
                  </label>
                ))}
              </div>
              {indReq === 'custom' && (
                <Input placeholder="e.g. <30% group ownership at any level" value={indCustom} onChange={(e) => setIndCustom(e.target.value)} style={{ marginTop: 8 }} />
              )}
            </div>

            <div className="wts-field">
              <Label>Activity match strictness</Label>
              <Segmented options={[{value:'loose',label:'Loose'},{value:'moderate',label:'Moderate'},{value:'strict',label:'Strict'}]} value={activityStrict} onChange={setActivityStrict} />
            </div>
            <div className="wts-field">
              <Label>Geographic strictness</Label>
              <Segmented options={[{value:'loose',label:'Loose'},{value:'moderate',label:'Moderate'},{value:'strict',label:'Strict'}]} value={geoStrict} onChange={setGeoStrict} />
            </div>

            <div className="wts-field">
              <Label>Custom criteria</Label>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {customCrit.map((c, i) => (
                  <div key={i} style={{ display: 'flex', gap: 6 }}>
                    <Input
                      placeholder="e.g. Must derive >50% revenue from third-party customers"
                      value={c}
                      onChange={(e) => setCustomCrit(xs => xs.map((x, idx) => idx === i ? e.target.value : x))}
                    />
                    {customCrit.length > 1 && (
                      <button type="button" className="wts-icon-btn" onClick={() => setCustomCrit(xs => xs.filter((_, idx) => idx !== i))} aria-label="Remove">
                        <Icon name="x" size={14} />
                      </button>
                    )}
                  </div>
                ))}
                <button type="button" className="wts-link wts-link--button" style={{ alignSelf: 'flex-start', fontSize: 12.5 }} onClick={() => setCustomCrit(xs => [...xs, ''])}>
                  + Add criterion
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="wts-newstudy__section">
          <SectionHeader number={4} title="Rejection rules" hint="Candidates failing any of these rules are flagged for rejection; the analyst confirms each verdict. Rules are recorded per candidate." />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <label className="wts-check">
              <input type="checkbox" checked={rejLoss} onChange={(e) => setRejLoss(e.target.checked)} />
              <span>Reject if loss-making in any year of the tested period</span>
            </label>
            <label className="wts-check">
              <input type="checkbox" checked={rejTurnover} onChange={(e) => setRejTurnover(e.target.checked)} />
              <span>Reject if turnover outside the band declared above</span>
            </label>
            <label className="wts-check">
              <input type="checkbox" checked={rejNace} onChange={(e) => setRejNace(e.target.checked)} />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                Reject if NACE code mismatch beyond
                <input
                  type="number" min="1" max="6"
                  value={rejNaceDigits}
                  onChange={(e) => setRejNaceDigits(+e.target.value)}
                  className="wts-input"
                  style={{ width: 52, height: 26, padding: '0 8px', fontSize: 12.5 }}
                />
                digits
              </span>
            </label>
            <label className="wts-check">
              <input type="checkbox" checked={rejIndep} onChange={(e) => setRejIndep(e.target.checked)} />
              <span>Reject if not independent per the threshold above</span>
            </label>
          </div>
          <div className="wts-field" style={{ marginTop: 14 }}>
            <Label>Custom rejection rules</Label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {customRej.map((c, i) => (
                <div key={i} style={{ display: 'flex', gap: 6 }}>
                  <Input
                    placeholder="e.g. Reject if year-on-year revenue growth exceeds 200%"
                    value={c}
                    onChange={(e) => setCustomRej(xs => xs.map((x, idx) => idx === i ? e.target.value : x))}
                  />
                  {customRej.length > 1 && (
                    <button type="button" className="wts-icon-btn" onClick={() => setCustomRej(xs => xs.filter((_, idx) => idx !== i))}>
                      <Icon name="x" size={14} />
                    </button>
                  )}
                </div>
              ))}
              <button type="button" className="wts-link wts-link--button" style={{ alignSelf: 'flex-start', fontSize: 12.5 }} onClick={() => setCustomRej(xs => [...xs, ''])}>
                + Add rule
              </button>
            </div>
          </div>
        </div>

        <div className="wts-newstudy__section">
          <SectionHeader number={5} title="Candidate upload" />
          {!uploaded ? (
            <button type="button" className="wts-dropzone" onClick={handleUpload}>
              <Icon name="upload-cloud" size={28} style={{ opacity: 0.5 }} />
              <div style={{ fontSize: 14, fontWeight: 500, marginTop: 10 }}>Drop your TP Catalyst export here</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>or <span style={{ color: 'hsl(213 80% 42%)', textDecoration: 'underline' }}>click to browse</span> · .xlsx Raw Data sheet · up to 50MB</div>
            </button>
          ) : (
            <>
              <div className="wts-upload-success">
                <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'hsl(142 50% 92%)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name="check" size={15} style={{ opacity: 0.75 }} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>File uploaded — <span style={{ fontFamily: 'var(--font-mono)' }}>Aegean_Comparables_Q2_2025.xlsx</span></div>
                  <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>187 rows detected · column mapping complete</div>
                </div>
                <button type="button" className="wts-link" style={{ fontSize: 12 }} onClick={() => setUploaded(false)}>Replace</button>
              </div>

              <div style={{ marginTop: 14 }}>
                <div className="wts-panel__section-label" style={{ marginBottom: 8 }}>Column mapping</div>
                <div className="wts-colmap">
                  {[
                    { src: 'Company name',          dst: 'company_name',          ok: true },
                    { src: 'Country',                dst: 'country',                ok: true },
                    { src: 'NACE Rev. 2',            dst: 'nace_code',              ok: true },
                    { src: 'Operating revenue (€)',  dst: 'turnover',               ok: true },
                    { src: 'Business description',   dst: 'business_description',   ok: true },
                    { src: 'Independence indicator', dst: 'independent',            ok: true },
                    { src: 'Loss-making flag',       dst: 'loss_making',            ok: false, warn: 'Column not detected — fallback rule will apply (computed from 4-year net income)' },
                  ].map((m, i) => (
                    <div key={i} className={cn('wts-colmap__row', !m.ok && 'wts-colmap__row--warn')}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon name={m.ok ? 'check-circle-2' : 'alert-triangle'} size={14} style={{ opacity: 0.7, color: m.ok ? 'hsl(142 55% 30%)' : 'hsl(38 90% 40%)' }} />
                        <span style={{ fontSize: 13, fontWeight: 500 }}>{m.src}</span>
                        <Icon name="arrow-right" size={11} style={{ opacity: 0.35 }} />
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted-foreground)' }}>{m.dst}</span>
                      </div>
                      {m.warn && <div style={{ fontSize: 11.5, color: 'hsl(38 90% 35%)', marginTop: 4, marginLeft: 22 }}>{m.warn}</div>}
                    </div>
                  ))}
                </div>
              </div>

              <button type="button" className="wts-link wts-link--button" style={{ marginTop: 12, fontSize: 12.5 }} onClick={() => setPreviewOpen(o => !o)}>
                <Icon name={previewOpen ? 'chevron-down' : 'chevron-right'} size={12} style={{ verticalAlign: '-2px' }} />
                {' '}Preview first 5 rows
              </button>
              {previewOpen && (
                <div style={{ marginTop: 8, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
                  <table className="ck-table" style={{ fontSize: 12 }}>
                    <thead><tr>
                      <th>Company</th><th>Country</th><th>NACE</th><th style={{ textAlign: 'right' }}>Turnover</th>
                    </tr></thead>
                    <tbody>
                      {CANDIDATES.slice(0, 5).map(c => (
                        <tr key={c.id}>
                          <td>{c.companyName}</td>
                          <td>{c.countryFlag} {c.country}</td>
                          <td className="ck-mono" style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>{c.naceCode}</td>
                          <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{formatEUR(c.turnover)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </>
          )}
        </div>
      </div>

      <div className="wts-newstudy__footer">
        <div style={{ maxWidth: 800, margin: '0 auto', padding: '12px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button type="button" className="wts-link" style={{ fontSize: 13 }} onClick={onCancel}>Cancel</button>
          <div style={{ flex: 1 }} />
          <Button variant="outline" onClick={handleSaveDraft}>Save as draft</Button>
          <Button onClick={handleRun} disabled={!canRun}>
            <Icon name="play" size={13} /> Run study
          </Button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NewStudyForm });