// drive-page.jsx — Google Drive інтеграція

function DrivePage({ role }) {
  const objects = window.DATA.OBJECTS;
  const [connected, setConnected] = React.useState(true); // demo
  const [openId, setOpenId] = React.useState(null);

  const stats = {
    objects: objects.length,
    files: 1247,
    folders: objects.length * 6,
    storage: "12.4 GB",
    limit: "100 GB",
  };

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Google Drive</h1>
        <div className="page-sub">
          <span>сховище проєктної документації</span>
          <span className="dot"></span>
          <span>підключено акаунт <b style={{color: "var(--ink)"}}>files@ukrbudproiekt.ua</b></span>
        </div>
      </div>

      {/* Стан інтеграції */}
      <div className="drive-status">
        <div className="drive-status-icon"><window.Ico name="folder" /></div>
        <div style={{flex: 1}}>
          <div style={{fontSize: 14, fontWeight: 600, color: "var(--ink)"}}>Інтеграція активна</div>
          <div style={{fontSize: 12.5, color: "var(--ink-3)", marginTop: 2}}>
            Остання синхронізація · сьогодні о 14:32 · OAuth 2.0
          </div>
        </div>
        <span className="status-tag tone-live">синхронізовано</span>
        <button className="btn">Налаштування</button>
      </div>

      {/* KPI */}
      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Файлів у Drive</div>
          <div className="kpi-value">{stats.files}</div>
          <div className="kpi-sub">PDF · DWG · DOCX · фото</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Папок об'єктів</div>
          <div className="kpi-value">{stats.objects}</div>
          <div className="kpi-sub">по 6 підпапок кожна</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Зайнято</div>
          <div className="kpi-value">{stats.storage}</div>
          <div className="kpi-sub">з {stats.limit} ліміту · 12%</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Останнє оновлення</div>
          <div className="kpi-value" style={{fontSize: 16}}>14:32</div>
          <div className="kpi-sub">авто-синхронізація кожні 5 хв</div>
        </div>
      </div>

      <div className="hint-box">
        <b>Як працює:</b> на кожен об'єкт автоматично створюється папка з шифром у Google Drive
        (наприклад <code>[УКП-2025-47] ЖК Подільський</code>) з підпапками: 01-Договір, 02-Вхідні дані,
        03-Проєкт, 04-Кошторис, 05-Експертиза, 06-Фотофіксація.
        Завантаження документів зі сторінки об'єкта потрапляє безпосередньо в Drive.
      </div>

      {/* Папки об'єктів */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Папки об'єктів</h2>
          <span className="section-sub">{objects.length} активних</span>
        </div>
        <div className="drive-folders">
          {objects.map(o => (
            <DriveFolderCard key={o.id} obj={o} onOpen={() => setOpenId(o.id)} />
          ))}
        </div>
      </section>

      {/* Папки проєктів ГО */}
      {(window.DATA.PROJECTS || []).length > 0 && (
        <section className="section">
          <div className="section-head">
            <h2 className="section-h2">Папки проєктів ГО</h2>
            <span className="section-sub">{window.DATA.PROJECTS.length} проєктів</span>
          </div>
          <div className="drive-folders">
            {window.DATA.PROJECTS.map(p => (
              <ProjectDriveCard key={p.id} project={p} />
            ))}
          </div>
        </section>
      )}

      {openId && <DriveFolderModal obj={objects.find(o => o.id === openId)} onClose={() => setOpenId(null)} />}
    </div>
  );
}

function DriveFolderCard({ obj, onOpen }) {
  // Симульована статистика
  const fileCount = 240 + (obj.id.charCodeAt(0) % 60);
  const sizeMb = 1800 + (obj.id.charCodeAt(0) % 800);

  return (
    <div className="drive-folder-card" onClick={onOpen}>
      <div className="drive-folder-icon"><window.Ico name="folder" /></div>
      <div style={{flex: 1, minWidth: 0}}>
        <div className="td-mono" style={{fontSize: 11, color: "var(--ink-3)"}}>[{obj.code}]</div>
        <div className="cell-name" style={{fontSize: 13.5}}>{obj.name}</div>
        <div style={{display: "flex", gap: 10, fontSize: 11.5, color: "var(--ink-3)", marginTop: 6}}>
          <span>{fileCount} файлів</span>
          <span>·</span>
          <span>{(sizeMb / 1024).toFixed(1)} GB</span>
        </div>
      </div>
      <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}} onClick={(e) => { e.stopPropagation(); window.open("https://drive.google.com", "_blank"); }}>
        Drive ↗
      </button>
    </div>
  );
}

function DriveFolderModal({ obj, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const subfolders = [
    { name: "01-Договір", files: 4, size: "12 MB", icon: "📄" },
    { name: "02-Вхідні дані", files: 18, size: "245 MB", icon: "📥" },
    { name: "03-Проєкт", files: 142, size: "1.2 GB", icon: "📐" },
    { name: "04-Кошторис", files: 8, size: "34 MB", icon: "💰" },
    { name: "05-Експертиза", files: 12, size: "186 MB", icon: "📋" },
    { name: "06-Фотофіксація", files: 86, size: "412 MB", icon: "📷" },
  ];

  const recentFiles = [
    { name: "КЖ_Розділ-3_фундаменти_v4.pdf", type: "pdf", folder: "03-Проєкт", size: "8.4 MB", changed: "Сьогодні 14:32", by: "Петренко А." },
    { name: "Фасади_варіанти_v2.dwg", type: "dwg", folder: "03-Проєкт", size: "24 MB", changed: "Вчора 18:15", by: "Мельник Т." },
    { name: "Кошторис_АВК-5_травень.docx", type: "doc", folder: "04-Кошторис", size: "1.2 MB", changed: "Вчора 11:42", by: "Кравченко О." },
    { name: "Виїзд_25.05_фото.zip", type: "zip", folder: "06-Фотофіксація", size: "186 MB", changed: "25.05 17:30", by: "Кравченко О." },
    { name: "Технічне_завдання_замовник.pdf", type: "pdf", folder: "02-Вхідні дані", size: "3.4 MB", changed: "20.05 09:00", by: "Гриценко О." },
  ];

  const fileIcon = (t) => ({ pdf: "file", dwg: "ruler", doc: "file", zip: "package", img: "image" })[t] || "file";

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal">
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div style={{fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 8}}><window.Ico name="folder" /> [{obj.code}] {obj.name}</div>
          <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
            <button className="btn">Завантажити файл</button>
            <button className="btn btn-primary">Відкрити у Drive ↗</button>
          </div>
        </div>

        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          {/* Підпапки */}
          <section className="section">
            <div className="section-head">
              <h2 className="section-h2">Структура папок</h2>
              <span className="section-sub">6 підпапок</span>
            </div>
            <div className="subfolder-grid">
              {subfolders.map(sf => (
                <div key={sf.name} className="subfolder-card">
                  <div className="subfolder-icon"><window.Ico e={sf.icon} /></div>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div className="cell-name" style={{fontSize: 13}}>{sf.name}</div>
                    <div style={{fontSize: 11, color: "var(--ink-3)", marginTop: 2}}>{sf.files} файлів · {sf.size}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Останні файли */}
          <section className="section">
            <div className="section-head">
              <h2 className="section-h2">Останні зміни</h2>
              <span className="section-sub">{recentFiles.length} файлів</span>
            </div>
            <table className="data-table compact-table">
              <thead>
                <tr>
                  <th>Файл</th>
                  <th>Папка</th>
                  <th>Розмір</th>
                  <th>Автор</th>
                  <th>Змінено</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {recentFiles.map((f, i) => (
                  <tr key={i} className="is-clickable">
                    <td>
                      <div style={{display: "flex", alignItems: "center", gap: 10}}>
                        <span style={{fontSize: 18, color: "var(--accent)"}}><window.Ico name={fileIcon(f.type)} /></span>
                        <span className="cell-name" style={{fontSize: 13}}>{f.name}</span>
                      </div>
                    </td>
                    <td style={{fontSize: 12, color: "var(--ink-3)"}}>{f.folder}</td>
                    <td className="num-col" style={{fontSize: 12}}>{f.size}</td>
                    <td style={{fontSize: 12.5}}>{f.by}</td>
                    <td style={{fontSize: 12, color: "var(--ink-3)"}}>{f.changed}</td>
                    <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити ↗</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </section>
        </div>
      </div>
    </>
  );
}

function ProjectDriveCard({ project }) {
  const p = project;
  const partner = window.getNgoPartner(p.partner);
  const docCount = (p.docs || []).length;
  return (
    <div className="drive-folder-card" onClick={() => window.open("https://drive.google.com", "_blank")}>
      <div className="drive-folder-icon"><window.Ico name="folder" /></div>
      <div style={{flex: 1, minWidth: 0}}>
        <div className="td-mono" style={{fontSize: 11, color: "var(--ink-3)"}}>[{p.code}]</div>
        <div className="cell-name" style={{fontSize: 13.5}}>{p.name}</div>
        <div style={{display: "flex", gap: 10, fontSize: 11.5, color: "var(--ink-3)", marginTop: 6}}>
          <span>{partner?.short}</span>
          <span>·</span>
          <span>{docCount} {window.plural(docCount, "документ", "документи", "документів")}</span>
        </div>
      </div>
      <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}} onClick={(e) => { e.stopPropagation(); window.open("https://drive.google.com", "_blank"); }}>
        Drive ↗
      </button>
    </div>
  );
}

window.DrivePage = DrivePage;