/* eslint-disable */
/* timing-projects.jsx — панель «Проекты»: список сохранённых таймингов с открытием,
   созданием, переименованием и удалением. Работает через window.TimingAuth.api
   (с прозрачным офлайн-фолбэком на localStorage в превью). */

(function () {
  const R = window.React;
  const { useState, useEffect } = R;
  const A = window.TimingAuth;

  function fmtDate(iso) {
    if (!iso) return '—';
    try {
      const d = new Date(iso);
      const date = d.toLocaleDateString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric' });
      const time = d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
      return date + ', ' + time;
    } catch (e) { return '—'; }
  }

  function ProjectsPanel({ onClose, onOpen, onNew, currentId }) {
    const [list, setList] = useState(null);
    const [renaming, setRenaming] = useState(null);
    const [renameVal, setRenameVal] = useState('');
    const [confirmDel, setConfirmDel] = useState(null);
    const [working, setWorking] = useState(false);

    async function refresh() { const l = await A.api.list(); setList(Array.isArray(l) ? l : []); }
    useEffect(() => { refresh(); }, []);

    async function doOpen(p) {
      setWorking(true);
      const full = await A.api.get(p.id);
      setWorking(false);
      if (full && full.data) onOpen(full);
      else alert('Не удалось загрузить проект');
    }
    async function doRename(p) {
      const t = (renameVal || '').trim();
      setRenaming(null);
      if (!t || t === p.title) return;
      await A.api.update(p.id, { title: t });
      refresh();
    }
    async function doDelete(p) {
      await A.api.del(p.id);
      setConfirmDel(null);
      refresh();
    }

    const iconBtn = (danger) => ({
      width: 30, height: 30, borderRadius: 'var(--radius-input)', border: '1px solid var(--color-line-subtle)',
      background: 'var(--color-surface)', color: danger ? 'var(--color-danger-700)' : 'var(--color-ink-500)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
    });

    return ReactDOM.createPortal(
      <div className="print-overlay" style={{ alignItems: 'center', justifyContent: 'center' }} onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
        <div style={{ width: 560, maxWidth: '92vw', maxHeight: '82vh', display: 'flex', flexDirection: 'column', background: 'var(--color-elevated)', border: '1px solid var(--color-line-subtle)', borderRadius: 'var(--radius-modal)', boxShadow: 'var(--shadow-modal)', overflow: 'hidden' }}>
          {/* header */}
          <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 10, padding: '16px 18px', borderBottom: '1px solid var(--color-line-subtle)' }}>
            <Icon name="folder" size={17} color="var(--color-ink-700)" />
            <span style={{ flex: 1, fontSize: 15, fontWeight: 600, color: 'var(--color-ink-900)' }}>Проекты</span>
            <Button variant="primary" size="sm" leftIcon="plus" onClick={onNew}>Новый проект</Button>
            <button onClick={onClose} title="Закрыть" style={iconBtn(false)}><Icon name="x" size={15} /></button>
          </div>

          {/* list */}
          <div style={{ flex: '1 1 auto', overflowY: 'auto', padding: 8, minHeight: 120 }}>
            {list === null && (
              <div style={{ padding: '40px 0', display: 'flex', justifyContent: 'center' }}>
                <span className="tm-spin" style={{ width: 20, height: 20, border: '2.5px solid var(--color-line-strong)', borderTopColor: 'var(--color-accent-500)', borderRadius: '50%' }} />
              </div>
            )}
            {list && list.length === 0 && (
              <div style={{ padding: '40px 24px', textAlign: 'center', color: 'var(--color-ink-400)', fontSize: 13, lineHeight: 1.6 }}>
                Сохранённых проектов пока нет.<br />Нажмите «Новый проект» или сохраните текущий тайминг.
              </div>
            )}
            {list && list.map(p => {
              const isCurrent = p.id === currentId;
              const isRenaming = renaming === p.id;
              return (
                <div key={p.id} className="tm-proj-row" style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px', borderRadius: 'var(--radius-card)',
                  border: '1px solid ' + (isCurrent ? 'var(--color-accent-500)' : 'transparent'),
                  background: isCurrent ? 'var(--color-muted-50)' : 'transparent',
                }}>
                  <div style={{ flex: '0 0 auto', width: 34, height: 34, borderRadius: 8, background: 'var(--color-muted-50)', color: 'var(--color-ink-500)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="fileText" size={16} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    {isRenaming ? (
                      <input
                        value={renameVal} autoFocus
                        onChange={e => setRenameVal(e.target.value)}
                        onKeyDown={e => { if (e.key === 'Enter') doRename(p); if (e.key === 'Escape') setRenaming(null); }}
                        onBlur={() => doRename(p)}
                        style={{ width: '100%', border: '1px solid var(--color-line-strong)', background: 'var(--color-surface)', borderRadius: 5, padding: '4px 7px', fontSize: 13.5, fontWeight: 600, color: 'var(--color-ink-900)', outline: 'none' }}
                      />
                    ) : (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                        <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--color-ink-900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.title || 'Без названия'}</span>
                        {isCurrent && <span style={{ flex: '0 0 auto', fontSize: 10, fontWeight: 600, letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--color-accent-700)', background: 'var(--color-surface)', border: '1px solid var(--color-line-subtle)', borderRadius: 'var(--radius-pill)', padding: '1px 7px' }}>открыт</span>}
                      </div>
                    )}
                    <div style={{ fontSize: 11.5, color: 'var(--color-ink-400)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                      {(p.owner_email || '—') + ' · ' + fmtDate(p.updated_at)}
                    </div>
                  </div>
                  <div className="tm-proj-actions" style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Button variant="secondary" size="sm" onClick={() => doOpen(p)} disabled={working}>Открыть</Button>
                    <button title="Переименовать" onClick={() => { setRenaming(p.id); setRenameVal(p.title || ''); }} style={iconBtn(false)}><Icon name="edit" size={14} /></button>
                    <button title="Удалить" onClick={() => setConfirmDel(p)} style={iconBtn(true)}><Icon name="trash" size={14} /></button>
                  </div>
                </div>
              );
            })}
          </div>

          {A.api.offlineMode && (
            <div style={{ flex: '0 0 auto', padding: '8px 14px', borderTop: '1px solid var(--color-line-subtle)', fontSize: 11, color: 'var(--color-ink-400)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="database" size={12} /> Локальный режим: проекты хранятся в этом браузере (нет связи с сервером).
            </div>
          )}
        </div>

        {/* delete confirm */}
        {confirmDel && (
          <div className="print-overlay" style={{ alignItems: 'center', justifyContent: 'center', background: 'rgba(20,18,14,.4)', zIndex: 70 }} onMouseDown={e => { if (e.target === e.currentTarget) setConfirmDel(null); }}>
            <div style={{ background: 'var(--color-elevated)', borderRadius: 'var(--radius-modal)', boxShadow: 'var(--shadow-modal)', padding: 22, width: 360, maxWidth: '90vw' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <Icon name="alertCircle" size={16} color="var(--color-danger-700)" />
                <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-ink-900)' }}>Удалить проект?</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--color-ink-500)', lineHeight: 1.5, marginBottom: 18 }}>
                «{confirmDel.title || 'Без названия'}» будет удалён без возможности восстановления.
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
                <Button variant="secondary" onClick={() => setConfirmDel(null)}>Отмена</Button>
                <Button variant="danger" leftIcon="trash" onClick={() => doDelete(confirmDel)}>Удалить</Button>
              </div>
            </div>
          </div>
        )}
      </div>,
      document.body
    );
  }

  window.TimingProjects = { ProjectsPanel };
})();