/* global React, Icon */
const { useState, useRef } = React;

function TopBar({ stage, onReset, fileMeta }) {
  const bars = [10, 14, 8, 16, 12, 18, 11, 14];
  return (
    <div className="topbar">
      <div className="brand" onClick={onReset} style={{cursor: "pointer"}}>
        <div className="brand-mark">
          {bars.map((h, i) => <span key={i} style={{height: `${h}px`}}/>)}
        </div>
        <div className="brand-name">Auralis</div>
      </div>
      <div className="topbar-actions">
        {stage === "dashboard" && (
          <button className="btn ghost" style={{padding: "8px 14px", fontSize: 12.5}} onClick={onReset}>
            <Icon.upload size={13}/> New analysis
          </button>
        )}
        <div className="user-chip">
          <div className="av">N</div>
          <span contentEditable suppressContentEditableWarning>naveen@auralis.io</span>
        </div>
      </div>
    </div>
  );
}

function UploadStage({ onAnalyze }) {
  const [drag, setDrag] = useState(false);
  const inputRef = useRef(null);
  const handleSelect = (file) => {
    if (!file) return;
    onAnalyze(file);
  };
  const heights = [22, 38, 58, 44, 78, 92, 70, 50, 88, 64, 40, 26, 54, 74, 86, 60, 32, 50, 72, 40, 88, 54, 30];
  return (
    <div className="upload-stage">
      <div className="upload-left">
        <div className="upload-eyebrow">
          <span className="ln"></span>
          <span>The phone rings.</span>
        </div>
        <h1 className="upload-h1">
          Every <em>11 seconds</em>,<br/>
          someone hangs up<br/>
          poorer.
        </h1>
        <p className="upload-sub">
          Auralis listens to the call you almost trusted — and tells you, in seconds, whether the voice on the other end was here to help or here to take.
        </p>

        <div className="pain-strip">
          <div className="pain-stat">
            <div className="num"><em>$12.5B</em></div>
            <div className="label">lost to phone scams in the US last year</div>
            <div className="src">FTC · 2024 Consumer Sentinel</div>
          </div>
          <div className="pain-stat">
            <div className="num">68<em>%</em></div>
            <div className="label">of victims never recover the money</div>
            <div className="src">AARP fraud study</div>
          </div>
          <div className="pain-stat">
            <div className="num">1 in 4</div>
            <div className="label">elderly Americans was targeted in 2024</div>
            <div className="src">FBI IC3 report</div>
          </div>
        </div>
      </div>

      <div className="upload-right">
        <div
          className={`dropzone ${drag ? "drag" : ""}`}
          onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
          onDragLeave={() => setDrag(false)}
          onDrop={(e) => { e.preventDefault(); setDrag(false); handleSelect(e.dataTransfer.files[0]); }}
        >
          <div className="wave-bg"></div>
          <div className="dz-wave">
            {heights.map((h, i) => (
              <span key={i} style={{
                height: `${h}%`,
                animationDelay: `${i * 0.08}s`,
              }} />
            ))}
          </div>
          <div className="dz-title">Drop a recording. Hear the truth.</div>
          <div className="dz-hint">
            <b>MP3 · WAV · M4A · FLAC</b> — up to 25 MB, mono or stereo
          </div>
          <div className="cta-row" style={{justifyContent: 'center'}}>
            <button className="btn primary" onClick={() => inputRef.current?.click()}>
              <Icon.upload size={16} style={{marginRight: 8}}/>
              Select Audio Recording
            </button>
            <input ref={inputRef} type="file" accept="audio/*" hidden onChange={(e) => handleSelect(e.target.files[0])} />
          </div>
        </div>
        <div className="upload-foot">
          <span>· end-to-end encrypted ·</span>
          <span>· audio purged after analysis ·</span>
        </div>
      </div>
    </div>
  );
}

window.TopBar = TopBar;
window.UploadStage = UploadStage;