'use client'; import { useState, useCallback, useRef, useEffect } from 'react'; import { Download, RefreshCw, Upload, X, Loader2, Lock, Zap, ImageIcon, ChevronDown, ChevronUp, Info } from 'lucide-react'; import type { QRUser } from './AuthModal'; interface QRPanelProps { user: QRUser | null; token: string | null; onCreditsChange: (credits: number, freeGensToday: number) => void; onAuthRequired: (mode?: 'login' | 'register') => void; onTopupRequired: () => void; onPreviewChange?: (preview: { data: string; mimeType: string; ext: string } | null, content: string) => void; } const ERROR_LEVELS = [ { value: 'L', label: 'L — 7%', desc: 'Low — smallest file' }, { value: 'M', label: 'M — 15%', desc: 'Medium — default' }, { value: 'Q', label: 'Q — 25%', desc: 'Quartile — robust' }, { value: 'H', label: 'H — 30%', desc: 'High — required for logo' }, ]; const RESOLUTION_PRESETS = [ { label: 'Standard', px: 300, tag: 'Web / mobile', free: true, dpi: '72 dpi @ 4"' }, { label: 'HD', px: 600, tag: 'Presentations', free: false, dpi: '150 dpi @ 4"' }, { label: 'Print', px: 1200, tag: 'Flyers / posters', free: false, dpi: '300 dpi @ 4"' }, { label: 'Ultra', px: 2000, tag: '3D print / signage', free: false, dpi: '300 dpi @ 6.7"', highlight: true }, ]; export default function QRPanel({ user, token, onCreditsChange, onAuthRequired, onTopupRequired, onPreviewChange }: QRPanelProps) { const [content, setContent] = useState('https://example.com'); const [resolutionIdx, setResolutionIdx] = useState(0); const [fgColor, setFgColor] = useState('#000000'); const [bgColor, setBgColor] = useState('#ffffff'); const [errorLevel, setErrorLevel] = useState('M'); const [format, setFormat] = useState<'png' | 'svg'>('png'); const [logoData, setLogoData] = useState(null); const [logoName, setLogoName] = useState(''); const [logoDragOver, setLogoDragOver] = useState(false); const [preview, setPreview] = useState<{ data: string; mimeType: string; ext: string } | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [lastCost, setLastCost] = useState<{ creditsUsed: number; freeGen: boolean } | null>(null); const [showAdvanced, setShowAdvanced] = useState(false); const fileInputRef = useRef(null); const selectedRes = RESOLUTION_PRESETS[resolutionIdx]; const size = selectedRes.px; // Auto-set H error correction when logo is loaded (recommended for logos) useEffect(() => { if (logoData && errorLevel !== 'H') setErrorLevel('H'); }, [logoData]); // eslint-disable-line react-hooks/exhaustive-deps const calcEstimatedCost = useCallback(() => { if (!user) return null; let cost = 0; if (logoData) cost += 2; if (format === 'svg') cost += 1; if (size > 500) cost += 1; const freeLeft = Math.max(0, (user.freeLimit ?? 10) - user.freeGensToday); if (cost === 0 && freeLeft > 0) return { cost: 0, label: 'Free', freeLeft }; if (cost === 0) cost = 1; return { cost, label: `${cost} credit${cost > 1 ? 's' : ''}`, freeLeft }; }, [user, logoData, format, size]); async function generate() { if (!content.trim()) { setError('Content is required'); return; } setError(''); setLoading(true); try { const res = await fetch('/api/qr/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) }, body: JSON.stringify({ type: 'qr', content, size, fgColor, bgColor, errorLevel, format, logoData }), }); const data = await res.json(); if (!res.ok) { if (data.code === 'LOGIN_REQUIRED') { onAuthRequired('register'); return; } if (data.code === 'INSUFFICIENT_CREDITS') { onTopupRequired(); return; } throw new Error(data.error || 'Generation failed'); } const p = { data: data.data, mimeType: data.mimeType, ext: data.ext }; setPreview(p); setLastCost({ creditsUsed: data.creditsUsed, freeGen: data.freeGen }); if (data.credits !== undefined) onCreditsChange(data.credits, data.freeGensToday); onPreviewChange?.(p, content); } catch (err: unknown) { setError(err instanceof Error ? err.message : 'Generation failed'); } finally { setLoading(false); } } function processLogoFile(file: File) { if (!file.type.startsWith('image/')) { setError('Please upload an image file (PNG, JPG, SVG…)'); return; } if (file.size > 5 * 1024 * 1024) { setError('Logo must be under 5 MB'); return; } const reader = new FileReader(); reader.onload = ev => { setLogoData(ev.target?.result as string); setLogoName(file.name); setError(''); }; reader.readAsDataURL(file); } function handleLogoInputChange(e: React.ChangeEvent) { const file = e.target.files?.[0]; if (file) processLogoFile(file); } function handleLogoDrop(e: React.DragEvent) { e.preventDefault(); setLogoDragOver(false); if (!user) { onAuthRequired('register'); return; } const file = e.dataTransfer.files?.[0]; if (file) processLogoFile(file); } function download() { if (!preview) return; const link = document.createElement('a'); link.href = `data:${preview.mimeType};base64,${preview.data}`; link.download = `qrcode-${size}px-${Date.now()}.${preview.ext}`; link.click(); } const estCost = calcEstimatedCost(); return (
{/* ── Config ─────────────────────────────────────────────────────── */}
{/* Content */}