// Shared admin Drive. Project files and the private Documents area stay separate.
const DRIVE_BUCKET = 'admin-drive';

function isDriveImage(file) {
  return (file.mime_type || '').startsWith('image/');
}

function DriveFolderIcon() {
  return (
    <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <path d="M5 13a4 4 0 0 1 4-4h11l4 5h15a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V13Z"
        fill="currentColor" opacity=".22" />
      <path d="M5 13a4 4 0 0 1 4-4h11l4 5h15a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V13Z"
        stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
      <path d="M5 20h38" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
}

function DriveFileIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 2h9l5 5v15H5V2Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M14 2v5h5M8 12h8M8 16h8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function AdminDrive({ session }) {
  const [folders, setFolders] = React.useState([]);
  const [files, setFiles] = React.useState([]);
  const [activeFolderId, setActiveFolderId] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [creating, setCreating] = React.useState(false);
  const [newName, setNewName] = React.useState('');
  const [newCover, setNewCover] = React.useState(null);
  const [renaming, setRenaming] = React.useState(false);
  const [renameDraft, setRenameDraft] = React.useState('');
  const [choosingCover, setChoosingCover] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);
  const [uploadProgress, setUploadProgress] = React.useState(null);
  const [previewId, setPreviewId] = React.useState(null);
  const fileInput = React.useRef(null);
  const coverInput = React.useRef(null);

  const reload = React.useCallback(async () => {
    const [folderResult, fileResult] = await Promise.all([
      sb.from('drive_folders').select('*').order('name', { ascending: true }),
      sb.from('drive_files').select('*').order('created_at', { ascending: false }),
    ]);
    if (folderResult.error || fileResult.error) {
      setError('Could not load Drive: ' + (folderResult.error || fileResult.error).message);
    } else {
      setFolders(folderResult.data || []);
      setFiles(fileResult.data || []);
    }
    setLoading(false);
  }, []);
  React.useEffect(() => { reload(); }, [reload]);

  const activeFolder = folders.find(f => f.id === activeFolderId);
  const folderFiles = files.filter(f => f.folder_id === activeFolderId);
  const images = folderFiles.filter(isDriveImage);
  const cover = activeFolder && files.find(f => f.id === activeFolder.cover_file_id && f.folder_id === activeFolder.id);
  const previewIndex = images.findIndex(f => f.id === previewId);

  const uploadOne = async (folderId, file) => {
    const safeName = (file.name || 'file').replace(/[^a-zA-Z0-9._-]/g, '_');
    const uniqueName = window.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    const path = `${folderId}/${uniqueName}-${safeName}`;
    const { error: uploadError } = await sb.storage.from(DRIVE_BUCKET).upload(path, file);
    if (uploadError) throw uploadError;
    const { data, error: insertError } = await sb.from('drive_files').insert({
      folder_id: folderId,
      storage_path: path,
      name: file.name || 'File',
      mime_type: file.type || null,
      size_bytes: file.size,
      created_by: session?.user?.id || null,
    }).select('*').single();
    if (insertError) {
      await sb.storage.from(DRIVE_BUCKET).remove([path]);
      throw insertError;
    }
    return data;
  };

  const createFolder = async (event) => {
    event.preventDefault();
    const name = newName.trim();
    if (!name || busy) return;
    if (newCover && !newCover.type.startsWith('image/')) {
      setError('Please choose an image for the cover photo.');
      return;
    }
    setBusy(true); setError('');
    const { data: folder, error: insertError } = await sb.from('drive_folders').insert({
      name,
      created_by: session?.user?.id || null,
    }).select('*').single();
    if (insertError) {
      setError(insertError.code === '23505' ? 'A folder with that name already exists.' : 'Could not create folder: ' + insertError.message);
      setBusy(false);
      return;
    }
    if (newCover) {
      try {
        const image = await uploadOne(folder.id, newCover);
        const { error: coverError } = await sb.from('drive_folders')
          .update({ cover_file_id: image.id }).eq('id', folder.id);
        if (coverError) {
          setError('Folder and photo created, but the cover could not be set: ' + coverError.message);
        }
      } catch (coverError) {
        setError('Folder created, but the cover photo could not be uploaded: ' + coverError.message);
      }
    }
    setNewName(''); setNewCover(null); setCreating(false);
    setActiveFolderId(folder.id);
    setBusy(false);
    await reload();
  };

  const renameFolder = async (event) => {
    event.preventDefault();
    const name = renameDraft.trim();
    if (!activeFolder || !name || busy) return;
    if (name === activeFolder.name) { setRenaming(false); return; }
    setBusy(true); setError('');
    const { error: updateError } = await sb.from('drive_folders').update({ name }).eq('id', activeFolder.id);
    setBusy(false);
    if (updateError) {
      setError(updateError.code === '23505' ? 'A folder with that name already exists.' : 'Could not rename folder: ' + updateError.message);
      return;
    }
    setRenaming(false);
    await reload();
  };

  const setCover = async (fileId) => {
    if (!activeFolder || busy) return;
    setBusy(true); setError('');
    const { error: updateError } = await sb.from('drive_folders')
      .update({ cover_file_id: fileId }).eq('id', activeFolder.id);
    setBusy(false);
    if (updateError) setError('Could not update the cover: ' + updateError.message);
    else { setChoosingCover(false); await reload(); }
  };

  const uploadCover = async (file) => {
    if (!activeFolder || !file || busy) return;
    if (!file.type.startsWith('image/')) { setError('Please choose an image for the cover photo.'); return; }
    setBusy(true); setError('');
    try {
      const image = await uploadOne(activeFolder.id, file);
      const { error: updateError } = await sb.from('drive_folders')
        .update({ cover_file_id: image.id }).eq('id', activeFolder.id);
      if (updateError) setError('Photo uploaded, but the cover could not be set: ' + updateError.message);
      else setChoosingCover(false);
    } catch (uploadError) {
      setError('Could not upload the cover photo: ' + uploadError.message);
    }
    if (coverInput.current) coverInput.current.value = '';
    setBusy(false);
    await reload();
  };

  const uploadFiles = async (fileList) => {
    const incoming = Array.from(fileList || []);
    if (!activeFolder || !incoming.length || busy) return;
    setBusy(true); setError('');
    setUploadProgress({ done: 0, total: incoming.length });
    let failed = 0;
    let firstError = '';
    for (const file of incoming) {
      try { await uploadOne(activeFolder.id, file); }
      catch (uploadError) { failed++; if (!firstError) firstError = uploadError.message; }
      setUploadProgress(progress => ({ ...progress, done: progress.done + 1 }));
    }
    if (fileInput.current) fileInput.current.value = '';
    setBusy(false);
    setUploadProgress(null);
    await reload();
    if (failed) setError(`${failed} of ${incoming.length} files could not be uploaded. ${firstError}`);
  };

  const deleteFile = async (file) => {
    if (!window.confirm(`Delete "${file.name}" from Drive? This cannot be undone.`)) return;
    setBusy(true); setError('');
    const { error: deleteError } = await sb.from('drive_files').delete().eq('id', file.id);
    if (deleteError) setError('Could not delete file: ' + deleteError.message);
    else {
      const { error: storageError } = await sb.storage.from(DRIVE_BUCKET).remove([file.storage_path]);
      if (storageError) setError('File removed from Drive, but its stored copy could not be cleaned up: ' + storageError.message);
      if (previewId === file.id) setPreviewId(null);
    }
    setBusy(false);
    await reload();
  };

  const deleteFolder = async () => {
    if (!activeFolder) return;
    const count = folderFiles.length;
    if (!window.confirm(`Delete "${activeFolder.name}" and its ${count} file${count === 1 ? '' : 's'}? This cannot be undone.`)) return;
    setBusy(true); setError('');
    const paths = folderFiles.map(f => f.storage_path);
    const { error: deleteError } = await sb.from('drive_folders').delete().eq('id', activeFolder.id);
    if (deleteError) setError('Could not delete folder: ' + deleteError.message);
    else {
      setActiveFolderId(null); setChoosingCover(false); setPreviewId(null);
      for (let i = 0; i < paths.length; i += 100) {
        const { error: storageError } = await sb.storage.from(DRIVE_BUCKET).remove(paths.slice(i, i + 100));
        if (storageError) { setError('Folder deleted, but some stored files could not be cleaned up: ' + storageError.message); break; }
      }
    }
    setBusy(false);
    await reload();
  };

  if (loading) return <p className="drive-page__status">Loading Drive…</p>;

  return (
    <div className="drive-page">
      {!activeFolderId ? (
        <React.Fragment>
          <div className="drive-page__head">
            <div>
              <p className="drive-page__eyebrow">Shared admin storage</p>
              <h3>Drive</h3>
            </div>
            <button type="button" className="btn btn--solid btn--sm" disabled={busy}
              onClick={() => { setCreating(v => !v); setError(''); }}>
              {creating ? 'Cancel' : '+ New Folder'}
            </button>
          </div>
          {error && <p className="drive-page__error" role="alert">{error}</p>}
          {creating && (
            <form className="drive-new-folder" onSubmit={createFolder}>
              <div className="form__field">
                <label className="form__label" htmlFor="drive-new-name">Folder name</label>
                <input id="drive-new-name" className="form__input" autoFocus required maxLength="120"
                  placeholder="e.g. Wexford neighborhood" value={newName}
                  onChange={e => setNewName(e.target.value)} disabled={busy} />
              </div>
              <div className="form__field">
                <label className="form__label" htmlFor="drive-new-cover">Cover photo (optional)</label>
                <input id="drive-new-cover" type="file" accept="image/*" disabled={busy}
                  onChange={e => setNewCover(e.target.files?.[0] || null)} />
                <span className="drive-page__hint">Leave this empty for a classic folder icon. You can add a cover later.</span>
              </div>
              <div className="drive-new-folder__actions">
                <button className="btn btn--solid btn--sm" type="submit" disabled={busy || !newName.trim()}>
                  {busy ? 'Creating…' : 'Create folder'}
                </button>
                <button className="btn btn--sm" type="button" disabled={busy}
                  onClick={() => { setCreating(false); setNewName(''); setNewCover(null); }}>Cancel</button>
              </div>
            </form>
          )}
          {folders.length === 0 ? (
            <div className="drive-empty"><DriveFolderIcon /><strong>No folders yet</strong>
              <p>Create a folder to organize files and photos for your team.</p></div>
          ) : (
            <ul className="drive-folder-grid">
              {folders.map(folder => {
                const contents = files.filter(f => f.folder_id === folder.id);
                const folderCover = contents.find(f => f.id === folder.cover_file_id && isDriveImage(f));
                const photoCount = contents.filter(isDriveImage).length;
                const otherCount = contents.length - photoCount;
                const summary = contents.length === 0 ? 'Empty folder' : [
                  otherCount ? `${otherCount} file${otherCount === 1 ? '' : 's'}` : null,
                  photoCount ? `${photoCount} photo${photoCount === 1 ? '' : 's'}` : null,
                ].filter(Boolean).join(' · ');
                return (
                  <li key={folder.id}>
                    <button type="button" className="drive-folder-card" onClick={() => { setActiveFolderId(folder.id); setError(''); }}>
                      <span className={`drive-folder-card__thumb${folderCover ? ' has-cover' : ''}`}>
                        {folderCover
                          ? <SignedImg bucket={DRIVE_BUCKET} path={folderCover.storage_path} alt=""
                              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                          : <DriveFolderIcon />}
                      </span>
                      <span className="drive-folder-card__body">
                        <strong>{folder.name}</strong>
                        <span>{summary}</span>
                      </span>
                      <span className="drive-folder-card__chevron" aria-hidden="true">›</span>
                    </button>
                  </li>
                );
              })}
            </ul>
          )}
        </React.Fragment>
      ) : !activeFolder ? (
        <div><button className="btn btn--sm" onClick={() => setActiveFolderId(null)}>← All folders</button>
          {error && <p className="drive-page__error" role="alert">{error}</p>}
          <p className="drive-page__status">{error ? 'This folder could not be loaded.' : 'This folder is no longer available.'}</p></div>
      ) : (
        <React.Fragment>
          <button type="button" className="drive-page__back" onClick={() => { setActiveFolderId(null); setChoosingCover(false); setRenaming(false); setPreviewId(null); }}>
            ← All folders
          </button>
          <div className="drive-page__head drive-page__head--inside">
            <div>
              <p className="drive-page__eyebrow">Drive folder</p>
              {renaming ? (
                <form className="drive-page__rename" onSubmit={renameFolder}>
                  <input className="form__input" autoFocus maxLength="120" value={renameDraft}
                    onChange={e => setRenameDraft(e.target.value)} disabled={busy} aria-label="Folder name" />
                  <button className="btn btn--solid btn--sm" disabled={busy || !renameDraft.trim()}>Save</button>
                  <button type="button" className="btn btn--sm" onClick={() => setRenaming(false)} disabled={busy}>Cancel</button>
                </form>
              ) : <h3>{activeFolder.name}</h3>}
              <p className="drive-page__intro">{folderFiles.length} item{folderFiles.length === 1 ? '' : 's'} in this folder</p>
            </div>
            <div className="drive-page__head-actions">
              <button type="button" className="btn btn--sm" disabled={busy || renaming}
                onClick={() => { setRenameDraft(activeFolder.name); setRenaming(true); }}>Rename</button>
              <button type="button" className="btn btn--sm drive-page__delete" disabled={busy} onClick={deleteFolder}>Delete folder</button>
            </div>
          </div>
          {error && <p className="drive-page__error" role="alert">{error}</p>}
          <section className="drive-cover">
            <div className="drive-cover__current">
              <span className="drive-cover__thumb">
                {cover ? <SignedImg bucket={DRIVE_BUCKET} path={cover.storage_path} alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <DriveFolderIcon />}
              </span>
              <span><strong>Folder cover</strong><small>{cover ? cover.name : 'No cover photo'}</small></span>
            </div>
            <button type="button" className="btn btn--sm" disabled={busy}
              onClick={() => setChoosingCover(v => !v)}>{choosingCover ? 'Done' : 'Choose cover'}</button>
          </section>
          {choosingCover && (
            <div className="drive-cover-picker">
              <p>Choose a photo in this folder, upload a new one, or use no cover.</p>
              <div className="drive-cover-picker__choices">
                <button type="button" className={`drive-cover-picker__choice${!cover ? ' is-selected' : ''}`}
                  onClick={() => setCover(null)} disabled={busy} aria-pressed={!cover}>
                  <span><DriveFolderIcon /></span><small>No cover</small>
                </button>
                {images.map(image => (
                  <button type="button" key={image.id}
                    className={`drive-cover-picker__choice${cover?.id === image.id ? ' is-selected' : ''}`}
                    onClick={() => setCover(image.id)} disabled={busy} aria-pressed={cover?.id === image.id} title={image.name}>
                    <span><SignedImg bucket={DRIVE_BUCKET} path={image.storage_path} alt=""
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }} /></span>
                    <small>{image.name}</small>
                  </button>
                ))}
              </div>
              <label className="btn btn--sm drive-cover-picker__upload">
                + Upload cover photo
                <input ref={coverInput} type="file" accept="image/*" disabled={busy}
                  onChange={e => uploadCover(e.target.files?.[0])} />
              </label>
            </div>
          )}
          <section className="drive-contents">
            <div className="drive-contents__head"><h4>Files and photos</h4><span>{folderFiles.length} items</span></div>
            <div className={`drive-upload${dragging ? ' is-dragging' : ''}`}
              onDragOver={e => { e.preventDefault(); setDragging(true); }}
              onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false); }}
              onDrop={e => { e.preventDefault(); setDragging(false); uploadFiles(e.dataTransfer?.files); }}>
              <span>{uploadProgress
                ? `${uploadProgress.done} of ${uploadProgress.total} processed`
                : 'Drop files or photos here, or'}</span>
              <label className="btn btn--solid btn--sm">
                {busy ? 'Uploading…' : 'Choose files'}
                <input ref={fileInput} type="file" multiple disabled={busy}
                  onChange={e => uploadFiles(e.target.files)} />
              </label>
            </div>
            {folderFiles.length === 0 ? (
              <p className="drive-contents__empty">This folder is empty. Add files or photos above.</p>
            ) : (
              <ul className="drive-file-list">
                {folderFiles.map(file => (
                  <li key={file.id} className="drive-file">
                    <span className="drive-file__icon">
                      {isDriveImage(file)
                        ? <SignedImg bucket={DRIVE_BUCKET} path={file.storage_path} alt=""
                            style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                        : <DriveFileIcon />}
                    </span>
                    <span className="drive-file__details"><strong title={file.name}>{file.name}</strong>
                      <small>{formatBytes(file.size_bytes)} · {new Date(file.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</small></span>
                    <span className="drive-file__actions">
                      {isDriveImage(file) && <button type="button" className="btn btn--sm" onClick={() => setPreviewId(file.id)}>Preview</button>}
                      <DownloadLink bucket={DRIVE_BUCKET} path={file.storage_path} label="Download" variant="button" />
                      <button type="button" className="drive-file__delete" disabled={busy} onClick={() => deleteFile(file)}>Delete</button>
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </section>
          {previewIndex >= 0 && <PortalPhotoLightbox items={images.map(f => ({ ...f, caption: f.name }))}
            idx={previewIndex} bucket={DRIVE_BUCKET} onClose={() => setPreviewId(null)}
            onIdxChange={index => setPreviewId(images[index]?.id || null)} />}
        </React.Fragment>
      )}
    </div>
  );
}