// import React, {useEffect, useState} from 'react';
// import {
//     Alert,
//     Box,
//     Button,
//     ButtonGroup,
//     CircularProgress,
//     Dialog,
//     DialogTitle,
//     DialogContent,
//     DialogActions,
//     Grid,
//     Typography,
// } from '@mui/material';
// import axios from 'axios';
// import { Trans } from '@lingui/macro';
// import { i18n } from '@lingui/core';
// import './MobileNewsModal.css';
// import {
//     DEFAULT_NEWS_LOCALE,
//     getLocaleBase,
//     getPreferredLocales,
//     normalizeStatus,
//     isStatus,
//     pickLocalizedObject,
//     pickLocalizedText,
// } from './mobileNewsUtils';

// type MobileNewsModalProps = {
//     open: boolean;
//     onClose: () => void;
// }

// type NewsLabels = {
//     [lang: string]: {
//         title?: string;
//         new_features?: string;
//         bug_fixes?: string;
//     };
// };

// type ReleaseChanges = {
//     new_features?: string | null;
//     bug_fixes?: string | null;
// };

// type ReleaseItem = {
//     page_id: string | null;
//     title?: string | null;
//     titles?: Record<string, string | null | undefined>;
//     version: string | null;
//     date: string | null;
//     status: string | null;
//     changes: Record<string, ReleaseChanges | undefined>;
// };

// type ReleasesResponse = {
//     mapped_releases?: ReleaseItem[];
//     labels?: NewsLabels;
// };

// type StatusFilter = 'all' | 'draft' | 'published';
// type ReleaseStatusTarget = 'draft' | 'published';

// const MobileNewsModal: React.FC<MobileNewsModalProps> = ({open, onClose}) => {
//     const [loading, setLoading] = useState(false);
//     const [error, setError] = useState<string | null>(null);
//     const [releases, setReleases] = useState<ReleaseItem[]>([]);
//     const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
//     const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
//     const [labels, setLabels] = useState<NewsLabels>({});
//     const [statusUpdatingId, setStatusUpdatingId] = useState<string | null>(null);
//     const [statusUpdatingAction, setStatusUpdatingAction] = useState<ReleaseStatusTarget | null>(null);

//     const currentLang = (() => {
//         const localeBase = getLocaleBase(i18n.locale);
//         const preferredLocales = getPreferredLocales(localeBase, Object.keys(labels));
//         return preferredLocales.find((locale) => Boolean(labels[locale])) || DEFAULT_NEWS_LOCALE;
//     })();

//     const getErrorMessage = (error: unknown, fallbackMessage: string): string => {
//         if (axios.isAxiosError(error)) {
//             const responseData = error.response?.data as {message?: string} | undefined;
//             return responseData?.message || fallbackMessage;
//         }

//         return fallbackMessage;
//     };

//     const loadReleases = async (showGlobalLoader: boolean = true) => {
//         try {
//             if (showGlobalLoader) {
//                 setLoading(true);
//             }
//             setError(null);
//             const url =
//                 statusFilter === 'all'
//                     ? '/api/mobile-news/releases'
//                     : `/api/mobile-news/releases?status=${statusFilter}`;
//             const response = await axios.get<ReleasesResponse>(url);
//             setReleases(response.data?.mapped_releases || []);
//             setLabels(response.data?.labels || {});
//         } catch (err: unknown) {
//             setError(getErrorMessage(err, i18n._('Fehler beim Laden der News')));
//         } finally {
//             if (showGlobalLoader) {
//                 setLoading(false);
//             }
//         }
//     };

//     useEffect(() => {
//         if (open) {
//             loadReleases();
//         }
//     }, [open, statusFilter]);

//     const filterOptions: Array<{value: StatusFilter; label: string}> = [
//         { value: 'all', label: i18n._('Alle') },
//         { value: 'draft', label: i18n._('Im Entwurf')},
//         { value: 'published', label: i18n._('Veröffentlicht')},
//     ];

//     const toggleRow = (rowId: string) => {
//         setExpandedRows((prev) => ({
//             ...prev,
//             [rowId]: !prev[rowId],
//         }))
//     }

//     const getStatusClassName = (status: string | null | undefined): string => {
//         const normalizedStatus = normalizeStatus(status);
//         if (normalizedStatus === 'published') {
//             return 'is-published';
//         }
//         if (normalizedStatus === 'draft') {
//             return 'is-draft';
//         }

//         return 'is-other';
//     };

//     const getLocalizedLabels = (): NewsLabels[string] => {
//         const preferredLocales = getPreferredLocales(currentLang, Object.keys(labels));
//         return pickLocalizedObject(labels, preferredLocales) || {};
//     };

//     const getLocalizedChanges = (release: ReleaseItem): ReleaseChanges => {
//         const preferredLocales = getPreferredLocales(currentLang, Object.keys(release.changes || {}));
//         return pickLocalizedObject(release.changes, preferredLocales) || {};
//     };

//     const updateReleaseStatus = async (pageId: string, target: ReleaseStatusTarget) => {
//         try {
//             const endpoint =
//                 target === 'published'
//                     ? `/api/mobile-news/releases/${pageId}/publish`
//                     : `/api/mobile-news/releases/${pageId}/unpublish`;

//             setStatusUpdatingId(pageId);
//             setStatusUpdatingAction(target);
//             await axios.post(endpoint);
//             await loadReleases(false);
//         } catch (err: unknown) {
//             setError(getErrorMessage(err, i18n._('Fehler beim Aktualisieren des Status')));
//         } finally {
//             setStatusUpdatingId(null);
//             setStatusUpdatingAction(null);
//         }
//     };

//     const isUpdatingStatus = (pageId: string, target: ReleaseStatusTarget): boolean => {
//         return statusUpdatingId === pageId && statusUpdatingAction === target;
//     };

//     const getReleaseTitle = (release: ReleaseItem): string => {
//         const preferredLocales = getPreferredLocales(currentLang, Object.keys(release.titles || {}));
//         const localizedTitle = pickLocalizedText(release.titles, preferredLocales) || release.title || '';

//         if (localizedTitle?.trim()) {
//             return localizedTitle;
//         }

//         if (release.version) {
//             return `${i18n._('Release')} ${release.version}`;
//         }

//         return i18n._('Ohne Titel');
//     };

//     const renderReleaseDetailText = (release: ReleaseItem) => {
//         const localizedLabels = getLocalizedLabels();
//         const localizedChanges = getLocalizedChanges(release);

//         return (
//             <Box className="mobile-news-detail-content">
//                 <Typography variant="body1" className="mobile-news-detail-heading">
//                     === <Trans>Neuigkeiten</Trans> ===
//                 </Typography>

//                 <Typography variant="body1" color="text.secondary" className="mobile-news-detail-subline">
//                     <Trans>Version</Trans>: {release.version ?? '-'}
//                 </Typography>

//                 <Typography variant="body1" className="mobile-news-detail-heading mobile-news-detail-section-spacing">
//                     === {localizedLabels?.new_features ?? i18n._('Neue Funktionen')} ===
//                 </Typography>

//                 <Typography variant="body1" color="text.secondary" className="mobile-news-detail-subline">
//                     {localizedChanges?.new_features ?? i18n._('Keine Inhalte vorhanden.')}
//                 </Typography>

//                 <Typography variant="body1" className="mobile-news-detail-heading mobile-news-detail-section-spacing">
//                     === {localizedLabels?.bug_fixes ?? i18n._('Fehlerbehebungen')} ===
//                 </Typography>

//                 <Typography variant="body1" color="text.secondary" className="mobile-news-detail-subline">
//                     {localizedChanges?.bug_fixes ?? i18n._('Keine Inhalte vorhanden.')}
//                 </Typography>
//             </Box>
//         );
//     };

//     const renderReleaseActionButtons = (release: ReleaseItem) => {
//         const pageId = release.page_id && release.page_id.trim() !== '' ? release.page_id : null;

//         return (
//             <Box className="mobile-news-action-buttons">
//                 <Button 
//                     className="mobile-news-action-button mobile-news-action-button-draft"
//                     size="small" 
//                     variant="contained"
//                     disabled={!pageId || isStatus(release.status, 'draft') || statusUpdatingId === pageId}
//                     onClick={ async (e) => {
//                         e.stopPropagation();
//                         if (!pageId) {
//                             return;
//                         }
//                         await updateReleaseStatus(pageId, 'draft');
//                     }}
//                 >
//                     {pageId && isUpdatingStatus(pageId, 'draft')
//                         ? i18n._('Speichert...')
//                         : i18n._('Im Entwurf')}
//                 </Button>

//                 <Button 
//                     className="mobile-news-action-button mobile-news-action-button-published"
//                     size="small" 
//                     variant="contained"
//                     disabled={!pageId || isStatus(release.status, 'published') || statusUpdatingId === pageId}
//                     onClick={async (e) => {
//                         e.stopPropagation();
//                         if (!pageId) {
//                             return;
//                         }
//                         await updateReleaseStatus(pageId, 'published');
//                     }}
//                 >
//                     {pageId && isUpdatingStatus(pageId, 'published')
//                         ? i18n._('Speichert...')
//                         : i18n._('Veröffentlichen')}
//                 </Button>
//             </Box>
//         );
//     };

//     return (
//         <Dialog 
//             open={open}
//             onClose={onClose} 
//             maxWidth={false} 
//             fullWidth
//             PaperProps={{
//                 sx: {
//                     width: '70vw',
//                     height: '75vh',
                    
//                     minWidth: '320px',
//                     minHeight: '320px',
                    
//                     maxWidth: '1400px',
//                     maxHeight: '700px',
//                 },
//             }}
//         >
//         <DialogTitle><Trans>TASKO News verwalten</Trans></DialogTitle>

//         <DialogContent>

            
//             {loading ? (
//                 <Box className="mobile-news-loading-box">
//                     <CircularProgress size={24}/>
//                     <Typography variant="body1" className="mobile-news-loading-text">
//                         <Trans>Lädt News...</Trans>
//                     </Typography>
//                 </Box>
//             ) : error ? (
//                 <Alert severity="error">{error}</Alert>
//             ) : (
//                 <Box className="mobile-news-content">
//                     <Box className="mobile-news-filter-row">
//                         <Typography variant="body1" className="mobile-news-filter-label">
//                             <Trans>Filter:</Trans>
//                         </Typography>

//                         <ButtonGroup
//                             className="mobile-news-filter-group"
//                             variant="outlined"
//                         >
//                             {filterOptions.map((option) => {
//                                 const isActive = statusFilter === option.value;
//                                 return (
//                                     <Button
//                                         className={`mobile-news-filter-button ${isActive ? 'is-active' : ''}`}
//                                         key={option.value}
//                                         onClick={() => {
//                                             if (!isActive) {
//                                                 setStatusFilter(option.value);
//                                             }
//                                         }}
//                                     >
//                                         {option.label}
//                                     </Button>
//                                 )
//                             })}
//                         </ButtonGroup>
//                     </Box>
//                     {releases.length === 0 ? (
//                         <Typography variant="body1" color="text.secondary">
//                             <Trans>Keine News gefunden.</Trans>
//                         </Typography>
//                     ) : (
//                         <Box className="mobile-news-table">
//                             <Grid container spacing={0} className="mobile-news-header-row">
//                                 <Grid item xs={1} className="mobile-news-col-status">
//                                     <Typography variant="caption">
//                                         <Trans>Status</Trans>
//                                     </Typography>
//                                 </Grid>
//                                 <Grid item xs={1} className="mobile-news-col-version">
//                                     <Typography variant="caption">
//                                         <Trans>Version</Trans>
//                                     </Typography>
//                                 </Grid>
//                                 <Grid item xs={8} className="mobile-news-col-title">
//                                     <Typography variant="caption">
//                                         <Trans>Titel</Trans>
//                                     </Typography>
//                                 </Grid>
//                             </Grid>

//                             {releases.map((release, index) => {
//                             const rowId = release.page_id && release.page_id.trim() !== ''
//                                 ? release.page_id
//                                 : `row-${index}`;

//                                 return(
//                                     <Box
//                                         key={rowId}
//                                         className="mobile-news-row"
//                                     >
//                                         <Grid container spacing={0} alignItems="stretch" className="mobile-news-row-grid">
//                                             <Grid item xs={1} className="mobile-news-col-status">
//                                                 <span
//                                                     className={`mobile-news-status-circle ${getStatusClassName(release.status)}`}
//                                                     title={normalizeStatus(release.status) || '-'}
//                                                 />
//                                             </Grid>

//                                             <Grid item xs={1} className="mobile-news-col-version">
//                                                 <Typography variant="body1">
//                                                     {release.version ?? '-'}
//                                                 </Typography>
//                                             </Grid>

//                                             <Grid item xs={8} className="mobile-news-col-title">
//                                                 <Box
//                                                     onClick={() => toggleRow(rowId)}
//                                                     className="mobile-news-title-clickable"
//                                                 >
//                                                     <Typography variant="body1" className="mobile-news-title-text">
//                                                         <span
//                                                             className={`mobile-news-disclosure ${expandedRows[rowId] ? 'is-expanded' : ''}`}
//                                                             aria-hidden="true"
//                                                         />
//                                                         {getReleaseTitle(release)}
//                                                     </Typography>
//                                                 </Box>
//                                             </Grid>
//                                         </Grid>

//                                         {expandedRows[rowId] && (
//                                             <Grid container spacing={0} alignItems="stretch" className="mobile-news-expand-grid">
//                                                 <Grid item xs={1} className="mobile-news-col-status">
//                                                     <Box className="mobile-news-spacer-col" />
//                                                 </Grid>
//                                                 <Grid item xs={1} className="mobile-news-col-version">
//                                                     <Box className="mobile-news-spacer-col" />
//                                                 </Grid>
//                                                 <Grid item xs={8} className="mobile-news-col-title">
//                                                     <Box className="mobile-news-detail-panel">
//                                                         <Box className="mobile-news-detail-scroll">
//                                                             {renderReleaseDetailText(release)}
//                                                         </Box>

//                                                         {renderReleaseActionButtons(release)}
//                                                     </Box>
//                                                 </Grid>
//                                             </Grid>
//                                         )}
//                                     </Box>
//                                 );
//                             })} 
//                         </Box>
//                     )}
//                 </Box>
//             )}
//         </DialogContent>

//         <DialogActions>
//             <Button 
//                 className="mobile-news-action-button-close"
//                 onClick={onClose}
//             >
//                 <Trans>Schließen</Trans>
//             </Button>
//         </DialogActions>
//         </Dialog>
//     );
// };

// export default MobileNewsModal;