// folder-modal.jsx — Add / Edit folder rule modal
// Exposes: window.FolderModal

const { useState, useEffect, useRef } = React;

function useFolderDetail(folderId) {
  const [state, setState] = useState({ status: 'idle', data: null, error: null });
  const ref = useRef(0);
  useEffect(() => {
    if (!folderId || folderId.length < 4) {
      setState({ status: 'idle', data: null, error: null });
      return;
    }
    const tag = ++ref.current;
    setState({ status: 'loading', data: null, error: null });
    const t = setTimeout(() => {
      window.driveAPI
        .getFolderDetail(folderId)
        .then((d) => { if (tag === ref.current) setState({ status: 'ok', data: d, error: null }); })
        .catch((e) => { if (tag === ref.current) setState({ status: 'error', data: null, error: e.message }); });
    }, 250);
    return () => clearTimeout(t);
  }, [folderId]);
  return state;
}

function FolderModal({ initial, onSave, onClose }) {
  const isEdit = Boolean(initial?.id);
  const [folderId, setFolderId] = useState(initial?.folderId ?? '');
  const [ageValue, setAgeValue] = useState(initial?.ageValue ?? 30);
  const [ageUnit, setAgeUnit] = useState(initial?.ageUnit ?? 'days');
  const [recursive, setRecursive] = useState(initial?.recursive ?? false);
  const [mode, setMode] = useState(initial?.mode ?? 'trash');
  const [trigger, setTrigger] = useState(initial?.trigger ?? 'manual');
  const [triggerTime, setTriggerTime] = useState(initial?.triggerTime ?? '03:00');
  const [triggerDay, setTriggerDay] = useState(initial?.triggerDay ?? 1);
  const [mimeFilter, setMimeFilter] = useState(initial?.mimeFilter ?? []);
  const [dryRun, setDryRun] = useState(initial?.dryRun ?? false);
  const [perRunCap, setPerRunCap] = useState(initial?.perRunCap ?? 500);

  const detail = useFolderDetail(folderId);

  const canSave =
    detail.status === 'ok' &&
    ageValue > 0 &&
    (trigger !== 'monthly' || (triggerDay >= 1 && triggerDay <= 28));

  function save() {
    if (!canSave) return;
    onSave({
      id: initial?.id ?? 'rule_' + Math.random().toString(36).slice(2, 9),
      folderId,
      folderName: detail.data.name,
      folderPath: detail.data.path,
      ageValue: Number(ageValue),
      ageUnit,
      recursive,
      mode,
      trigger,
      triggerTime,
      triggerDay,
      mimeFilter,
      dryRun,
      perRunCap: Number(perRunCap),
      lastRunAt: initial?.lastRunAt ?? null,
      lastRunSummary: initial?.lastRunSummary ?? null,
      previewedAt: initial?.previewedAt ?? null,
    });
  }

  const fileTypes = [
    { label: 'Images',    mimes: ['image/'] },
    { label: 'Videos',    mimes: ['video/'] },
    { label: 'Documents', mimes: ['pdf','word','document'] },
    { label: 'Archives',  mimes: ['zip','octet-stream'] },
    { label: 'Logs/tmp',  mimes: ['log','octet-stream','text/plain'] },
  ];

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <header>
          <h2>{isEdit ? 'Edit folder rule' : 'Add folder to clean'}</h2>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>✕</button>
        </header>
        <div className="body">

          <label className="field">
            <span className="lbl">Folder ID</span>
            <input
              className="input mono"
              value={folderId}
              onChange={(e) => setFolderId(e.target.value.trim())}
              placeholder="paste the ID from the Drive folder URL"
              autoFocus
            />
            <span className="help">
              In Drive, open the folder — the ID is the segment after <code>/folders/</code>.
              In mock mode, try one of: {window.driveAPI.listAllFolders().slice(1, 4).map((f, i) => (
                <React.Fragment key={f.id}>
                  {i > 0 && ', '}
                  <a href="#" onClick={(e) => { e.preventDefault(); setFolderId(f.id); }}>{f.name}</a>
                </React.Fragment>
              ))}
            </span>

            {detail.status === 'loading' && <div className="fd-loading">Looking up folder…</div>}
            {detail.status === 'error' && <div className="fd-error">⚠ {detail.error}</div>}
            {detail.status === 'ok' && (
              <div className="fd-card">
                <div className="fd-name">{detail.data.name}</div>
                <div className="fd-path">{detail.data.path}</div>
                <div className="fd-stats">
                  <div className="stat">
                    <div className="k">Direct files</div>
                    <div className="v">{detail.data.directFileCount}</div>
                  </div>
                  <div className="stat">
                    <div className="k">Subfolders</div>
                    <div className="v">{detail.data.subfolderCount}</div>
                  </div>
                  <div className="stat">
                    <div className="k">Direct size</div>
                    <div className="v">{formatBytes(detail.data.directSize)}</div>
                  </div>
                </div>
              </div>
            )}
          </label>

          <div className="grid-2">
            <label className="field">
              <span className="lbl">Delete files older than</span>
              <div style={{ display: 'flex', gap: 8 }}>
                <input
                  className="input"
                  type="number"
                  min="1"
                  value={ageValue}
                  onChange={(e) => setAgeValue(e.target.value)}
                  style={{ flex: '0 0 90px' }}
                />
                <select
                  className="select"
                  value={ageUnit}
                  onChange={(e) => setAgeUnit(e.target.value)}
                >
                  <option value="days">days</option>
                  <option value="weeks">weeks</option>
                  <option value="months">months</option>
                  <option value="years">years</option>
                </select>
              </div>
            </label>

            <label className="field">
              <span className="lbl">Per-run cap</span>
              <input
                className="input"
                type="number"
                min="1"
                value={perRunCap}
                onChange={(e) => setPerRunCap(e.target.value)}
              />
              <span className="help">Halt if more files match than this</span>
            </label>
          </div>

          <label className="field">
            <span className="lbl">Subfolders</span>
            <label className="toggle">
              <input
                type="checkbox"
                checked={recursive}
                onChange={(e) => setRecursive(e.target.checked)}
              />
              <span className="track"></span>
              <span>Recurse into subfolders</span>
            </label>
          </label>

          <label className="field">
            <span className="lbl">File types</span>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {fileTypes.map((ft) => {
                const active = mimeFilter.length > 0 &&
                  ft.mimes.every((m) => mimeFilter.includes(m));
                return (
                  <button
                    key={ft.label}
                    type="button"
                    className={'chip ' + (active ? 'chip-accent' : '')}
                    style={{ cursor: 'pointer', border: 'none', padding: '4px 10px', fontSize: 12 }}
                    onClick={() => {
                      if (active) {
                        setMimeFilter(mimeFilter.filter((m) => !ft.mimes.includes(m)));
                      } else {
                        setMimeFilter([...new Set([...mimeFilter, ...ft.mimes])]);
                      }
                    }}
                  >
                    {ft.label}
                  </button>
                );
              })}
              {mimeFilter.length > 0 && (
                <button
                  type="button"
                  className="chip"
                  style={{ cursor: 'pointer', border: 'none', padding: '4px 10px', fontSize: 12 }}
                  onClick={() => setMimeFilter([])}
                >
                  Clear
                </button>
              )}
            </div>
            <span className="help">Leave empty to include all types</span>
          </label>

          <label className="field">
            <span className="lbl">Deletion mode</span>
            <div className="radio-row">
              <label className={mode === 'trash' ? 'active' : ''}>
                <input type="radio" checked={mode === 'trash'} onChange={() => setMode('trash')} />
                Move to Trash
              </label>
              <label className={mode === 'permanent' ? 'active' : ''}>
                <input type="radio" checked={mode === 'permanent'} onChange={() => setMode('permanent')} />
                Permanently delete
              </label>
            </div>
            {mode === 'permanent' && (
              <div className="danger-callout">
                ⚠ Permanent deletion skips Trash. Files cannot be recovered. Strongly recommend keeping the default.
              </div>
            )}
          </label>

          <label className="field">
            <span className="lbl">Trigger</span>
            <div className="radio-row">
              <label className={trigger === 'manual' ? 'active' : ''}>
                <input type="radio" checked={trigger === 'manual'} onChange={() => setTrigger('manual')} />
                Manual
              </label>
              <label className={trigger === 'daily' ? 'active' : ''}>
                <input type="radio" checked={trigger === 'daily'} onChange={() => setTrigger('daily')} />
                Daily
              </label>
              <label className={trigger === 'monthly' ? 'active' : ''}>
                <input type="radio" checked={trigger === 'monthly'} onChange={() => setTrigger('monthly')} />
                Monthly
              </label>
            </div>
            {trigger === 'daily' && (
              <div style={{ marginTop: 10 }}>
                <span className="help" style={{ marginTop: 0, marginBottom: 4 }}>Time of day</span>
                <input
                  className="input mono"
                  type="time"
                  value={triggerTime}
                  onChange={(e) => setTriggerTime(e.target.value)}
                  style={{ width: 140 }}
                />
              </div>
            )}
            {trigger === 'monthly' && (
              <div style={{ marginTop: 10, display: 'flex', gap: 10, alignItems: 'flex-end' }}>
                <div>
                  <div className="help" style={{ marginTop: 0, marginBottom: 4 }}>Day of month</div>
                  <input
                    className="input mono"
                    type="number"
                    min="1"
                    max="28"
                    value={triggerDay}
                    onChange={(e) => setTriggerDay(Number(e.target.value))}
                    style={{ width: 90 }}
                  />
                </div>
                <div>
                  <div className="help" style={{ marginTop: 0, marginBottom: 4 }}>Time</div>
                  <input
                    className="input mono"
                    type="time"
                    value={triggerTime}
                    onChange={(e) => setTriggerTime(e.target.value)}
                    style={{ width: 140 }}
                  />
                </div>
              </div>
            )}
          </label>

          <label className="field" style={{ marginBottom: 0 }}>
            <span className="lbl">Dry run</span>
            <label className="toggle">
              <input
                type="checkbox"
                checked={dryRun}
                onChange={(e) => setDryRun(e.target.checked)}
              />
              <span className="track"></span>
              <span>Log only — don't actually delete</span>
            </label>
          </label>
        </div>
        <footer>
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" disabled={!canSave} onClick={save}>
            {isEdit ? 'Save changes' : 'Add folder'}
          </button>
        </footer>
      </div>
    </div>
  );
}

function formatBytes(n) {
  if (n < 1024) return n + ' B';
  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
  if (n < 1024 * 1024 * 1024) return (n / 1024 / 1024).toFixed(1) + ' MB';
  return (n / 1024 / 1024 / 1024).toFixed(2) + ' GB';
}

Object.assign(window, { FolderModal, formatBytes });