// ============================
// LELUSA — Admin Postera Page
// src/pages/admin-postera.jsx
// ============================

function AdminPosteraPage() {
  const { t } = window.ReactI18next.useTranslation();
  const { pageData, navigate } = React.useContext(window.AppContext);
  const isMobile = window.LelusaGestures.useIsMobile();
  const [projects, setProjects] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [message, setMessage] = React.useState('');
  const editorMode = pageData.mode === 'new' || pageData.mode === 'edit' || pageData.projectId ? pageData.mode || 'edit' : '';
  const editorProjectId = pageData.projectId || '';
  const isEditorOpen = editorMode === 'new' || Boolean(editorProjectId);

  const loadProjects = React.useCallback(async () => {
    setLoading(true);
    try {
      const rows = await window.PosteraProjects.listProjects();
      setProjects(rows);
    } catch (error) {
      setMessage(error.message || 'No se pudieron cargar los proyectos.');
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { loadProjects(); }, []);

  React.useEffect(() => {
    const onSaved = (event) => {
      if (event.data?.type === 'postera:back-admin') {
        navigate('admin-postera', {});
        loadProjects();
        return;
      }
      const project = event.data?.project;
      if (event.data?.type !== 'postera:project-saved' || !project?.id) return;
      setMessage(event.data.remote ? t('admin_postera_saved_remote') : t('admin_postera_saved_local'));
      if (String(project.id) !== String(editorProjectId)) {
        navigate('admin-postera', { mode: 'edit', projectId: project.id });
      }
      loadProjects();
    };
    window.addEventListener('message', onSaved);
    window.addEventListener('lelusa-postera-projects-change', loadProjects);
    return () => {
      window.removeEventListener('message', onSaved);
      window.removeEventListener('lelusa-postera-projects-change', loadProjects);
    };
  }, [editorProjectId, loadProjects, navigate, t]);

  const editProject = (id) => {
    navigate('admin-postera', { mode: 'edit', projectId: id });
  };

  const createNew = () => {
    navigate('admin-postera', { mode: 'new' });
  };

  const closeEditor = () => {
    navigate('admin-postera', {});
  };

  const deleteProject = async (project) => {
    if (!project || !window.confirm(t('admin_postera_delete_confirm', { title: project.title }))) return;
    await window.PosteraProjects.deleteProject(project.id);
    setMessage(t('admin_postera_deleted'));
    if (String(project.id) === String(editorProjectId)) closeEditor();
    await loadProjects();
  };

  const iframeSrc = editorProjectId
    ? `/tools/postera/index.html?embedded=admin&project=${encodeURIComponent(editorProjectId)}`
    : '/tools/postera/index.html?embedded=admin';
  const activeProject = projects.find(project => String(project.id) === String(editorProjectId));
  const editorShellStyle = isMobile
    ? {
        background: 'var(--bg-soft)',
        border: 'none',
        borderRadius: 0,
        overflow: 'hidden',
        boxShadow: 'none',
        minHeight: 'calc(100dvh - 64px - env(safe-area-inset-bottom))',
        margin: '-16px -14px calc(-128px - env(safe-area-inset-bottom))'
      }
    : {
        background: 'var(--card)',
        border: '1px solid var(--border)',
        borderRadius: 18,
        overflow: 'hidden',
        boxShadow: '0 10px 30px rgba(58,42,32,0.05)',
        minHeight: 'calc(100vh - 132px)'
      };
  const editorHeaderStyle = isMobile
    ? {
        padding: '10px 14px',
        borderBottom: '1px solid var(--border)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 12,
        flexWrap: 'wrap',
        background: 'var(--card)'
      }
    : {
        padding: 14,
        borderBottom: '1px solid var(--border)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 12,
        flexWrap: 'wrap'
      };
  const editorFrameStyle = {
    width: '100%',
    height: isMobile ? 'calc(100dvh - 118px)' : 'calc(100vh - 190px)',
    border: 'none',
    display: 'block',
    background: 'var(--bg-soft)'
  };

  return (
    <AdminLayout title={t('admin_postera')} subtitle={t('admin_postera_subtitle')}>
      <div style={{ display: 'grid', gap: 18 }}>
        {!isEditorOpen && <section style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 18, overflow: 'hidden', boxShadow: '0 10px 30px rgba(58,42,32,0.05)' }}>
          <div style={{ padding: 16, borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 900, color: 'var(--text)' }}>{t('admin_postera_projects')}</h3>
              <p style={{ margin: '4px 0 0', fontSize: 12, color: 'var(--muted)' }}>
                {window.PosteraProjects.isRemoteConfigured() ? t('admin_postera_supabase_on') : t('admin_postera_supabase_off')}
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Btn size="sm" onClick={createNew}>{t('admin_postera_new')}</Btn>
            </div>
          </div>

          {message && (
            <div style={{ margin: 12, padding: '10px 12px', borderRadius: 12, background: 'var(--accent-light)', color: 'var(--muted)', fontSize: 12, lineHeight: 1.4 }}>
              {message}
            </div>
          )}

          <div style={{ padding: 14 }}>
            {loading ? (
              <div style={{ padding: 18, color: 'var(--muted)', fontSize: 13 }}>{t('admin_postera_loading')}</div>
            ) : projects.length === 0 ? (
              <div style={{ padding: 18, border: '1px dashed var(--border)', borderRadius: 16, color: 'var(--muted)', fontSize: 13, lineHeight: 1.5 }}>
                {t('admin_postera_empty')}
              </div>
            ) : projects.map(project => {
              const active = String(project.id) === String(editorProjectId);
              const thumb = project.thumbnailUrl || project.thumbnailData || project.imageUrl || project.imageData;
              return (
                <article key={project.id} style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 14, background: active ? 'var(--accent-light)' : 'var(--card)', padding: 12, display: 'grid', gridTemplateColumns: isMobile ? '72px 1fr' : '88px minmax(0, 1fr) auto', gap: 12, alignItems: 'center' }}>
                  <button type="button" onClick={() => editProject(project.id)} aria-label={t('admin_postera_edit')}
                    style={{ width: isMobile ? 72 : 88, height: isMobile ? 54 : 66, borderRadius: 12, background: 'var(--bg-soft)', border: '1px solid var(--border)', overflow: 'hidden', display: 'grid', placeItems: 'center', cursor: 'pointer', padding: 0 }}>
                      {thumb ? <img src={thumb} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <Icon name="grid" size={18} color="var(--muted)" />}
                  </button>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 900, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{project.title}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {project.config?.gridCols || 0}x{project.config?.gridRows || 0} · {new Date(project.updatedAt).toLocaleDateString(i18next.language === 'es' ? 'es-MX' : 'en-US')}
                    </div>
                  </div>
                  <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto', display: 'flex', gap: 8, justifyContent: isMobile ? 'flex-start' : 'flex-end', flexWrap: 'wrap' }}>
                    <Btn size="sm" onClick={() => editProject(project.id)}>{t('admin_postera_edit')}</Btn>
                    <Btn size="sm" variant="ghost" onClick={() => window.open(`/tools/postera/index.html?project=${encodeURIComponent(project.id)}`, '_blank', 'noopener,noreferrer')}>{t('admin_postera_open_tab')}</Btn>
                    <Btn size="sm" variant="ghost" onClick={() => deleteProject(project)} style={{ color: '#C83A3A' }}>{t('admin_postera_delete')}</Btn>
                  </div>
                </article>
              );
            })}
          </div>
        </section>}

        {isEditorOpen && (
          <section style={editorShellStyle}>
            <div style={editorHeaderStyle}>
              <div style={{ minWidth: 0 }}>
                <h3 style={{ margin: 0, fontSize: 14, fontWeight: 900, color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {activeProject?.title || t('admin_postera_new')}
                </h3>
                <p style={{ margin: '4px 0 0', fontSize: 11.5, color: 'var(--muted)' }}>
                  {window.PosteraProjects.isRemoteConfigured() ? t('admin_postera_supabase_on') : t('admin_postera_supabase_off')}
                </p>
              </div>
              <Btn size="sm" variant="ghost" onClick={closeEditor}>{t('admin_postera_close_editor')}</Btn>
            </div>
            <iframe
              key={iframeSrc}
              title="Postera"
              src={iframeSrc}
              style={editorFrameStyle}
            />
          </section>
        )}
      </div>
    </AdminLayout>
  );
}

Object.assign(window, { AdminPosteraPage });