/* global React */

/* ============================================
   EAReportUploader — admin-only drop zone
   ============================================ */
function EAReportUploader({ ea, onChange }) {
  const [dragOver, setDragOver] = React.useState(false);
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const fileRef = React.useRef(null);

  async function handleFile(file) {
    setError(''); setLoading(true);
    try {
      const r = await window.MT5Parser.parseFile(file);
      const m = { fileName: file.name, fileSize: file.size, uploadedAt: new Date().toISOString() };
      window.EAReports.saveEAReport(ea.id, r, m);
      onChange?.();
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }

  function loadSample() {
    setError('');
    const r = window.MT5Parser.generateSample();
    const m = { fileName: `sample_${ea.id}.html`, fileSize: 24832, uploadedAt: new Date().toISOString(), sample: true };
    window.EAReports.saveEAReport(ea.id, r, m);
    onChange?.();
  }

  function clear() {
    window.EAReports.clearEAReport(ea.id);
    onChange?.();
  }

  const stored = window.EAReports.getEAReport(ea.id);

  return (
    <div className="panel" style={{ padding: 20, background: 'rgba(255,45,170,0.04)', borderColor: 'rgba(255,45,170,0.3)' }}>
      <div className="flex-between mb-3">
        <div>
          <span className="eyebrow" style={{ color: 'var(--magenta)' }}>ADMIN · BACKTEST UPLOAD</span>
          <h4 className="mt-2" style={{ fontSize: 16 }}>Backtest for <span className="text-cyan">{ea.name}</span></h4>
        </div>
        {stored && <button className="btn btn-ghost btn-sm" onClick={clear}>↻ Remove</button>}
      </div>

      {stored ? (
        <div className="font-mono text-sm" style={{ background: 'rgba(0,0,0,0.4)', padding: 12, borderRadius: 6 }}>
          <div className="flex-between mb-2">
            <span className="text-muted">File</span>
            <span className="text-cyan">{stored.meta.fileName}</span>
          </div>
          <div className="flex-between mb-2">
            <span className="text-muted">Trades</span>
            <span className="text-green">{stored.report.dealCount?.toLocaleString() || '—'}</span>
          </div>
          <div className="flex-between mb-2">
            <span className="text-muted">Net profit</span>
            <span className={stored.report.totalProfit >= 0 ? 'text-green' : 'text-red'}>
              {stored.report.totalProfit >= 0 ? '+' : ''}${stored.report.totalProfit?.toFixed(2)}
            </span>
          </div>
          <div className="flex-between">
            <span className="text-muted">Uploaded</span>
            <span className="text-muted">{new Date(stored.meta.uploadedAt).toLocaleString()}</span>
          </div>
        </div>
      ) : (
        <>
          <div
            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={(e) => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]); }}
            onClick={() => fileRef.current?.click()}
            style={{
              padding: '24px 16px', textAlign: 'center', cursor: 'pointer',
              border: `1px dashed ${dragOver ? 'var(--cyan)' : 'var(--line-strong)'}`,
              borderRadius: 8,
              background: dragOver ? 'rgba(0,229,255,0.04)' : 'rgba(0,0,0,0.3)',
              transition: 'all 0.2s',
            }}>
            <input ref={fileRef} type="file" accept=".html,.htm,.xlsx,.xls,.csv" style={{ display: 'none' }} onChange={(e) => e.target.files[0] && handleFile(e.target.files[0])}/>
            <div style={{ fontSize: 32, color: 'var(--cyan)', lineHeight: 1 }}>↗</div>
            <div className="mt-2 text-sm" style={{ fontWeight: 600 }}>{dragOver ? 'Release to upload' : 'Drop MT5 .xlsx / .html / .csv'}</div>
            <div className="text-xs text-muted mt-1">Strategy Tester or History export</div>
            {loading && <div className="mt-3 flex-center gap-2"><span className="typing"><span/><span/><span/></span><span className="font-mono text-xs text-cyan">PARSING...</span></div>}
            {error && <div className="text-red text-xs mt-3 font-mono">⚠ {error}</div>}
          </div>
          <button className="btn btn-ghost btn-sm btn-block mt-3" onClick={loadSample}>↗ Use sample data instead</button>
        </>
      )}
    </div>
  );
}

window.EAReportUploader = EAReportUploader;