pollutri
/
captive-portal-cms
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 Commitit
2 Branchit
278 MiB
 
 
Puu: 5aa4eeb8ec
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '5aa4eeb8ec'
${ noResults }
captive-portal-cms/app/admin/page.tsx

1299 rivejä
65 KiB
Raaka Blame Historia 

  1. 'use client';

  2. 

  3. import { useState, useEffect, useRef } from 'react';

  4. import { Card, Portal, MediaItem, CardType } from '@/types';

  5. import { EXTERNAL_LINK_ENABLED as EXTERNAL_LINK_DEFAULT, FACTORY_PRESET_SAVE_ENABLED } from '@/lib/config';

  6. import { CARD_LIMITS, PORTAL_LIMITS } from '@/lib/validation';

  7. import { withBasePath } from '@/lib/url';

  8. 

  9. type CharCounterProps = { value: string | undefined; limit: number };

  10. function CharCounter({ value, limit }: CharCounterProps) {

  11.   const len = (value ?? '').length;

  12.   const remaining = limit - len;

  13.   const overflow = len > limit;

  14.   const near = !overflow && len >= limit * 0.8;

  15.   const color = overflow ? 'text-red-600 font-semibold' : near ? 'text-amber-600' : 'text-gray-400';

  16.   return (

  17.     <p className={`text-xs mt-1 text-right ${color}`}>

  18.       {len} / {limit} · {remaining < 0 ? `${Math.abs(remaining)} oltre il limite` : `${remaining} rimanenti`}

  19.     </p>

  20.   );

  21. }

  22. 

  23. function stripTags(html: string): string {

  24.   if (typeof window === 'undefined' || !html) return '';

  25.   return new DOMParser().parseFromString(html, 'text/html').body.textContent ?? '';

  26. }

  27. 

  28. type RichTextMiniProps = {

  29.   value: string;

  30.   onChange: (html: string) => void;

  31.   limit: number;

  32.   className?: string;

  33. };

  34. function RichTextMini({ value, onChange, limit, className }: RichTextMiniProps) {

  35.   const ref = useRef<HTMLDivElement>(null);

  36. 

  37.   // Sync iniziale soltanto. Aggiornare innerHTML durante l'editing perderebbe la

  38.   // posizione del cursore, quindi confidiamo che onInput tenga value e DOM allineati.

  39.   useEffect(() => {

  40.     if (ref.current && ref.current.innerHTML !== value) {

  41.       ref.current.innerHTML = value || '';

  42.     }

  43.     // eslint-disable-next-line react-hooks/exhaustive-deps

  44.   }, []);

  45. 

  46.   const exec = (cmd: 'bold' | 'italic') => {

  47.     ref.current?.focus();

  48.     document.execCommand(cmd);

  49.     onChange(ref.current?.innerHTML || '');

  50.   };

  51. 

  52.   return (

  53.     <div>

  54.       <div className="flex gap-1 mb-1">

  55.         <button

  56.           type="button"

  57.           onClick={() => exec('bold')}

  58.           className="font-bold w-8 h-8 border border-gray-300 rounded hover:bg-gray-100"

  59.           title="Bold"

  60.         >B</button>

  61.         <button

  62.           type="button"

  63.           onClick={() => exec('italic')}

  64.           className="italic w-8 h-8 border border-gray-300 rounded hover:bg-gray-100"

  65.           title="Italic"

  66.         >I</button>

  67.       </div>

  68.       <div

  69.         ref={ref}

  70.         contentEditable

  71.         suppressContentEditableWarning

  72.         onInput={(e) => onChange((e.target as HTMLDivElement).innerHTML)}

  73.         className={className ?? 'w-full border border-gray-300 rounded-lg p-2.5 min-h-[8rem] bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500'}

  74.       />

  75.       <CharCounter value={stripTags(value)} limit={limit} />

  76.     </div>

  77.   );

  78. }

  79. 

  80. function StyledSelect<T extends string>({

  81.   value,

  82.   onChange,

  83.   options,

  84. }: {

  85.   value: T;

  86.   onChange: (v: T) => void;

  87.   options: { value: T; label: string; style?: React.CSSProperties }[];

  88. }) {

  89.   const [open, setOpen] = useState(false);

  90.   const ref = useRef<HTMLDivElement>(null);

  91. 

  92.   useEffect(() => {

  93.     if (!open) return;

  94.     const onClick = (e: MouseEvent) => {

  95.       if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);

  96.     };

  97.     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };

  98.     document.addEventListener('mousedown', onClick);

  99.     document.addEventListener('keydown', onKey);

  100.     return () => {

  101.       document.removeEventListener('mousedown', onClick);

  102.       document.removeEventListener('keydown', onKey);

  103.     };

  104.   }, [open]);

  105. 

  106.   const current = options.find(o => o.value === value);

  107.   // Fallback: se il value non matcha nessuna opzione (es. tipo disattivato dalla flag), mostra il valore raw prettificato

  108.   const displayLabel = current?.label

  109.     ?? (typeof value === 'string' && value.length > 0

  110.         ? value.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, c => c.toUpperCase())

  111.         : '');

  112.   const inputBase = "w-full border border-gray-300 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900";

  113. 

  114.   return (

  115.     <div ref={ref} className="relative">

  116.       <button

  117.         type="button"

  118.         onClick={() => setOpen(o => !o)}

  119.         className={`${inputBase} text-left flex items-center justify-between cursor-pointer`}

  120.       >

  121.         <span className={displayLabel ? '' : 'text-gray-400'} style={current?.style}>{displayLabel || 'Select…'}</span>

  122.         <span className={`text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`}>▾</span>

  123.       </button>

  124.       {open && (

  125.         <div className="absolute left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-30 overflow-hidden">

  126.           {options.map(o => (

  127.             <button

  128.               key={o.value}

  129.               type="button"

  130.               onClick={() => { onChange(o.value); setOpen(false); }}

  131.               className={`w-full text-left px-3 py-2.5 hover:bg-blue-50 transition-colors ${o.value === value ? 'bg-blue-100 font-semibold text-blue-700' : 'text-gray-800'}`}

  132.               style={o.style}

  133.             >

  134.               {o.label}

  135.             </button>

  136.           ))}

  137.         </div>

  138.       )}

  139.     </div>

  140.   );

  141. }

  142. 

  143. const VIDEO_EXTENSIONS = 'mp4|m4v|webm|mov|qt|mkv|avi|divx|wmv|asf|flv|f4v|3gp|3gpp|3g2|mts|m2ts|ts|mpg|mpeg|vob|mxf|ogv|ogg';

  144. // Sottoinsieme di formati video davvero riproducibili dai browser moderni

  145. const PLAYBACK_SUPPORTED_VIDEO = 'mp4|m4v|webm|mov|qt|ogv|ogg';

  146. const PLAYBACK_SUPPORTED_LABEL = 'MP4, M4V, WebM, MOV, OGV';

  147. 

  148. const isVideoUrl = (url: string) => new RegExp(`\\.(${VIDEO_EXTENSIONS})(\\?|$)`, 'i').test(url);

  149. const isPdfFile = (file: File) =>

  150.   file.type === 'application/pdf' || /\.pdf$/i.test(file.name);

  151. const isVideoFile = (file: File) =>

  152.   file.type.startsWith('video/') || new RegExp(`\\.(${VIDEO_EXTENSIONS})$`, 'i').test(file.name);

  153. const isPlayableVideoFile = (file: File) =>

  154.   new RegExp(`\\.(${PLAYBACK_SUPPORTED_VIDEO})$`, 'i').test(file.name);

  155. 

  156. const previewFontFamily = (filename: string): string =>

  157.   `PortalPreview-${filename.replace(/[^A-Za-z0-9]/g, '_')}`;

  158. 

  159. const fontFormatFromName = (filename: string): string => {

  160.   const ext = filename.match(/\.([^.]+)$/)?.[1].toLowerCase() ?? 'woff2';

  161.   return ({ woff2: 'woff2', woff: 'woff', ttf: 'truetype', otf: 'opentype' } as Record<string, string>)[ext] ?? 'woff2';

  162. };

  163. 

  164. const extractFileName = (url: string): string => {

  165.   const match = url.match(/[?&]name=([^&]+)/);

  166.   if (match) return decodeURIComponent(match[1]);

  167.   const seg = url.split('/').pop() || 'download';

  168.   return seg.split('?')[0];

  169. };

  170. 

  171. async function uploadBlobAsImage(blob: Blob, name: string): Promise<string | null> {

  172.   const formData = new FormData();

  173.   formData.append('file', new File([blob], name, { type: blob.type || 'image/png' }));

  174.   const res = await fetch(withBasePath('/api/upload'), { method: 'POST', body: formData });

  175.   const data = await res.json();

  176.   return data.url || null;

  177. }

  178. 

  179. async function extractVideoFrame(file: File): Promise<Blob | null> {

  180.   const url = URL.createObjectURL(file);

  181.   try {

  182.     const video = document.createElement('video');

  183.     video.muted = true;

  184.     video.playsInline = true;

  185.     video.preload = 'metadata';

  186.     video.src = url;

  187. 

  188.     await new Promise<void>((resolve, reject) => {

  189.       video.addEventListener('loadedmetadata', () => resolve(), { once: true });

  190.       video.addEventListener('error', () => reject(new Error('video load error')), { once: true });

  191.     });

  192. 

  193.     // Seek slightly past 0 — at exactly 0 some codecs return a black frame

  194.     video.currentTime = Math.min(0.1, Math.max(0, video.duration / 10));

  195.     await new Promise<void>((resolve, reject) => {

  196.       video.addEventListener('seeked', () => resolve(), { once: true });

  197.       video.addEventListener('error', () => reject(new Error('video seek error')), { once: true });

  198.     });

  199. 

  200.     const canvas = document.createElement('canvas');

  201.     canvas.width = video.videoWidth;

  202.     canvas.height = video.videoHeight;

  203.     const ctx = canvas.getContext('2d');

  204.     if (!ctx) return null;

  205.     ctx.drawImage(video, 0, 0);

  206. 

  207.     return await new Promise<Blob | null>((resolve) =>

  208.       canvas.toBlob((b) => resolve(b), 'image/jpeg', 0.85)

  209.     );

  210.   } finally {

  211.     URL.revokeObjectURL(url);

  212.   }

  213. }

  214. 

  215. async function pdfToImageItems(

  216.   file: File,

  217.   onProgress: (page: number, total: number) => void

  218. ): Promise<MediaItem[]> {

  219.   const pdfjs = await import('pdfjs-dist');

  220.   // Worker file is copied to /public via the postinstall script

  221.   pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';

  222. 

  223.   const arrayBuffer = await file.arrayBuffer();

  224.   const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;

  225.   const baseName = file.name.replace(/\.pdf$/i, '').replace(/[^a-zA-Z0-9-_]/g, '_');

  226.   const items: MediaItem[] = [];

  227. 

  228.   for (let i = 1; i <= pdf.numPages; i++) {

  229.     onProgress(i, pdf.numPages);

  230.     const page = await pdf.getPage(i);

  231.     const viewport = page.getViewport({ scale: 1.5 });

  232.     const canvas = document.createElement('canvas');

  233.     canvas.width = viewport.width;

  234.     canvas.height = viewport.height;

  235.     const ctx = canvas.getContext('2d');

  236.     if (!ctx) continue;

  237.     await page.render({ canvasContext: ctx, viewport }).promise;

  238. 

  239.     const blob: Blob = await new Promise((resolve, reject) => {

  240.       canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');

  241.     });

  242. 

  243.     const url = await uploadBlobAsImage(blob, `${baseName}-page${i}.png`);

  244.     if (url) items.push({ url });

  245.   }

  246. 

  247.   return items;

  248. }

  249. 

  250. export default function AdminDashboard() {

  251.   const [activeTab, setActiveTab] = useState<'cards' | 'settings'>('cards');

  252. 

  253.   // Card State

  254.   const [cards, setCards] = useState<Card[]>([]);

  255.   const [isEditing, setIsEditing] = useState<Partial<Card> | null>(null);

  256. 

  257.   // Portal State

  258.   const [portal, setPortal] = useState<Partial<Portal>>({});

  259.   const [savingPortal, setSavingPortal] = useState(false);

  260.   const [uploading, setUploading] = useState<{ [key: string]: boolean }>({});

  261. 

  262.   // NEW UI STATES: Toast and Confirm Dialog

  263.   const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  264.   const [confirmDialog, setConfirmDialog] = useState<{ message: string, onConfirm: () => void } | null>(null);

  265.   const [pdfProgress, setPdfProgress] = useState<{ name: string; page: number; total: number } | null>(null);

  266.   const [availableFonts, setAvailableFonts] = useState<string[]>([]);

  267.   // Map: expected URL of the future-transcoded file → job state.

  268.   // We key by URL (not jobId) so the rendering layer can look it up cheaply.

  269.   const [transcodeJobs, setTranscodeJobs] = useState<Record<string, { jobId: string; status: string; progress: number }>>({});

  270. 

  271.   // External Link feature flag: priorità al setting del portale, fallback alla costante in lib/config.

  272.   const externalLinksOn = portal.externalLinkEnabled ?? EXTERNAL_LINK_DEFAULT;

  273. 

  274.   // Helper to show auto-dismissing toast

  275.   const showToast = (message: string, type: 'success' | 'error' = 'success') => {

  276.     setToast({ message, type });

  277.     setTimeout(() => setToast(null), type === 'error' ? 6000 : 3000);

  278.   };

  279. 

  280.   useEffect(() => {

  281.     fetch(withBasePath('/api/cards')).then(res => res.json()).then(setCards);

  282.     fetch(withBasePath('/api/portals')).then(res => res.json()).then(data => data && setPortal(data));

  283.     fetch(withBasePath('/api/fonts')).then(res => res.json()).then(setAvailableFonts).catch(() => setAvailableFonts([]));

  284.   }, []);

  285. 

  286.   // Poll pending transcode jobs every 2s. On 'done' we drop the entry from the

  287.   // map; on 'failed' we additionally pull the media URL out of the editor so the

  288.   // admin doesn't try to save a broken reference.

  289.   useEffect(() => {

  290.     const pendingEntries = Object.entries(transcodeJobs).filter(

  291.       ([, j]) => j.status === 'queued' || j.status === 'running'

  292.     );

  293.     if (pendingEntries.length === 0) return;

  294. 

  295.     let cancelled = false;

  296.     const tick = async () => {

  297.       for (const [url, j] of pendingEntries) {

  298.         if (cancelled) return;

  299.         try {

  300.           const res = await fetch(withBasePath(`/api/transcode/${j.jobId}`));

  301.           if (!res.ok) continue;

  302.           const data = await res.json();

  303.           if (cancelled) return;

  304. 

  305.           if (data.status === 'done') {

  306.             setTranscodeJobs(prev => {

  307.               const next = { ...prev };

  308.               delete next[url];

  309.               return next;

  310.             });

  311.           } else if (data.status === 'failed' || data.status === 'cancelled') {

  312.             setTranscodeJobs(prev => {

  313.               const next = { ...prev };

  314.               delete next[url];

  315.               return next;

  316.             });

  317.             setIsEditing(prev => prev ? {

  318.               ...prev,

  319.               extraMedia: (prev.extraMedia || []).filter(m => m.url !== url),

  320.               imageUrl: prev.imageUrl === url ? '' : prev.imageUrl,

  321.             } : prev);

  322.             const msg = data.status === 'failed'

  323.               ? `Transcoding failed${data.error ? `: ${String(data.error).split('\n')[0]}` : ''}`

  324.               : 'Trascodifica annullata';

  325.             showToast(msg, 'error');

  326.           } else {

  327.             setTranscodeJobs(prev => prev[url] ? ({ ...prev, [url]: { ...prev[url], status: data.status, progress: data.progress ?? 0 } }) : prev);

  328.           }

  329.         } catch {

  330.           // ignore network glitches; will retry next tick

  331.         }

  332.       }

  333.     };

  334. 

  335.     void tick();

  336.     const id = window.setInterval(() => { void tick(); }, 2000);

  337.     return () => { cancelled = true; window.clearInterval(id); };

  338.     // eslint-disable-next-line react-hooks/exhaustive-deps

  339.   }, [Object.keys(transcodeJobs).join('|')]);

  340. 

  341.   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>, field: string, isPortal = false) => {

  342.     if (!e.target.files?.[0]) return;

  343.     setUploading(prev => ({ ...prev, [field]: true }));

  344. 

  345.     const formData = new FormData();

  346.     formData.append('file', e.target.files[0]);

  347.     const res = await fetch(withBasePath('/api/upload'), { method: 'POST', body: formData });

  348.     const data = await res.json();

  349. 

  350.     if (data.url) {

  351.       if (isPortal) {

  352.         setPortal(prev => ({ ...prev, [field]: data.url }));

  353.       } else {

  354.         setIsEditing(prev => ({ ...prev, [field]: data.url }));

  355.       }

  356.     }

  357.     setUploading(prev => ({ ...prev, [field]: false }));

  358.   };

  359. 

  360.   const handleUploadExtraMedia = async (e: React.ChangeEvent<HTMLInputElement>) => {

  361.     const files = e.target.files;

  362.     if (!files || files.length === 0) return;

  363.     setUploading(prev => ({ ...prev, extraMedia: true }));

  364. 

  365.     const startedWithoutCover = !isEditing?.imageUrl;

  366.     let pendingCover: string | null = null;

  367.     const canPromote = () => startedWithoutCover && !pendingCover;

  368. 

  369.     // Pre-filtro: scarta video con formati non riproducibili nei browser

  370.     const rejected: string[] = [];

  371.     const acceptedFiles: File[] = [];

  372.     for (const file of Array.from(files)) {

  373.       if (isVideoFile(file) && !isPlayableVideoFile(file)) {

  374.         rejected.push(file.name);

  375.       } else {

  376.         acceptedFiles.push(file);

  377.       }

  378.     }

  379.     if (rejected.length > 0) {

  380.       const list = rejected.length <= 3

  381.         ? rejected.join(', ')

  382.         : `${rejected.slice(0, 3).join(', ')} and ${rejected.length - 3} more`;

  383.       showToast(

  384.         `Unsupported format! Supported formats: ${PLAYBACK_SUPPORTED_LABEL}. Skipped files: ${list}`,

  385.         'error'

  386.       );

  387.     }

  388.     if (acceptedFiles.length === 0) {

  389.       setUploading(prev => ({ ...prev, extraMedia: false }));

  390.       e.target.value = '';

  391.       return;

  392.     }

  393. 

  394.     const uploaded: MediaItem[] = [];

  395.     for (const file of acceptedFiles) {

  396.       try {

  397.         if (isPdfFile(file)) {

  398.           const items = await pdfToImageItems(file, (page, total) =>

  399.             setPdfProgress({ name: file.name, page, total })

  400.           );

  401.           setPdfProgress(null);

  402.           if (items.length > 0 && canPromote()) {

  403.             // Promote the first PDF page to cover; skip it from the gallery to avoid duplication.

  404.             pendingCover = items[0].url;

  405.             uploaded.push(...items.slice(1));

  406.           } else {

  407.             uploaded.push(...items);

  408.           }

  409.         } else {

  410.           const formData = new FormData();

  411.           formData.append('file', file);

  412.           const res = await fetch(withBasePath('/api/upload'), { method: 'POST', body: formData });

  413.           const data = await res.json();

  414.           if (!data.url) continue;

  415. 

  416.           if (data?.transcoding?.jobId) {

  417.             const { jobId, status } = data.transcoding;

  418.             setTranscodeJobs(prev => ({ ...prev, [data.url]: { jobId, status, progress: 0 } }));

  419.           }

  420. 

  421.           if (isVideoFile(file)) {

  422.             // Video always goes to the gallery so users can play it.

  423.             uploaded.push({ url: data.url });

  424.             // If no cover yet, extract the first frame and use it as the cover.

  425.             if (canPromote()) {

  426.               try {

  427.                 const blob = await extractVideoFrame(file);

  428.                 if (blob) {

  429.                   const baseName = file.name.replace(/\.[^.]+$/, '').replace(/[^a-zA-Z0-9-_]/g, '_');

  430.                   const posterUrl = await uploadBlobAsImage(blob, `${baseName}-poster.jpg`);

  431.                   if (posterUrl) pendingCover = posterUrl;

  432.                 }

  433.               } catch (err) {

  434.                 console.warn('Could not extract video poster for', file.name, err);

  435.               }

  436.             }

  437.           } else {

  438.             // Plain image

  439.             if (canPromote()) {

  440.               // Promote to cover; skip the gallery to avoid duplication.

  441.               pendingCover = data.url;

  442.             } else {

  443.               uploaded.push({ url: data.url });

  444.             }

  445.           }

  446.         }

  447.       } catch (err) {

  448.         console.error('Upload failed for', file.name, err);

  449.         showToast(`Failed to process "${file.name}".`);

  450.         setPdfProgress(null);

  451.       }

  452.     }

  453. 

  454.     setIsEditing(prev => ({

  455.       ...prev,

  456.       imageUrl: (startedWithoutCover && pendingCover) ? pendingCover : (prev?.imageUrl || ''),

  457.       extraMedia: [...(prev?.extraMedia || []), ...uploaded],

  458.     }));

  459.     setUploading(prev => ({ ...prev, extraMedia: false }));

  460.     e.target.value = '';

  461.   };

  462. 

  463.   const removeExtraMedia = (index: number) => {

  464.     setIsEditing(prev => ({

  465.       ...prev,

  466.       extraMedia: (prev?.extraMedia || []).filter((_, i) => i !== index),

  467.     }));

  468.   };

  469. 

  470.   const moveExtraMedia = (index: number, direction: 'up' | 'down') => {

  471.     setIsEditing(prev => {

  472.       const items = [...(prev?.extraMedia || [])];

  473.       if (direction === 'up' && index > 0) {

  474.         [items[index - 1], items[index]] = [items[index], items[index - 1]];

  475.       } else if (direction === 'down' && index < items.length - 1) {

  476.         [items[index + 1], items[index]] = [items[index], items[index + 1]];

  477.       } else {

  478.         return prev;

  479.       }

  480.       return { ...prev, extraMedia: items };

  481.     });

  482.   };

  483. 

  484.   const toggleAutoplay = (index: number) => {

  485.     setIsEditing(prev => ({

  486.       ...prev,

  487.       extraMedia: (prev?.extraMedia || []).map((m, i) =>

  488.         i === index ? { ...m, autoplay: !m.autoplay } : m

  489.       ),

  490.     }));

  491.   };

  492. 

  493.   const toggleMuted = (index: number) => {

  494.     setIsEditing(prev => ({

  495.       ...prev,

  496.       extraMedia: (prev?.extraMedia || []).map((m, i) =>

  497.         i === index ? { ...m, muted: !m.muted } : m

  498.       ),

  499.     }));

  500.   };

  501. 

  502.   const handleSaveCard = async () => {

  503.     if (!isEditing) return;

  504. 

  505.     // External Link: URL obbligatorio (feedback immediato, ribadito anche lato server)

  506.     if (isEditing.cardType === 'EXTERNAL_LINK' && !isEditing.actionUrl?.trim()) {

  507.       showToast('URL is required for External Link cards', 'error');

  508.       return;

  509.     }

  510. 

  511.     const generateSafeId = () => 'card-' + Date.now().toString(36) + Math.random().toString(36).substring(2);

  512.     const newCard = { ...isEditing, id: isEditing.id || generateSafeId() } as Card;

  513. 

  514.     const res = await fetch(withBasePath('/api/cards'), {

  515.       method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newCard)

  516.     });

  517. 

  518.     if (!res.ok) {

  519.       let message = 'Save error';

  520.       try {

  521.         const body = await res.json();

  522.         if (res.status === 400 && Array.isArray(body?.errors) && body.errors.length > 0) {

  523.           const first = body.errors[0];

  524.           message = first.limit != null

  525.             ? `${first.field}: ${first.message} (${first.actual} / ${first.limit})`

  526.             : `${first.field}: ${first.message}`;

  527.         } else if (body?.error) {

  528.           message = body.error;

  529.         }

  530.       } catch {}

  531.       showToast(message, 'error');

  532.       return; // keep the editor open so the admin can fix

  533.     }

  534. 

  535.     setCards(prev => {

  536.       const exists = prev.find(c => c.id === newCard.id);

  537.       return exists ? prev.map(c => c.id === newCard.id ? newCard : c) : [...prev, newCard];

  538.     });

  539.     setIsEditing(null);

  540.   };

  541. 

  542.   const handleDeleteCard = (id: string) => {

  543.     // Replace window.confirm with our custom dialog

  544.     setConfirmDialog({

  545.       message: 'Are you sure you want to delete this card? This action cannot be undone.',

  546.       onConfirm: async () => {

  547.         await fetch(withBasePath(`/api/cards?id=${id}`), { method: 'DELETE' });

  548.         setCards(prev => prev.filter(c => c.id !== id));

  549.         setConfirmDialog(null);

  550.         showToast('Card successfully deleted.');

  551.       }

  552.     });

  553.   };

  554. 

  555.   const moveCard = async (index: number, direction: 'up' | 'down') => {

  556.     const newCards = [...cards];

  557.     

  558.     if (direction === 'up' && index > 0) {

  559.       [newCards[index - 1], newCards[index]] = [newCards[index], newCards[index - 1]];

  560.     } else if (direction === 'down' && index < newCards.length - 1) {

  561.       [newCards[index + 1], newCards[index]] = [newCards[index], newCards[index + 1]];

  562.     } else {

  563.       return; // Do nothing if trying to move out of bounds

  564.     }

  565.     

  566.     // Recalculate displayOrder for the whole array

  567.     const updatedCards = newCards.map((c, i) => ({ ...c, displayOrder: i }));

  568.     

  569.     // Optimistically update the UI

  570.     setCards(updatedCards);

  571.     

  572.     // Persist the new order to the backend

  573.     await fetch(withBasePath('/api/cards'), {

  574.       method: 'PUT',

  575.       headers: { 'Content-Type': 'application/json' },

  576.       body: JSON.stringify(updatedCards)

  577.     });

  578.   };

  579. 

  580.   const handleSavePortal = async () => {

  581.     setSavingPortal(true);

  582.     await fetch(withBasePath('/api/portals'), {

  583.       method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(portal)

  584.     });

  585.     setSavingPortal(false);

  586.     showToast('Portal settings saved successfully!'); // Replaced window.alert

  587.   };

  588. 

  589.   const handleBackupDownload = () => {

  590.     window.location.href = withBasePath('/api/admin/backup');

  591.   };

  592. 

  593.   const [restoring, setRestoring] = useState(false);

  594.   const handleRestoreUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {

  595.     const file = e.target.files?.[0];

  596.     e.target.value = '';

  597.     if (!file) return;

  598.     if (!window.confirm('Restore will overwrite all current data (cards, portal, media, fonts). Continue?')) return;

  599. 

  600.     setRestoring(true);

  601.     try {

  602.       const fd = new FormData();

  603.       fd.append('file', file);

  604.       const res = await fetch(withBasePath('/api/admin/restore'), { method: 'POST', body: fd });

  605.       const data = await res.json().catch(() => ({}));

  606.       if (!res.ok) {

  607.         showToast(data?.error || `Restore error (${res.status})`, 'error');

  608.         return;

  609.       }

  610.       showToast(`Restore completed: ${data.restored?.cards ?? 0} cards, ${data.restored?.portals ?? 0} portals. Reloading…`);

  611.       setTimeout(() => window.location.reload(), 1200);

  612.     } catch (err) {

  613.       showToast(`Network error: ${(err as Error).message}`, 'error');

  614.     } finally {

  615.       setRestoring(false);

  616.     }

  617.   };

  618. 

  619.   // Factory preset: la sezione è sempre visibile (per chi accede a /admin); solo

  620.   // il bottone "Salva come preset" è gated da FACTORY_PRESET_SAVE_ENABLED.

  621.   const [factoryPreset, setFactoryPreset] = useState<{ exists: boolean; sizeBytes?: number; modifiedAt?: string } | null>(null);

  622.   const [savingPreset, setSavingPreset] = useState(false);

  623.   const [factoryResetting, setFactoryResetting] = useState(false);

  624. 

  625.   const refreshFactoryPreset = async () => {

  626.     try {

  627.       const res = await fetch(withBasePath('/api/admin/factory-preset'));

  628.       if (res.ok) setFactoryPreset(await res.json());

  629.     } catch { /* ignore */ }

  630.   };

  631.   useEffect(() => {

  632.     void refreshFactoryPreset();

  633.   }, []);

  634. 

  635.   const handleSaveFactoryPreset = async () => {

  636.     const msg = factoryPreset?.exists

  637.       ? 'Overwrite the existing factory preset with the current state?'

  638.       : 'Save the current state as factory preset?';

  639.     if (!window.confirm(msg)) return;

  640.     setSavingPreset(true);

  641.     try {

  642.       const res = await fetch(withBasePath('/api/admin/factory-preset'), { method: 'POST' });

  643.       const data = await res.json().catch(() => ({}));

  644.       if (!res.ok) {

  645.         showToast(data?.error || `Error (${res.status})`, 'error');

  646.         return;

  647.       }

  648.       showToast('Factory preset updated.');

  649.       await refreshFactoryPreset();

  650.     } catch (err) {

  651.       showToast(`Network error: ${(err as Error).message}`, 'error');

  652.     } finally {

  653.       setSavingPreset(false);

  654.     }

  655.   };

  656. 

  657.   const handleFactoryReset = async () => {

  658.     if (!window.confirm('FACTORY RESET — all current data will be replaced with the factory preset. Continue?')) return;

  659.     setFactoryResetting(true);

  660.     try {

  661.       const res = await fetch(withBasePath('/api/admin/factory-reset'), { method: 'POST' });

  662.       const data = await res.json().catch(() => ({}));

  663.       if (!res.ok) {

  664.         showToast(data?.error || `Error (${res.status})`, 'error');

  665.         return;

  666.       }

  667.       showToast(`Factory reset completed: ${data.restored?.cards ?? 0} cards, ${data.restored?.portals ?? 0} portals. Reloading…`);

  668.       setTimeout(() => window.location.reload(), 1200);

  669.     } catch (err) {

  670.       showToast(`Network error: ${(err as Error).message}`, 'error');

  671.     } finally {

  672.       setFactoryResetting(false);

  673.     }

  674.   };

  675. 

  676.   // Shared Input Classes for high contrast

  677.   const inputClasses = "w-full border border-gray-300 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-400";

  678. 

  679.   return (

  680.     <div className="min-h-screen bg-gray-50 font-sans pb-12">

  681.       {/* Top Header */}

  682.       <div className="bg-blue-900 text-white shadow-md py-6 px-4">

  683.         <div className="max-w-5xl mx-auto flex justify-between items-center">

  684.           <div>

  685.             <h1 className="text-2xl font-bold">Captive Portal CMS</h1>

  686.             <p className="text-sm text-blue-200">Local Administration</p>

  687.           </div>

  688.           <a href={withBasePath('/')} target="_blank" className="bg-blue-800 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm transition-colors">

  689.             View Live Portal ↗

  690.           </a>

  691.         </div>

  692.       </div>

  693. 

  694.       <div className="max-w-5xl mx-auto mt-8 px-4">

  695.         {/* Tab Navigation */}

  696.         <div className="flex space-x-2 mb-6">

  697.           <button onClick={() => setActiveTab('cards')} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'cards' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>

  698.             Manage Cards

  699.           </button>

  700.           <button onClick={() => setActiveTab('settings')} className={`px-6 py-3 rounded-t-lg font-bold transition-colors ${activeTab === 'settings' ? 'bg-white text-blue-700 border-t-4 border-blue-600 shadow-sm' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`}>

  701.             Portal Settings

  702.           </button>

  703.         </div>

  704. 

  705.         <div className="bg-white rounded-b-xl rounded-tr-xl shadow-sm border border-gray-200 overflow-hidden min-h-[500px]">

  706.           

  707.           {/* TAB: CARDS */}

  708.           {activeTab === 'cards' && (

  709.             <div className="p-6 md:p-8">

  710.               <div className="flex justify-between items-center mb-8 border-b pb-4">

  711.                 <h2 className="text-xl font-bold text-gray-800">Card Grid</h2>

  712.                 <button onClick={() => setIsEditing({ title: '', cardType: 'INFO_PAGE', displayOrder: cards.length })} className="bg-blue-600 text-white px-5 py-2.5 rounded-lg shadow-sm hover:bg-blue-700 font-medium">

  713.                   + Add New Card

  714.                 </button>

  715.               </div>

  716. 

  717.               <div className="space-y-3 mb-8">

  718.                 {cards.length === 0 && <p className="text-gray-500 italic text-center py-8">No cards available. Create one to get started.</p>}

  719.                 {cards.map((card, idx) => (

  720.                   // CHANGED: flex-col on mobile, flex-row on sm+, added gap-4 for mobile spacing

  721.                   <div key={card.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors gap-4">

  722.                     <div className="flex items-center gap-4">

  723.                       {(() => {

  724.                         const previewUrl = card.imageUrl || card.extraMedia?.[0]?.url || '';

  725.                         if (!previewUrl) {

  726.                           return <div className="w-16 h-16 bg-gray-200 rounded-md shadow-sm flex items-center justify-center text-gray-400 text-xs shrink-0">No Image</div>;

  727.                         }

  728.                         return isVideoUrl(previewUrl)

  729.                           ? <video src={withBasePath(previewUrl)} className="w-16 h-16 object-cover rounded-md shadow-sm shrink-0" muted playsInline preload="metadata" />

  730.                           : <img src={withBasePath(previewUrl)} className="w-16 h-16 object-cover rounded-md shadow-sm shrink-0" alt="" />;

  731.                       })()}

  732.                       <div>

  733.                         <span className="font-semibold text-gray-800 block">{card.title}</span>

  734.                         <span className="text-xs text-gray-500 uppercase tracking-wider">

  735.                           {card.cardType}

  736.                           {card.extraMedia && card.extraMedia.length > 0 && (

  737.                             <span className="text-gray-400 normal-case tracking-normal ml-2">[{card.extraMedia.length}]</span>

  738.                           )}

  739.                           {card.cardType === 'FULLSCREEN_LOCK' && (

  740.                             <span className="ml-2 bg-red-100 text-red-700 px-2 py-0.5 rounded font-bold text-[10px] tracking-wider">LOCK ACTIVE</span>

  741.                           )}

  742.                         </span>

  743.                       </div>

  744.                     </div>

  745.                     

  746.                     {/* CHANGED: flex-wrap to ensure buttons don't overflow on small screens, w-full on mobile */}

  747.                     <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto justify-end">

  748.                       <button onClick={() => moveCard(idx, 'up')} className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded" title="Move Up">↑</button>

  749.                       <button onClick={() => moveCard(idx, 'down')} className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded" title="Move Down">↓</button>

  750.                       <div className="w-px h-6 bg-gray-300 mx-1 hidden sm:block"></div>

  751.                       <button onClick={() => setIsEditing(card)} className="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded font-medium">Edit</button>

  752.                       <button onClick={() => handleDeleteCard(card.id)} className="px-4 py-2 text-red-600 hover:bg-red-50 rounded font-medium">Delete</button>

  753.                     </div>

  754.                   </div>

  755.                 ))}

  756.               </div>

  757.             </div>

  758.           )}

  759. 

  760.           {/* TAB: SETTINGS */}

  761.           {activeTab === 'settings' && (

  762.             <div className="p-6 md:p-8">

  763.               <h2 className="text-xl font-bold text-gray-800 mb-8 border-b pb-4">Global Portal Settings</h2>

  764.               

  765.               <div className="grid grid-cols-1 md:grid-cols-2 gap-10">

  766.                 <div className="space-y-6">

  767.                   <div>

  768.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Portal Title</label>

  769.                     <input type="text" maxLength={PORTAL_LIMITS.title} value={portal.title || ''} onChange={e => setPortal({...portal, title: e.target.value})} className={inputClasses} />

  770.                     <CharCounter value={portal.title} limit={PORTAL_LIMITS.title} />

  771.                   </div>

  772. 

  773.                   <div>

  774.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Welcome Text</label>

  775.                     <RichTextMini

  776.                       value={portal.welcomeText || ''}

  777.                       onChange={html => setPortal({ ...portal, welcomeText: html })}

  778.                       limit={PORTAL_LIMITS.welcomeText}

  779.                     />

  780.                   </div>

  781. 

  782.                   <div className="flex gap-8">

  783.                     <div>

  784.                       <label className="block text-sm font-semibold text-gray-700 mb-1">Theme Color</label>

  785.                       <div className="flex items-center gap-4">

  786.                         <input type="color" value={portal.themeColor || '#1e3a8a'} onChange={e => setPortal({...portal, themeColor: e.target.value})} className="h-12 w-12 rounded cursor-pointer border-0 p-0" />

  787.                         <span className="text-gray-900 font-mono font-medium">{portal.themeColor || '#1e3a8a'}</span>

  788.                       </div>

  789.                     </div>

  790.                     

  791.                     {/* NEW: Max Columns Setting updated for 3 */}

  792.                     <div className="flex-1">

  793.                       <label className="block text-sm font-semibold text-gray-700 mb-1">Grid Max Columns: {portal.maxGridColumns || 5}</label>

  794.                       <input 

  795.                         type="range" 

  796.                         min="3" 

  797.                         max="8" 

  798.                         value={portal.maxGridColumns || 5} 

  799.                         onChange={e => setPortal({...portal, maxGridColumns: parseInt(e.target.value)})}

  800.                         className="w-full mt-3 accent-blue-600"

  801.                       />

  802.                       <div className="flex justify-between text-xs text-gray-400 mt-1">

  803.                         <span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>

  804.                       </div>

  805.                     </div>

  806.                   </div>

  807. 

  808.                   <div>

  809.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Portal font</label>

  810.                     <style dangerouslySetInnerHTML={{ __html: availableFonts.map(f => `

  811. @font-face {

  812.   font-family: '${previewFontFamily(f)}';

  813.   src: url('${withBasePath('/api/fonts?name=' + encodeURIComponent(f))}') format('${fontFormatFromName(f)}');

  814.   font-display: swap;

  815. }`).join('') }} />

  816.                     <StyledSelect<string>

  817.                       value={portal.fontFamily ?? ''}

  818.                       onChange={(v) => setPortal({ ...portal, fontFamily: v })}

  819.                       options={[

  820.                         { value: '', label: 'Sistema (Arial)' },

  821.                         ...availableFonts.map(f => ({

  822.                           value: f,

  823.                           label: f.replace(/\.(woff2?|ttf|otf)$/i, ''),

  824.                           style: { fontFamily: `'${previewFontFamily(f)}', Arial, Helvetica, sans-serif` },

  825.                         })),

  826.                       ]}

  827.                     />

  828.                   </div>

  829.                 </div>

  830. 

  831.                 <div className="space-y-6">

  832.                   {/* Logo Upload with Remove Button */}

  833.                   <div>

  834.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Logo Image</label>

  835.                     <label className="inline-block cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold text-sm px-4 py-2 rounded-full transition-colors">

  836.                       <input type="file" accept="image/*" onChange={e => handleUpload(e, 'logoUrl', true)} hidden />

  837.                       Choose image…

  838.                     </label>

  839.                     {uploading['logoUrl'] && <span className="text-xs text-blue-500 ml-3">Uploading...</span>}

  840.                     {portal.logoUrl && (

  841.                       <div className="mt-2 bg-gray-100 p-4 rounded inline-block relative border">

  842.                         <img src={withBasePath(portal.logoUrl)} className="h-16 object-contain" alt="Logo Preview" />

  843.                         <a href={withBasePath(portal.logoUrl)} download={extractFileName(portal.logoUrl)} className="absolute -top-2 right-6 bg-gray-700 hover:bg-gray-800 text-white w-6 h-6 rounded-full text-xs font-bold shadow flex items-center justify-center" title="Download" aria-label="Download logo">⬇</a>

  844.                         <button onClick={() => setPortal({...portal, logoUrl: ''})} className="absolute -top-2 -right-2 bg-red-500 text-white w-6 h-6 rounded-full text-xs font-bold hover:bg-red-600 shadow">✕</button>

  845.                       </div>

  846.                     )}

  847.                   </div>

  848. 

  849.                   {/* Hero Upload with Remove Button */}

  850.                   <div>

  851.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Hero Background Image</label>

  852.                     <label className="inline-block cursor-pointer bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold text-sm px-4 py-2 rounded-full transition-colors">

  853.                       <input type="file" accept="image/*" onChange={e => handleUpload(e, 'heroImageUrl', true)} hidden />

  854.                       Choose image…

  855.                     </label>

  856.                     {uploading['heroImageUrl'] && <span className="text-xs text-blue-500 ml-3">Uploading...</span>}

  857.                     {portal.heroImageUrl && (

  858.                       <div className="mt-2 relative rounded shadow border inline-block w-full">

  859.                         <img src={withBasePath(portal.heroImageUrl)} className="h-32 w-full object-cover rounded" alt="Hero Preview" />

  860.                         <a href={withBasePath(portal.heroImageUrl)} download={extractFileName(portal.heroImageUrl)} className="absolute top-2 right-12 bg-gray-700 hover:bg-gray-800 text-white w-8 h-8 flex items-center justify-center rounded-full text-sm font-bold shadow-lg" title="Download" aria-label="Download hero">⬇</a>

  861.                         <button onClick={() => setPortal({...portal, heroImageUrl: ''})} className="absolute top-2 right-2 bg-red-500 text-white w-8 h-8 flex items-center justify-center rounded-full text-sm font-bold hover:bg-red-600 shadow-lg">✕</button>

  862.                       </div>

  863.                     )}

  864.                   </div>

  865. 

  866.                   <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-3">

  867.                      <label className="flex items-center gap-3 cursor-pointer">

  868.                         <input type="checkbox" checked={!!portal.fadeHeroImage} onChange={e => setPortal({...portal, fadeHeroImage: e.target.checked})} className="w-5 h-5 text-blue-600 rounded" />

  869.                         <div>

  870.                           <span className="block text-sm font-semibold text-gray-900">Fade Image into Background Color</span>

  871.                           <span className="block text-xs text-gray-600">Creates a smooth gradient from the top of the image into the solid theme color at the bottom.</span>

  872.                         </div>

  873.                      </label>

  874.                      <label className="flex items-center gap-3 cursor-pointer">

  875.                         <input

  876.                           type="checkbox"

  877.                           checked={portal.externalLinkEnabled ?? EXTERNAL_LINK_DEFAULT}

  878.                           onChange={e => setPortal({...portal, externalLinkEnabled: e.target.checked})}

  879.                           className="w-5 h-5 text-blue-600 rounded"

  880.                         />

  881.                         <div>

  882.                           <span className="block text-sm font-semibold text-gray-900">Enable &ldquo;External Link&rdquo; type in the dropdown menu.</span>

  883.                           <span className="block text-xs text-gray-600">Existing cards of this type will still remain visible and clickable, even if you disable the &ldquo;External Link&rdquo; type.</span>

  884.                         </div>

  885.                      </label>

  886.                   </div>

  887.                 </div>

  888.               </div>

  889. 

  890.               <div className="mt-10 pt-6 border-t border-gray-200">

  891.                 <h3 className="text-sm font-bold uppercase tracking-wider text-gray-600 mb-3">Backup &amp; Restore</h3>

  892.                 <p className="text-xs text-gray-500 mb-4">

  893.                   The backup contains cards, portal configuration, media (images, videos, PDFs), and uploaded fonts. Restoring overwrites the current state. Clicking the &ldquo;Save backup (ZIP)&rdquo; button saves the Cards structure as <code>interceptop-backup-YYYYMMDD-hhmmss.zip</code>.

  894.                 </p>

  895.                 <div className="flex flex-wrap gap-3">

  896.                   <button

  897.                     type="button"

  898.                     onClick={handleBackupDownload}

  899.                     className="bg-gray-800 text-white px-5 py-2.5 rounded-lg hover:bg-gray-900 font-medium shadow-sm"

  900.                   >

  901.                     ⬇ Save backup (ZIP)

  902.                   </button>

  903.                   <label className={`cursor-pointer inline-flex items-center bg-amber-600 text-white px-5 py-2.5 rounded-lg hover:bg-amber-700 font-medium shadow-sm ${restoring ? 'opacity-60 cursor-not-allowed' : ''}`}>

  904.                     <input

  905.                       type="file"

  906.                       accept=".zip,application/zip,application/x-zip-compressed"

  907.                       onChange={handleRestoreUpload}

  908.                       disabled={restoring}

  909.                       hidden

  910.                     />

  911.                     {restoring ? 'Restoring…' : '⤴ Restore from ZIP'}

  912.                   </label>

  913.                 </div>

  914.               </div>

  915. 

  916.               <div className="mt-8 pt-6 border-t border-gray-200">

  917.                 <h3 className="text-sm font-bold uppercase tracking-wider text-gray-600 mb-3">Factory Preset</h3>

  918.                 <p className="text-xs text-gray-500 mb-2">

  919.                   &ldquo;Factory&rdquo; state restorable with one click. The preset (<code>factory/preset.zip</code>) is prepared on the development machine and distributed to MajorNet machines.

  920.                 </p>

  921.                 <p className="text-xs text-gray-700 mb-4">

  922.                   Current preset: {factoryPreset === null ? '…'

  923.                     : factoryPreset.exists

  924.                       ? <span className="text-green-700 font-medium">present · {((factoryPreset.sizeBytes ?? 0) / (1024 * 1024)).toFixed(1)} MB · {factoryPreset.modifiedAt ? new Date(factoryPreset.modifiedAt).toLocaleString('en-GB') : '?'}</span>

  925.                       : <span className="text-gray-400 italic">no preset configured</span>}

  926.                 </p>

  927.                 <div className="flex flex-wrap gap-3">

  928.                   <button

  929.                     type="button"

  930.                     onClick={handleFactoryReset}

  931.                     disabled={factoryResetting || !factoryPreset?.exists}

  932.                     title={factoryPreset?.exists ? undefined : 'No preset configured'}

  933.                     className="bg-red-700 text-white px-5 py-2.5 rounded-lg hover:bg-red-800 font-medium shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"

  934.                   >

  935.                     {factoryResetting ? 'Reset in progress…' : '🏭 Factory Reset'}

  936.                   </button>

  937.                   {FACTORY_PRESET_SAVE_ENABLED && (

  938.                     <button

  939.                       type="button"

  940.                       onClick={handleSaveFactoryPreset}

  941.                       disabled={savingPreset}

  942.                       title="Developer function: save the current state as a new factory preset"

  943.                       className="bg-emerald-700 text-white px-5 py-2.5 rounded-lg hover:bg-emerald-800 font-medium shadow-sm disabled:opacity-60"

  944.                     >

  945.                       {savingPreset ? 'Saving…' : '💾 Save as Factory Preset (dev)'}

  946.                     </button>

  947.                   )}

  948.                 </div>

  949.               </div>

  950. 

  951.               <div className="mt-10 pt-6 border-t border-gray-200 flex justify-end">

  952.                 <button onClick={handleSavePortal} disabled={savingPortal} className="bg-blue-600 text-white px-10 py-3 rounded-lg hover:bg-blue-700 font-bold shadow disabled:opacity-50 transition-colors">

  953.                   {savingPortal ? 'Saving...' : 'Save Portal Settings'}

  954.                 </button>

  955.               </div>

  956.             </div>

  957.           )}

  958. 		  

  959. 		  </div> 

  960.       </div> 

  961. 

  962.       {/* MODAL FOR EDITING/CREATING CARDS */}

  963.       {isEditing && (

  964.         <div 

  965.           className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4 transition-opacity"

  966.           onClick={() => setIsEditing(null)} // Click outside to close

  967.         >

  968.           <div 

  969.             className="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto shadow-2xl p-6 md:p-8 relative animate-in fade-in zoom-in-95 duration-200"

  970.             onClick={(e) => e.stopPropagation()} // Prevent inside clicks from closing

  971.           >

  972.             <button 

  973.               onClick={() => setIsEditing(null)}

  974.               className="absolute top-6 right-6 text-gray-400 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center transition-colors"

  975.             >

  976.               ✕

  977.             </button>

  978. 

  979.             <h3 className="text-2xl font-bold mb-6 text-gray-900 border-b pb-4">

  980.               {isEditing.id ? 'Edit Card' : 'Create New Card'}

  981.             </h3>

  982.             

  983.             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">

  984.               <div className="space-y-5">

  985.                 <div>

  986.                   <label className="block text-sm font-semibold text-gray-800 mb-1">Title</label>

  987.                   <input type="text" maxLength={CARD_LIMITS.title} value={isEditing.title || ''} onChange={e => setIsEditing({...isEditing, title: e.target.value})} className={inputClasses} placeholder="e.g., Local History" />

  988.                   <CharCounter value={isEditing.title} limit={CARD_LIMITS.title} />

  989.                 </div>

  990.                 <div>

  991.                   <label className="block text-sm font-semibold text-gray-800 mb-1">Card Type</label>

  992.                   <StyledSelect<CardType>

  993.                     value={(isEditing.cardType || 'INFO_PAGE') as CardType}

  994.                     onChange={(v) => setIsEditing({ ...isEditing, cardType: v })}

  995.                     options={[

  996.                       { value: 'INFO_PAGE', label: 'Info Page' },

  997.                       { value: 'IMAGE_GALLERY', label: 'Image Gallery' },

  998.                       { value: 'BOOK', label: 'Flip-Book' },

  999.                       { value: 'FULLSCREEN_LOCK', label: 'Fullscreen Lock (kiosk)' },

  1000.                       ...(externalLinksOn ? [{ value: 'EXTERNAL_LINK' as CardType, label: 'External Link' }] : []),

  1001.                     ]}

  1002.                   />

  1003.                 </div>

  1004.                 {isEditing.cardType === 'FULLSCREEN_LOCK' && (

  1005.                   <div className="bg-red-50 border border-red-200 rounded-lg p-4">

  1006.                     <p className="text-sm font-semibold text-red-800">⚠ Kiosk Lock Mode</p>

  1007.                     <p className="text-xs text-red-700 mt-1">

  1008.                       This card will take full control of the public portal. All other cards will be hidden until you remove this one.

  1009.                       Upload an image or video as &quot;Full-screen content&quot; in the section on the right.

  1010.                     </p>

  1011.                   </div>

  1012.                 )}

  1013.                 {isEditing.cardType !== 'FULLSCREEN_LOCK' && (isEditing.cardType === 'EXTERNAL_LINK' ? (

  1014.                   <>

  1015.                     <div>

  1016.                       <label className="block text-sm font-semibold text-gray-800 mb-1">URL <span className="text-red-600">*</span></label>

  1017.                       <input

  1018.                         type="url"

  1019.                         maxLength={CARD_LIMITS.actionUrl}

  1020.                         value={isEditing.actionUrl || ''}

  1021.                         onChange={e => setIsEditing({ ...isEditing, actionUrl: e.target.value })}

  1022.                         className={inputClasses}

  1023.                         placeholder="https://example.com/page"

  1024.                       />

  1025.                       <CharCounter value={isEditing.actionUrl} limit={CARD_LIMITS.actionUrl} />

  1026.                     </div>

  1027.                     <div>

  1028.                       <label className="block text-sm font-semibold text-gray-800 mb-1">Link text</label>

  1029.                       <input

  1030.                         type="text"

  1031.                         maxLength={CARD_LIMITS.shortDescription}

  1032.                         value={isEditing.shortDescription || ''}

  1033.                         onChange={e => setIsEditing({ ...isEditing, shortDescription: e.target.value })}

  1034.                         className={inputClasses}

  1035.                         placeholder="e.g. Visit the official site"

  1036.                       />

  1037.                       <CharCounter value={isEditing.shortDescription} limit={CARD_LIMITS.shortDescription} />

  1038.                       <p className="text-xs text-gray-500 mt-1">Text displayed as a clickable link in the modal. If empty, the URL itself is shown.</p>

  1039.                     </div>

  1040.                     <div className="bg-gray-50 p-3 rounded-lg border border-gray-200">

  1041.                       <label className="flex items-start gap-3 cursor-pointer">

  1042.                         <input

  1043.                           type="checkbox"

  1044.                           checked={!!isEditing.redirectOnClick}

  1045.                           onChange={e => setIsEditing({ ...isEditing, redirectOnClick: e.target.checked })}

  1046.                           className="w-5 h-5 text-blue-600 rounded mt-0.5"

  1047.                         />

  1048.                         <div>

  1049.                           <span className="block text-sm font-semibold text-gray-900">Redirect on click</span>

  1050.                           <span className="block text-xs text-gray-600">Cliccando la card sul portale pubblico, il browser apre direttamente l&rsquo;URL senza mostrare il modale.</span>

  1051.                         </div>

  1052.                       </label>

  1053.                     </div>

  1054.                   </>

  1055.                 ) : (

  1056.                   <div>

  1057.                     <label className="block text-sm font-semibold text-gray-800 mb-1">Short Description</label>

  1058.                     <textarea maxLength={CARD_LIMITS.shortDescription} value={isEditing.shortDescription || ''} onChange={e => setIsEditing({ ...isEditing, shortDescription: e.target.value })} className={`${inputClasses} h-24 resize-none`} placeholder="Brief summary..." />

  1059.                     <CharCounter value={isEditing.shortDescription} limit={CARD_LIMITS.shortDescription} />

  1060.                   </div>

  1061.                 ))}

  1062.                 {isEditing.cardType !== 'BOOK' && isEditing.cardType !== 'FULLSCREEN_LOCK' && (

  1063.                 <div className="bg-gray-50 p-3 rounded-lg border border-gray-200 space-y-3">

  1064.                   <label className="flex items-start gap-3 cursor-pointer">

  1065.                     <input

  1066.                       type="checkbox"

  1067.                       checked={!!isEditing.autoFullscreen}

  1068.                       onChange={e => setIsEditing({ ...isEditing, autoFullscreen: e.target.checked })}

  1069.                       className="w-5 h-5 text-blue-600 rounded mt-0.5"

  1070.                     />

  1071.                     <div>

  1072.                       <span className="block text-sm font-semibold text-gray-900">Auto fullscreen</span>

  1073.                       <span className="block text-xs text-gray-600">Open the gallery in fullscreen immediately when the user clicks this card.</span>

  1074.                     </div>

  1075.                   </label>

  1076.                   <label className="flex items-start gap-3 cursor-pointer">

  1077.                     <input

  1078.                       type="checkbox"

  1079.                       checked={!!isEditing.skipPreview}

  1080.                       onChange={e => setIsEditing({ ...isEditing, skipPreview: e.target.checked })}

  1081.                       className="w-5 h-5 text-blue-600 rounded mt-0.5"

  1082.                     />

  1083.                     <div>

  1084.                       <span className="block text-sm font-semibold text-gray-900">Cover not in the gallery</span>

  1085.                       <span className="block text-xs text-gray-600">The cover stays as the card thumbnail only. Combine with &ldquo;Auto fullscreen&rdquo; to jump straight into the gallery items.</span>

  1086.                     </div>

  1087.                   </label>

  1088.                 </div>

  1089.                 )}

  1090.               </div>

  1091.               <div className="space-y-5">

  1092.                 {/* Cover Image — per FULLSCREEN_LOCK è il contenuto kiosk a tutto schermo e accetta anche video */}

  1093.                 <div>

  1094.                   <label className="block text-sm font-semibold text-gray-800 mb-1">

  1095.                     {isEditing.cardType === 'FULLSCREEN_LOCK'

  1096.                       ? <>Full-screen content <span className="text-gray-400 font-normal text-xs">(image or video)</span></>

  1097.                       : <>Cover Image <span className="text-gray-400 font-normal text-xs">(shown in grid)</span></>}

  1098.                   </label>

  1099.                   <div className="border-2 border-dashed border-gray-300 rounded-lg p-3 hover:bg-gray-50 transition-colors">

  1100.                     <label className="inline-block cursor-pointer bg-blue-50 hover:bg-blue-100 text-blue-700 font-semibold text-sm px-4 py-2 rounded-full transition-colors">

  1101.                       <input

  1102.                         type="file"

  1103.                         accept={isEditing.cardType === 'FULLSCREEN_LOCK' ? 'image/*,video/mp4,video/webm,.mp4,.webm,.mov,.m4v' : 'image/*'}

  1104.                         onChange={e => handleUpload(e, 'imageUrl')}

  1105.                         hidden

  1106.                       />

  1107.                       {isEditing.cardType === 'FULLSCREEN_LOCK' ? 'Choose image or video…' : 'Choose image…'}

  1108.                     </label>

  1109.                     {uploading['imageUrl'] && <p className="mt-2 text-sm text-blue-600 font-medium">Uploading...</p>}

  1110.                   </div>

  1111.                   {isEditing.imageUrl && (

  1112.                     <div className="mt-3 relative rounded-lg overflow-hidden border border-gray-200 group">

  1113.                       {isVideoUrl(isEditing.imageUrl) ? (

  1114.                         <video src={withBasePath(isEditing.imageUrl)} className="w-full h-32 object-cover" muted playsInline />

  1115.                       ) : (

  1116.                         <img src={withBasePath(isEditing.imageUrl)} className="w-full h-32 object-cover" alt="Cover preview" />

  1117.                       )}

  1118.                       <a

  1119.                         href={withBasePath(isEditing.imageUrl)}

  1120.                         download={extractFileName(isEditing.imageUrl)}

  1121.                         className="absolute top-2 right-12 bg-gray-700 hover:bg-gray-800 text-white w-8 h-8 rounded-full text-sm font-bold shadow opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"

  1122.                         title="Download"

  1123.                         aria-label="Download cover"

  1124.                       >⬇</a>

  1125.                       <button

  1126.                         onClick={() => setIsEditing({...isEditing, imageUrl: ''})}

  1127.                         className="absolute top-2 right-2 bg-red-500 text-white w-8 h-8 rounded-full text-sm font-bold shadow opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600"

  1128.                         title="Remove cover image"

  1129.                       >✕</button>

  1130.                     </div>

  1131.                   )}

  1132.                 </div>

  1133. 

  1134.                 {/* Gallery Media (images + videos + PDFs) — nascosta per INFO_PAGE (solo cover ammessa) e FULLSCREEN_LOCK (solo contenuto kiosk) */}

  1135.                 {isEditing.cardType !== 'INFO_PAGE' && isEditing.cardType !== 'FULLSCREEN_LOCK' && (

  1136.                 <div>

  1137.                   <label className="block text-sm font-semibold text-gray-800 mb-1">

  1138.                     Gallery Media <span className="text-gray-400 font-normal text-xs">(images, videos or PDFs — PDF pages become images)</span>

  1139.                   </label>

  1140.                   <div className="border-2 border-dashed border-gray-300 rounded-lg p-3 hover:bg-gray-50 transition-colors">

  1141.                     <label className="inline-block cursor-pointer bg-purple-50 hover:bg-purple-100 text-purple-700 font-semibold text-sm px-4 py-2 rounded-full transition-colors">

  1142.                       <input

  1143.                         type="file"

  1144.                         accept="image/*,video/*,application/pdf,.pdf,.mov,.qt,.mkv,.avi,.divx,.wmv,.asf,.flv,.f4v,.3gp,.3gpp,.3g2,.mts,.m2ts,.ts,.mpg,.mpeg,.vob,.mxf,.ogv,.ogg"

  1145.                         multiple

  1146.                         onChange={handleUploadExtraMedia}

  1147.                         hidden

  1148.                       />

  1149.                       Choose files…

  1150.                     </label>

  1151.                     {uploading['extraMedia'] && !pdfProgress && <p className="mt-2 text-sm text-purple-600 font-medium">Uploading...</p>}

  1152.                     {pdfProgress && (

  1153.                       <p className="mt-2 text-sm text-purple-600 font-medium">

  1154.                         Processing &ldquo;{pdfProgress.name}&rdquo;: page {pdfProgress.page} of {pdfProgress.total}

  1155.                       </p>

  1156.                     )}

  1157.                   </div>

  1158. 

  1159.                   {(isEditing.extraMedia || []).length > 0 && (

  1160.                     <div className="mt-3 space-y-2">

  1161.                       {(isEditing.extraMedia || []).map((item, i) => {

  1162.                         const video = isVideoUrl(item.url);

  1163.                         const tc = transcodeJobs[item.url];

  1164.                         const isTranscoding = !!tc && (tc.status === 'queued' || tc.status === 'running');

  1165.                         return (

  1166.                           <div key={item.url + i} className="flex items-center gap-3 p-2 bg-gray-50 border border-gray-200 rounded-lg">

  1167.                             <div className="relative w-16 h-16 rounded-md overflow-hidden bg-black shrink-0">

  1168.                               {video ? (

  1169.                                 <>

  1170.                                   <video src={withBasePath(item.url)} className="w-full h-full object-cover" muted preload="metadata" />

  1171.                                   <div className="absolute inset-0 flex items-center justify-center bg-black/30 text-white text-xl">▶</div>

  1172.                                 </>

  1173.                               ) : (

  1174.                                 <img src={withBasePath(item.url)} className="w-full h-full object-cover" alt="" />

  1175.                               )}

  1176.                               {isTranscoding && (

  1177.                                 <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/75 text-white text-[10px] font-semibold leading-tight gap-0.5">

  1178.                                   <span>Transcoding</span>

  1179.                                   <span>{Math.round((tc.progress || 0) * 100)}%</span>

  1180.                                 </div>

  1181.                               )}

  1182.                               <span className="absolute bottom-0 left-0 right-0 text-center text-white text-[10px] bg-black/60">{i + 1}</span>

  1183.                             </div>

  1184.                             <div className="flex-1 min-w-0">

  1185.                               <div className="text-xs font-semibold text-gray-700 uppercase tracking-wider">

  1186.                                 {video ? 'Video' : 'Image'}

  1187.                               </div>

  1188.                               {video && (

  1189.                                 <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1">

  1190.                                   <label className="flex items-center gap-2 cursor-pointer">

  1191.                                     <input

  1192.                                       type="checkbox"

  1193.                                       checked={!!item.autoplay}

  1194.                                       onChange={() => toggleAutoplay(i)}

  1195.                                       className="w-4 h-4 text-blue-600 rounded"

  1196.                                     />

  1197.                                     <span className="text-sm text-gray-700">Autoplay</span>

  1198.                                   </label>

  1199.                                   <label className="flex items-center gap-2 cursor-pointer">

  1200.                                     <input

  1201.                                       type="checkbox"

  1202.                                       checked={!!item.muted}

  1203.                                       onChange={() => toggleMuted(i)}

  1204.                                       className="w-4 h-4 text-blue-600 rounded"

  1205.                                     />

  1206.                                     <span className="text-sm text-gray-700">Muted</span>

  1207.                                   </label>

  1208.                                 </div>

  1209.                               )}

  1210.                             </div>

  1211.                             <button

  1212.                               onClick={() => moveExtraMedia(i, 'up')}

  1213.                               className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded shrink-0 disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:outline-none"

  1214.                               title="Move up"

  1215.                               aria-label="Move up"

  1216.                               disabled={i === 0}

  1217.                             >↑</button>

  1218.                             <button

  1219.                               onClick={() => moveExtraMedia(i, 'down')}

  1220.                               className="p-2 text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded shrink-0 disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:outline-none"

  1221.                               title="Move down"

  1222.                               aria-label="Move down"

  1223.                               disabled={i === (isEditing.extraMedia || []).length - 1}

  1224.                             >↓</button>

  1225.                             <a

  1226.                               href={withBasePath(item.url)}

  1227.                               download={extractFileName(item.url)}

  1228.                               className="bg-gray-500 hover:bg-gray-600 text-white w-8 h-8 rounded-full text-sm font-bold shrink-0 flex items-center justify-center"

  1229.                               title="Download"

  1230.                               aria-label="Download"

  1231.                             >⬇</a>

  1232.                             <button

  1233.                               onClick={() => removeExtraMedia(i)}

  1234.                               className="bg-red-500 hover:bg-red-600 text-white w-8 h-8 rounded-full text-sm font-bold shrink-0"

  1235.                               title="Remove"

  1236.                             >✕</button>

  1237.                           </div>

  1238.                         );

  1239.                       })}

  1240.                     </div>

  1241.                   )}

  1242.                 </div>

  1243.                 )}

  1244.               </div>

  1245.             </div>

  1246. 

  1247.             <div className="flex gap-3 pt-8 mt-6 border-t border-gray-200 justify-end">

  1248.               <button onClick={() => setIsEditing(null)} className="px-5 py-2.5 text-gray-700 hover:bg-gray-100 rounded-lg font-medium transition-colors">

  1249.                 Cancel

  1250.               </button>

  1251.               <button onClick={handleSaveCard} className="bg-green-600 text-white px-8 py-2.5 rounded-lg hover:bg-green-700 font-medium shadow-sm transition-colors">

  1252.                 Save Card

  1253.               </button>

  1254.             </div>

  1255.           </div>

  1256.         </div>

  1257.       )}

  1258. 	  

  1259. 	  {/* CUSTOM CONFIRM DIALOG */}

  1260.       {confirmDialog && (

  1261.         <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">

  1262.           <div className="bg-white rounded-xl shadow-2xl p-6 max-w-sm w-full animate-in zoom-in-95">

  1263.             <h3 className="text-xl font-bold text-gray-900 mb-2">Confirm Action</h3>

  1264.             <p className="text-gray-600 mb-6 leading-relaxed">{confirmDialog.message}</p>

  1265.             <div className="flex justify-end gap-3">

  1266.               <button 

  1267.                 onClick={() => setConfirmDialog(null)} 

  1268.                 className="px-4 py-2.5 text-gray-700 hover:bg-gray-100 rounded-lg font-medium transition-colors"

  1269.               >

  1270.                 Cancel

  1271.               </button>

  1272.               <button 

  1273.                 onClick={confirmDialog.onConfirm} 

  1274.                 className="px-6 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium transition-colors shadow-sm"

  1275.               >

  1276.                 Delete

  1277.               </button>

  1278.             </div>

  1279.           </div>

  1280.         </div>

  1281.       )}

  1282. 

  1283.       {/* CUSTOM TOAST NOTIFICATION */}

  1284.       {toast && (

  1285.         <div className={`fixed bottom-6 right-6 z-[70] text-white px-6 py-4 rounded-lg shadow-2xl flex items-start gap-3 animate-in slide-in-from-bottom-5 fade-in duration-300 max-w-md ${

  1286.           toast.type === 'error' ? 'bg-red-700' : 'bg-gray-900'

  1287.         }`}>

  1288.           <div className={`w-6 h-6 rounded-full flex items-center justify-center font-bold text-sm shrink-0 mt-0.5 ${

  1289.             toast.type === 'error' ? 'bg-white text-red-700' : 'bg-green-500 text-gray-900'

  1290.           }`}>

  1291.             {toast.type === 'error' ? '!' : '✓'}

  1292.           </div>

  1293.           <span className="font-medium leading-snug">{toast.message}</span>

  1294.         </div>

  1295.       )}

  1296. 

  1297.     </div>

  1298.   );

  1299. }