pollutri
/
captive-portal-cms
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
67 提交
2 分支
278 MiB
 
 
目录树: 1e135e7681
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '1e135e7681'
${ noResults }
captive-portal-cms/app/admin/page.tsx

1043 行
53 KiB
原始文件 Blame 文件历史 

  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 } from '@/lib/config';

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

  7. 

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

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

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

  11.   if (len < limit * 0.8) return null;

  12.   const overflow = len > limit;

  13.   return (

  14.     <p className={`text-xs mt-1 text-right ${overflow ? 'text-red-600 font-semibold' : 'text-gray-500'}`}>

  15.       {len} / {limit}

  16.     </p>

  17.   );

  18. }

  19. 

  20. function StyledSelect<T extends string>({

  21.   value,

  22.   onChange,

  23.   options,

  24. }: {

  25.   value: T;

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

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

  28. }) {

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

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

  31. 

  32.   useEffect(() => {

  33.     if (!open) return;

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

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

  36.     };

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

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

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

  40.     return () => {

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

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

  43.     };

  44.   }, [open]);

  45. 

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

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

  48.   const displayLabel = current?.label

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

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

  51.         : '');

  52.   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";

  53. 

  54.   return (

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

  56.       <button

  57.         type="button"

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

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

  60.       >

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

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

  63.       </button>

  64.       {open && (

  65.         <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">

  66.           {options.map(o => (

  67.             <button

  68.               key={o.value}

  69.               type="button"

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

  71.               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'}`}

  72.               style={o.style}

  73.             >

  74.               {o.label}

  75.             </button>

  76.           ))}

  77.         </div>

  78.       )}

  79.     </div>

  80.   );

  81. }

  82. 

  83. 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';

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

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

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

  87. 

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

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

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

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

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

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

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

  95. 

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

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

  98. 

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

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

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

  102. };

  103. 

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

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

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

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

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

  109. };

  110. 

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

  112.   const formData = new FormData();

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

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

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

  116.   return data.url || null;

  117. }

  118. 

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

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

  121.   try {

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

  123.     video.muted = true;

  124.     video.playsInline = true;

  125.     video.preload = 'metadata';

  126.     video.src = url;

  127. 

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

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

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

  131.     });

  132. 

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

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

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

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

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

  138.     });

  139. 

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

  141.     canvas.width = video.videoWidth;

  142.     canvas.height = video.videoHeight;

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

  144.     if (!ctx) return null;

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

  146. 

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

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

  149.     );

  150.   } finally {

  151.     URL.revokeObjectURL(url);

  152.   }

  153. }

  154. 

  155. async function pdfToImageItems(

  156.   file: File,

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

  158. ): Promise<MediaItem[]> {

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

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

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

  162. 

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

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

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

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

  167. 

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

  169.     onProgress(i, pdf.numPages);

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

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

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

  173.     canvas.width = viewport.width;

  174.     canvas.height = viewport.height;

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

  176.     if (!ctx) continue;

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

  178. 

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

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

  181.     });

  182. 

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

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

  185.   }

  186. 

  187.   return items;

  188. }

  189. 

  190. export default function AdminDashboard() {

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

  192. 

  193.   // Card State

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

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

  196. 

  197.   // Portal State

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

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

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

  201. 

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

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

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

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

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

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

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

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

  210. 

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

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

  213. 

  214.   // Helper to show auto-dismissing toast

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

  216.     setToast({ message, type });

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

  218.   };

  219. 

  220.   useEffect(() => {

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

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

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

  224.   }, []);

  225. 

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

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

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

  229.   useEffect(() => {

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

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

  232.     );

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

  234. 

  235.     let cancelled = false;

  236.     const tick = async () => {

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

  238.         if (cancelled) return;

  239.         try {

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

  241.           if (!res.ok) continue;

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

  243.           if (cancelled) return;

  244. 

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

  246.             setTranscodeJobs(prev => {

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

  248.               delete next[url];

  249.               return next;

  250.             });

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

  252.             setTranscodeJobs(prev => {

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

  254.               delete next[url];

  255.               return next;

  256.             });

  257.             setIsEditing(prev => prev ? {

  258.               ...prev,

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

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

  261.             } : prev);

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

  263.               ? `Trascodifica fallita${data.error ? `: ${String(data.error).split('\n')[0]}` : ''}`

  264.               : 'Trascodifica annullata';

  265.             showToast(msg, 'error');

  266.           } else {

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

  268.           }

  269.         } catch {

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

  271.         }

  272.       }

  273.     };

  274. 

  275.     void tick();

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

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

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

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

  280. 

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

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

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

  284. 

  285.     const formData = new FormData();

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

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

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

  289. 

  290.     if (data.url) {

  291.       if (isPortal) {

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

  293.       } else {

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

  295.       }

  296.     }

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

  298.   };

  299. 

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

  301.     const files = e.target.files;

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

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

  304. 

  305.     const startedWithoutCover = !isEditing?.imageUrl;

  306.     let pendingCover: string | null = null;

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

  308. 

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

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

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

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

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

  314.         rejected.push(file.name);

  315.       } else {

  316.         acceptedFiles.push(file);

  317.       }

  318.     }

  319.     if (rejected.length > 0) {

  320.       const list = rejected.length <= 3

  321.         ? rejected.join(', ')

  322.         : `${rejected.slice(0, 3).join(', ')} e altri ${rejected.length - 3}`;

  323.       showToast(

  324.         `Formato non supportato! I formati supportati sono: ${PLAYBACK_SUPPORTED_LABEL}. File ignorati: ${list}`,

  325.         'error'

  326.       );

  327.     }

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

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

  330.       e.target.value = '';

  331.       return;

  332.     }

  333. 

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

  335.     for (const file of acceptedFiles) {

  336.       try {

  337.         if (isPdfFile(file)) {

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

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

  340.           );

  341.           setPdfProgress(null);

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

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

  344.             pendingCover = items[0].url;

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

  346.           } else {

  347.             uploaded.push(...items);

  348.           }

  349.         } else {

  350.           const formData = new FormData();

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

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

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

  354.           if (!data.url) continue;

  355. 

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

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

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

  359.           }

  360. 

  361.           if (isVideoFile(file)) {

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

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

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

  365.             if (canPromote()) {

  366.               try {

  367.                 const blob = await extractVideoFrame(file);

  368.                 if (blob) {

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

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

  371.                   if (posterUrl) pendingCover = posterUrl;

  372.                 }

  373.               } catch (err) {

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

  375.               }

  376.             }

  377.           } else {

  378.             // Plain image

  379.             if (canPromote()) {

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

  381.               pendingCover = data.url;

  382.             } else {

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

  384.             }

  385.           }

  386.         }

  387.       } catch (err) {

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

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

  390.         setPdfProgress(null);

  391.       }

  392.     }

  393. 

  394.     setIsEditing(prev => ({

  395.       ...prev,

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

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

  398.     }));

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

  400.     e.target.value = '';

  401.   };

  402. 

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

  404.     setIsEditing(prev => ({

  405.       ...prev,

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

  407.     }));

  408.   };

  409. 

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

  411.     setIsEditing(prev => {

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

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

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

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

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

  417.       } else {

  418.         return prev;

  419.       }

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

  421.     });

  422.   };

  423. 

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

  425.     setIsEditing(prev => ({

  426.       ...prev,

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

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

  429.       ),

  430.     }));

  431.   };

  432. 

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

  434.     setIsEditing(prev => ({

  435.       ...prev,

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

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

  438.       ),

  439.     }));

  440.   };

  441. 

  442.   const handleSaveCard = async () => {

  443.     if (!isEditing) return;

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

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

  446. 

  447.     const res = await fetch('/api/cards', {

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

  449.     });

  450. 

  451.     if (!res.ok) {

  452.       let message = 'Errore di salvataggio';

  453.       try {

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

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

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

  457.           message = first.limit != null

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

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

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

  461.           message = body.error;

  462.         }

  463.       } catch {}

  464.       showToast(message, 'error');

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

  466.     }

  467. 

  468.     setCards(prev => {

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

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

  471.     });

  472.     setIsEditing(null);

  473.   };

  474. 

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

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

  477.     setConfirmDialog({

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

  479.       onConfirm: async () => {

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

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

  482.         setConfirmDialog(null);

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

  484.       }

  485.     });

  486.   };

  487. 

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

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

  490.     

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

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

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

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

  495.     } else {

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

  497.     }

  498.     

  499.     // Recalculate displayOrder for the whole array

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

  501.     

  502.     // Optimistically update the UI

  503.     setCards(updatedCards);

  504.     

  505.     // Persist the new order to the backend

  506.     await fetch('/api/cards', {

  507.       method: 'PUT',

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

  509.       body: JSON.stringify(updatedCards)

  510.     });

  511.   };

  512. 

  513.   const handleSavePortal = async () => {

  514.     setSavingPortal(true);

  515.     await fetch('/api/portals', {

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

  517.     });

  518.     setSavingPortal(false);

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

  520.   };

  521. 

  522.   // Shared Input Classes for high contrast

  523.   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";

  524. 

  525.   return (

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

  527.       {/* Top Header */}

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

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

  530.           <div>

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

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

  533.           </div>

  534.           <a href="/" target="_blank" className="bg-blue-800 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm transition-colors">

  535.             View Live Portal ↗

  536.           </a>

  537.         </div>

  538.       </div>

  539. 

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

  541.         {/* Tab Navigation */}

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

  543.           <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'}`}>

  544.             Manage Cards

  545.           </button>

  546.           <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'}`}>

  547.             Portal Settings

  548.           </button>

  549.         </div>

  550. 

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

  552.           

  553.           {/* TAB: CARDS */}

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

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

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

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

  558.                 <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">

  559.                   + Add New Card

  560.                 </button>

  561.               </div>

  562. 

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

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

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

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

  567.                   <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">

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

  569.                       {(() => {

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

  571.                         if (!previewUrl) {

  572.                           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>;

  573.                         }

  574.                         return isVideoUrl(previewUrl)

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

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

  577.                       })()}

  578.                       <div>

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

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

  581.                           {card.cardType}

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

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

  584.                           )}

  585.                         </span>

  586.                       </div>

  587.                     </div>

  588.                     

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

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

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

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

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

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

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

  596.                     </div>

  597.                   </div>

  598.                 ))}

  599.               </div>

  600.             </div>

  601.           )}

  602. 

  603.           {/* TAB: SETTINGS */}

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

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

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

  607.               

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

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

  610.                   <div>

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

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

  613.                   </div>

  614.                   

  615.                   <div>

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

  617.                     <textarea value={portal.welcomeText || ''} onChange={e => setPortal({...portal, welcomeText: e.target.value})} className={`${inputClasses} h-32 resize-none`} />

  618.                   </div>

  619. 

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

  621.                     <div>

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

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

  624.                         <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" />

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

  626.                       </div>

  627.                     </div>

  628.                     

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

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

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

  632.                       <input 

  633.                         type="range" 

  634.                         min="3" 

  635.                         max="8" 

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

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

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

  639.                       />

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

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

  642.                       </div>

  643.                     </div>

  644.                   </div>

  645. 

  646.                   <div>

  647.                     <label className="block text-sm font-semibold text-gray-700 mb-1">Font del portale</label>

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

  649. @font-face {

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

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

  652.   font-display: swap;

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

  654.                     <StyledSelect<string>

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

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

  657.                       options={[

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

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

  660.                           value: f,

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

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

  663.                         })),

  664.                       ]}

  665.                     />

  666.                   </div>

  667.                 </div>

  668. 

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

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

  671.                   <div>

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

  673.                     <input type="file" accept="image/*" onChange={e => handleUpload(e, 'logoUrl', true)} className="block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-gray-100 cursor-pointer" />

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

  675.                     {portal.logoUrl && (

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

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

  678.                         <a href={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="Scarica" aria-label="Scarica logo">⬇</a>

  679.                         <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>

  680.                       </div>

  681.                     )}

  682.                   </div>

  683. 

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

  685.                   <div>

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

  687.                     <input type="file" accept="image/*" onChange={e => handleUpload(e, 'heroImageUrl', true)} className="block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-gray-100 cursor-pointer" />

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

  689.                     {portal.heroImageUrl && (

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

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

  692.                         <a href={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="Scarica" aria-label="Scarica hero">⬇</a>

  693.                         <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>

  694.                       </div>

  695.                     )}

  696.                   </div>

  697. 

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

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

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

  701.                         <div>

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

  703.                           <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>

  704.                         </div>

  705.                      </label>

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

  707.                         <input

  708.                           type="checkbox"

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

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

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

  712.                         />

  713.                         <div>

  714.                           <span className="block text-sm font-semibold text-gray-900">Abilita &ldquo;External Link&rdquo;</span>

  715.                           <span className="block text-xs text-gray-600">Mostra il tipo &ldquo;External Link&rdquo; nel dropdown del Card Type. Le card esistenti di quel tipo restano comunque visibili e cliccabili.</span>

  716.                         </div>

  717.                      </label>

  718.                   </div>

  719.                 </div>

  720.               </div>

  721. 

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

  723.                 <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">

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

  725.                 </button>

  726.               </div>

  727.             </div>

  728.           )}

  729. 		  

  730. 		  </div> 

  731.       </div> 

  732. 

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

  734.       {isEditing && (

  735.         <div 

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

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

  738.         >

  739.           <div 

  740.             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"

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

  742.           >

  743.             <button 

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

  745.               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"

  746.             >

  747.               ✕

  748.             </button>

  749. 

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

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

  752.             </h3>

  753.             

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

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

  756.                 <div>

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

  758.                   <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" />

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

  760.                 </div>

  761.                 <div>

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

  763.                   <StyledSelect<CardType>

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

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

  766.                     options={[

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

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

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

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

  771.                     ]}

  772.                   />

  773.                 </div>

  774.                 {isEditing.cardType === 'EXTERNAL_LINK' ? (

  775.                   <>

  776.                     <div>

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

  778.                       <input

  779.                         type="url"

  780.                         maxLength={CARD_LIMITS.actionUrl}

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

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

  783.                         className={inputClasses}

  784.                         placeholder="https://esempio.it/pagina"

  785.                       />

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

  787.                     </div>

  788.                     <div>

  789.                       <label className="block text-sm font-semibold text-gray-800 mb-1">Testo del link</label>

  790.                       <input

  791.                         type="text"

  792.                         maxLength={CARD_LIMITS.shortDescription}

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

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

  795.                         className={inputClasses}

  796.                         placeholder="es. Visita il sito ufficiale"

  797.                       />

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

  799.                       <p className="text-xs text-gray-500 mt-1">Testo visualizzato come link cliccabile nel modale. Se vuoto, viene mostrata l&rsquo;URL stessa.</p>

  800.                     </div>

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

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

  803.                         <input

  804.                           type="checkbox"

  805.                           checked={!!isEditing.redirectOnClick}

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

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

  808.                         />

  809.                         <div>

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

  811.                           <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>

  812.                         </div>

  813.                       </label>

  814.                     </div>

  815.                   </>

  816.                 ) : (

  817.                   <div>

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

  819.                     <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..." />

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

  821.                   </div>

  822.                 )}

  823.                 {isEditing.cardType !== 'BOOK' && (

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

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

  826.                     <input

  827.                       type="checkbox"

  828.                       checked={!!isEditing.autoFullscreen}

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

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

  831.                     />

  832.                     <div>

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

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

  835.                     </div>

  836.                   </label>

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

  838.                     <input

  839.                       type="checkbox"

  840.                       checked={!!isEditing.skipPreview}

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

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

  843.                     />

  844.                     <div>

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

  846.                       <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>

  847.                     </div>

  848.                   </label>

  849.                 </div>

  850.                 )}

  851.               </div>

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

  853.                 {/* Cover Image */}

  854.                 <div>

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

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

  857.                   </label>

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

  859.                     <input type="file" accept="image/*" onChange={e => handleUpload(e, 'imageUrl')} className="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer" />

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

  861.                   </div>

  862.                   {isEditing.imageUrl && (

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

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

  865.                       <a

  866.                         href={isEditing.imageUrl}

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

  868.                         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"

  869.                         title="Scarica"

  870.                         aria-label="Scarica cover"

  871.                       >⬇</a>

  872.                       <button

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

  874.                         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"

  875.                         title="Remove cover image"

  876.                       >✕</button>

  877.                     </div>

  878.                   )}

  879.                 </div>

  880. 

  881.                 {/* Gallery Media (images + videos + PDFs) — nascosta per INFO_PAGE (solo cover ammessa) */}

  882.                 {isEditing.cardType !== 'INFO_PAGE' && (

  883.                 <div>

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

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

  886.                   </label>

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

  888.                     <input

  889.                       type="file"

  890.                       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"

  891.                       multiple

  892.                       onChange={handleUploadExtraMedia}

  893.                       className="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100 cursor-pointer"

  894.                     />

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

  896.                     {pdfProgress && (

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

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

  899.                       </p>

  900.                     )}

  901.                   </div>

  902. 

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

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

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

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

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

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

  909.                         return (

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

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

  912.                               {video ? (

  913.                                 <>

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

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

  916.                                 </>

  917.                               ) : (

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

  919.                               )}

  920.                               {isTranscoding && (

  921.                                 <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">

  922.                                   <span>Transcoding</span>

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

  924.                                 </div>

  925.                               )}

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

  927.                             </div>

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

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

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

  931.                               </div>

  932.                               {video && (

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

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

  935.                                     <input

  936.                                       type="checkbox"

  937.                                       checked={!!item.autoplay}

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

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

  940.                                     />

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

  942.                                   </label>

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

  944.                                     <input

  945.                                       type="checkbox"

  946.                                       checked={!!item.muted}

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

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

  949.                                     />

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

  951.                                   </label>

  952.                                 </div>

  953.                               )}

  954.                             </div>

  955.                             <button

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

  957.                               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"

  958.                               title="Sposta su"

  959.                               aria-label="Sposta su"

  960.                               disabled={i === 0}

  961.                             >↑</button>

  962.                             <button

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

  964.                               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"

  965.                               title="Sposta giù"

  966.                               aria-label="Sposta giù"

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

  968.                             >↓</button>

  969.                             <a

  970.                               href={item.url}

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

  972.                               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"

  973.                               title="Scarica"

  974.                               aria-label="Scarica"

  975.                             >⬇</a>

  976.                             <button

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

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

  979.                               title="Remove"

  980.                             >✕</button>

  981.                           </div>

  982.                         );

  983.                       })}

  984.                     </div>

  985.                   )}

  986.                 </div>

  987.                 )}

  988.               </div>

  989.             </div>

  990. 

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

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

  993.                 Cancel

  994.               </button>

  995.               <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">

  996.                 Save Card

  997.               </button>

  998.             </div>

  999.           </div>

  1000.         </div>

  1001.       )}

  1002. 	  

  1003. 	  {/* CUSTOM CONFIRM DIALOG */}

  1004.       {confirmDialog && (

  1005.         <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">

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

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

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

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

  1010.               <button 

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

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

  1013.               >

  1014.                 Cancel

  1015.               </button>

  1016.               <button 

  1017.                 onClick={confirmDialog.onConfirm} 

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

  1019.               >

  1020.                 Delete

  1021.               </button>

  1022.             </div>

  1023.           </div>

  1024.         </div>

  1025.       )}

  1026. 

  1027.       {/* CUSTOM TOAST NOTIFICATION */}

  1028.       {toast && (

  1029.         <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 ${

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

  1031.         }`}>

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

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

  1034.           }`}>

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

  1036.           </div>

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

  1038.         </div>

  1039.       )}

  1040. 

  1041.     </div>

  1042.   );

  1043. }