// upload.jsx — empty-state CSV drop screen

function UploadScreen({ onLoaded, onDemo }) {
  const [over, setOver] = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);

  function handleFile(file) {
    setError(null);
    if (!file) return;
    const name = file.name.toLowerCase();
    if (!name.endsWith('.csv') && !name.endsWith('.txt')) {
      setError('הקובץ חייב להיות בפורמט CSV');
      return;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const parsed = window.parsePowerCSV(e.target.result);
        if (!parsed.intervals.length) {
          setError('לא נמצאו רשומות צריכה בקובץ. בדוק שמדובר בדוח 15 דקות של חברת חשמל.');
          return;
        }
        onLoaded(parsed, file.name);
      } catch (err) {
        console.error(err);
        setError('שגיאה בקריאת הקובץ: ' + err.message);
      }
    };
    reader.onerror = () => setError('לא הצלחנו לקרוא את הקובץ');
    reader.readAsText(file, 'UTF-8');
  }

  function onDrop(e) {
    e.preventDefault();
    setOver(false);
    const file = e.dataTransfer.files && e.dataTransfer.files[0];
    handleFile(file);
  }

  return (
    <div className="upload-shell">
      <div className="upload-card">
        <div className="upload-glyph" aria-hidden="true">
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
            <path d="M13 2L4.5 13.5h6L11 22l8.5-11.5h-6L13 2z" fill="currentColor"/>
          </svg>
        </div>
        <h1 className="upload-title">דוח צריכת החשמל שלך</h1>
        <p className="upload-sub">
          העלה את קובץ ה-CSV של חברת החשמל ונציג לך לוח בקרה מלא — היסטוריית צריכה, פילוח שעות יום ולילה, ושיאי שימוש.
        </p>

        <div
          className={'dropzone' + (over ? ' over' : '')}
          onDragOver={(e) => { e.preventDefault(); setOver(true); }}
          onDragLeave={() => setOver(false)}
          onDrop={onDrop}
          onClick={() => inputRef.current && inputRef.current.click()}
        >
          <div className="dropzone-msg">
            גרור לכאן את <strong>קובץ ה-CSV</strong> שלך, או —
          </div>
          <button type="button" className="upload-btn" onClick={(e) => { e.stopPropagation(); inputRef.current && inputRef.current.click(); }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            בחר קובץ
          </button>
          <input
            ref={inputRef}
            type="file"
            accept=".csv,.txt,text/csv"
            style={{ display: 'none' }}
            onChange={(e) => handleFile(e.target.files && e.target.files[0])}
          />
        </div>

        {error && <div className="upload-error">{error}</div>}

        <div className="upload-features">
          <div>
            <strong>פרטיות מלאה</strong>
            קובץ נתוני החשמל שלך נשאר במכשיר — הוא לא נשלח לשום שרת ולא נשמר בשום מקום.
          </div>
          <div>
            <strong>ניתוח חכם</strong>
            פילוח אוטומטי לתעריף יום ולילה ושיאי צריכה.
          </div>
          <div>
            <strong>פירוט מלא</strong>
            מנתחים נקודות צריכה בכל 15 דקות, עד שנתיים אחורה.
          </div>
        </div>

        <p className="upload-foot">
          איפה אני מוריד את הקובץ? באזור האישי בחברת החשמל ← כל הפעולות ← מחשבוני צריכה ← לנתוני הצריכה שלך ← מצב צריכה עדכני ← לפי תקופה ← שליחת קובץ אקסל למייל.
          <br />
          רוצה לראות איך זה נראה? <button className="upload-foot-link" onClick={onDemo} style={{background:'none', border:0, color:'var(--accent-ink)', fontWeight:600, cursor:'pointer', fontFamily:'inherit', fontSize:'inherit', textDecoration:'underline'}}>טען נתוני דמו</button>
        </p>
      </div>
    </div>
  );
}

window.UploadScreen = UploadScreen;