/* Source upload screen — drag-drop + metadata form.
   Reached from FreshDashboard "Add source" CTA or sources page "+ Upload". */

const SourceUpload = ({ onCancel, onUploaded }) => {
  const [sourceType, setSourceType] = React.useState("file");
  const [file, setFile] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(false);
  const [name, setName] = React.useState("");
  const [tags, setTags] = React.useState(["guidelines", "cardiology"]);
  const [description, setDescription] = React.useState("");
  const [scopes, setScopes] = React.useState({ clinical: true, drug: false, billing: false });
  const [url, setUrl] = React.useState("");
  const [text, setText] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [progress, setProgress] = React.useState(0);

  // Simulated drop
  const handleDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    const f = e.dataTransfer.files?.[0];
    if (f) {
      setFile({ name: f.name, size: (f.size / 1024 / 1024).toFixed(2) + " MB", type: f.type });
      if (!name) setName(f.name.replace(/\.[^.]+$/, ""));
    } else {
      // Simulated drop for the demo
      mockFile();
    }
  };
  const mockFile = () => {
    setFile({ name: "AHA-ACC-HeartFailure-Guidelines-2024.pdf", size: "8.4 MB", type: "application/pdf", pages: 178 });
    if (!name) setName("AHA/ACC Heart Failure Guidelines 2024");
  };

  const canSubmit = (sourceType === "file" && file) ||
                    (sourceType === "url" && url) ||
                    (sourceType === "text" && text);

  const submit = () => {
    setSubmitting(true);
    let p = 0;
    const tick = setInterval(() => {
      p += 8 + Math.random() * 14;
      setProgress(Math.min(100, p));
      if (p >= 100) {
        clearInterval(tick);
        setTimeout(() => onUploaded(), 400);
      }
    }, 180);
  };

  if (submitting) {
    return (
      <div className="upload-progress">
        <header className="page-header" style={{ marginBottom: "var(--space-7)" }}>
          <div className="page-header__inner">
            <div className="page-header__eyebrow">Sources / Upload</div>
            <h1><em style={{ fontStyle: "italic" }}>Indexing</em> {file?.name || "your source"}</h1>
            <p className="page-header__sub">Chunking, embedding, and signing — the source becomes queryable when this completes.</p>
          </div>
        </header>

        <div className="card card--padded" style={{ maxWidth: 720 }}>
          <div className="indexing-stages">
            <IndexStage label="Upload" done={progress > 10} active={progress <= 10} />
            <IndexStage label="Parse · chunk" done={progress > 40} active={progress > 10 && progress <= 40} />
            <IndexStage label="Embed" done={progress > 75} active={progress > 40 && progress <= 75} />
            <IndexStage label="Sign · publish" done={progress >= 100} active={progress > 75 && progress < 100} />
          </div>
          <div style={{ marginTop: 20 }}>
            <div className="progress">
              <div className="progress__bar" style={{ width: `${progress}%` }} />
            </div>
            <div className="row" style={{ justifyContent: "space-between", marginTop: 8, fontSize: 12, color: "var(--ink-3)" }}>
              <span className="mono">{Math.round(progress)}% · {file?.pages ? `${Math.round((progress / 100) * file.pages)} of ${file.pages} pages` : "processing"}</span>
              <span>ETA {Math.max(1, Math.round((100 - progress) / 6))}s</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <>
      <header className="page-header">
        <div className="page-header__inner">
          <div className="page-header__eyebrow">
            <a href="#" onClick={(e) => { e.preventDefault(); onCancel(); }} style={{ color: "inherit" }}>Sources</a> / Upload
          </div>
          <h1>Add a source</h1>
          <p className="page-header__sub">
            A source is a trusted document Attestia uses to verify every claim your AI makes. Most tenants ingest 5–25 sources — guidelines, drug labels, internal protocols.
          </p>
        </div>
      </header>

      <div className="upload-grid">
        <div className="card card--padded upload-main">
          <Field label="Source type">
            <div className="segmented" style={{ width: "fit-content" }}>
              <button className={sourceType === "file" ? "active" : ""} onClick={() => setSourceType("file")}>File upload</button>
              <button className={sourceType === "url" ? "active" : ""} onClick={() => setSourceType("url")}>URL ingest</button>
              <button className={sourceType === "text" ? "active" : ""} onClick={() => setSourceType("text")}>Plain text</button>
            </div>
          </Field>

          {sourceType === "file" && !file && (
            <div
              className={`dropzone ${dragOver ? "dropzone--over" : ""}`}
              onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={handleDrop}
              onClick={mockFile}
            >
              <div className="dropzone__icon">{window.Icon.upload({ size: 22 })}</div>
              <div className="dropzone__title">Drop a file here or click to browse</div>
              <div className="dropzone__sub">PDF, DOCX, Markdown, TXT · up to 100 MB per file</div>
              <div className="dropzone__hint">Supported: medical guidelines · drug labels · regulatory texts · internal protocols</div>
            </div>
          )}

          {sourceType === "file" && file && (
            <div className="file-preview">
              <div className="file-preview__icon">{window.Icon.fileText({ size: 18 })}</div>
              <div className="file-preview__body">
                <div className="fw-600 text-md">{file.name}</div>
                <div className="text-xs muted" style={{ marginTop: 2 }}>
                  {file.type?.includes("pdf") ? "PDF" : "Document"} · {file.size}{file.pages ? ` · ${file.pages} pages` : ""}
                </div>
              </div>
              <Button variant="ghost" size="sm" onClick={() => setFile(null)}>
                {window.Icon.x({ size: 12 })} Remove
              </Button>
            </div>
          )}

          {sourceType === "url" && (
            <Field label="URL" hint="We'll fetch and snapshot the page. Subsequent indexing uses the snapshot — the live URL can change without breaking your audit chain.">
              <input className="input" placeholder="https://www.ahajournals.org/doi/10.1161/CIR.0000000000001216" value={url} onChange={(e) => setUrl(e.target.value)} />
            </Field>
          )}

          {sourceType === "text" && (
            <Field label="Source text" hint="Paste authoritative text — clinical SOPs, internal policy excerpts, regulatory passages. ≤ 200 KB.">
              <textarea className="textarea" rows="8" placeholder="Paste source text…" value={text} onChange={(e) => setText(e.target.value)} />
            </Field>
          )}

          <div className="hr" />

          <div className="grid-2">
            <Field label="Display name" required hint="Visible to your team and shown to auditors.">
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="AHA/ACC Heart Failure Guidelines 2024" />
            </Field>
            <Field label="Source version" hint="Optional. Lets you maintain multiple versions of the same source.">
              <input className="input mono" placeholder="v2.1 (2024)" />
            </Field>
          </div>

          <Field label="Tags" hint="Used for filtering and routing. Click to remove, type to add.">
            <div className="tag-input">
              {tags.map((t) => (
                <span key={t} className="tag-input__chip">
                  {t}
                  <button onClick={() => setTags(tags.filter((x) => x !== t))}>{window.Icon.x({ size: 10 })}</button>
                </span>
              ))}
              <input placeholder={tags.length ? "" : "Add tag…"} className="tag-input__input"
                onKeyDown={(e) => {
                  if (e.key === "Enter" && e.target.value.trim()) {
                    setTags([...tags, e.target.value.trim()]);
                    e.target.value = "";
                  }
                }} />
            </div>
          </Field>

          <Field label="Authoritative for" hint="Restricts which claim types verify against this source.">
            <div className="auth-scopes">
              <AuthScope label="Clinical claims" sub="Symptoms, diagnoses, treatments" checked={scopes.clinical} onChange={(v) => setScopes({ ...scopes, clinical: v })} />
              <AuthScope label="Drug · dosing" sub="Medication, interactions, contraindications" checked={scopes.drug} onChange={(v) => setScopes({ ...scopes, drug: v })} />
              <AuthScope label="Billing · coding" sub="ICD-10, CPT, claim codes" checked={scopes.billing} onChange={(v) => setScopes({ ...scopes, billing: v })} />
            </div>
          </Field>

          <Field label="Description" hint="Optional context for your team.">
            <textarea className="textarea" rows="3" placeholder="ACC/AHA Guideline for the Management of Heart Failure — 2024 update. Authoritative for cardiology claims." value={description} onChange={(e) => setDescription(e.target.value)} />
          </Field>
        </div>

        <aside className="upload-side">
          <div className="card card--padded">
            <div className="upload-side__eyebrow">What happens next</div>
            <h3 className="upload-side__title">From upload to queryable in ~30s.</h3>
            <ol className="upload-side__list">
              <li><strong>Parse · chunk.</strong> Document is split into ~500-token chunks with span anchors preserved.</li>
              <li><strong>Embed.</strong> Each chunk is embedded into a tenant-private vector index.</li>
              <li><strong>Sign.</strong> A content hash is computed and signed Ed25519, then added to today's bulletin.</li>
              <li><strong>Live.</strong> Future claims can be verified against this source the moment indexing completes.</li>
            </ol>
            <div className="hr" />
            <div className="upload-side__rows">
              <div className="upload-side__row">
                <span className="muted">PHI redaction</span>
                <Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Auto</Badge>
              </div>
              <div className="upload-side__row">
                <span className="muted">Encryption at rest</span>
                <span className="mono text-xs">AES-256-GCM</span>
              </div>
              <div className="upload-side__row">
                <span className="muted">Residency</span>
                <span>US-East (BAA)</span>
              </div>
            </div>
          </div>
        </aside>
      </div>

      <div className="upload-foot">
        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
        <div className="spacer" />
        <span className="text-xs muted">Sources are tenant-private. Auditors only see them if you include them in an evidence pack.</span>
        <Button variant="primary" disabled={!canSubmit || !name} onClick={submit} icon={window.Icon.upload({ size: 13 })}>
          Upload and index
        </Button>
      </div>
    </>
  );
};

const IndexStage = ({ label, done, active }) => (
  <div className={`index-stage ${done ? "index-stage--done" : ""} ${active ? "index-stage--active" : ""}`}>
    <div className="index-stage__icon">
      {done ? window.Icon.checkSimple({ size: 11 }) : active ? <span className="pulse-dot" /> : null}
    </div>
    <div className="index-stage__label">{label}</div>
  </div>
);

const AuthScope = ({ label, sub, checked, onChange }) => (
  <label className={`auth-scope ${checked ? "auth-scope--checked" : ""}`}>
    <span className="auth-scope__check">
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="auth-scope__box">{checked && window.Icon.checkSimple({ size: 11 })}</span>
    </span>
    <span className="auth-scope__body">
      <span className="auth-scope__label">{label}</span>
      <span className="auth-scope__sub">{sub}</span>
    </span>
  </label>
);

window.SourceUpload = SourceUpload;