import React, { useState, useRef, useEffect } from 'react';
import { Camera, Printer, Upload, FileText, ImageIcon, Palette, Image as BgImageIcon, Scaling, PenTool, MoveVertical, Layout, Type, User, RectangleHorizontal, Hash, MapPin, List, ShieldCheck, Stamp, MoveHorizontal, Maximize, Eye, Circle, Edit3, Wand2, Star, Calendar, Download, Database, Save, RotateCcw, Trash2, FileJson, UploadCloud, FileSpreadsheet, FileType, Globe, FileText as FileWord, Lock, Unlock, QrCode } from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('front'); 
  const [isLibLoaded, setIsLibLoaded] = useState(false);
  const [isExcelLoaded, setIsExcelLoaded] = useState(false);
  const [isPdfLoaded, setIsPdfLoaded] = useState(false);
  const [isDocxLoaded, setIsDocxLoaded] = useState(false);

  // LOCK STATES
  const [isLocked, setIsLocked] = useState(false); 
  const [isLabelLocked, setIsLabelLocked] = useState(false);
  const [isBackFooterLocked, setIsBackFooterLocked] = useState(false);
  const [isChannelNameLocked, setIsChannelNameLocked] = useState(false);
  const [isHeaderLocked, setIsHeaderLocked] = useState(false);

  // --- DEFAULT VALUES ---
  const defaultDetails = {
    // --- Front Side Data ---
    headerText: 'PRESS', 
    pressHeaderSize: '42',
    pressHeaderTop: '8', 
    pressTextColor: '#D32F2F',
    pressBgColor: '#ffffff',
    pressBorderColor: '#000000', 
    pressBorderWidth: '0',       
    
    channelName: 'JAMMU BHARAT NEWS',
    name: 'MOHAN LAL', 
    designation: 'Editor-in-Chief', 
    phone: '7006710843',
    validUntil: '2025-12-31', 
    bloodGroup: 'B+',
    rniNo: 'DELHIN/2025/64915', 
    idNo: 'JBN-RNI-2025-001', 
    franchiseText: 'A FRANCHISE OF LEAD INDIA',
    agencyText: 'NATIONAL NEWS AGENCY & NEWS PAPER', 
    sigTitle: "Holder's Signature",
    bottomStripText: 'PRESS DIGITAL MEDIA', 
    
    // Channel Name Strip Defaults
    channelNameBgColor: '#D32F2F',
    channelNameTextColor: '#FFFFFF',
    channelNameVerticalShift: '0',

    // --- Labels (Manual Edit) ---
    labelId: 'ID No.',
    labelName: 'Name',
    labelDesig: 'Designation',
    labelPhone: 'Phone no.',
    labelValid: 'Valid upto',
    labelBlood: 'Blood Group',
    labelRni: 'RNI NO.',

    // --- Labels Back (Manual Edit) ---
    labelBackRni: 'RNI NO.',
    labelInstruction: 'INSTRUCTION',
    labelOfficeAddr: 'Office Address:',

    // --- Styles ---
    bgColor: '#ffffff',
    
    // Borders
    outerBorderColor: '#000000',
    innerBorderColor: '#000000',

    // Left Logo Styles
    logoSize: '40',
    logoTop: '0',
    logoLeft: '0', 
    logo1Brightness: '100',
    logo1Contrast: '100',
    logo1Grayscale: '0',
    logo1BorderWidth: '0',
    logo1BorderColor: '#000000',

    // Right Logo Styles
    logo2Size: '40',
    logo2Top: '0',
    logo2Right: '0', 
    logo2Brightness: '100',
    logo2Contrast: '100',
    logo2Grayscale: '0',
    logo2BorderWidth: '0',
    logo2BorderColor: '#000000',

    logoTouchBorder: false,
    contentTop: '0',
    
    mainTextColor: '#000000',
    channelNameSize: '24',
    photoSize: '110',
    isPhotoRound: false,
    photoBorderColor: '#000000',
    bottomStripBgColor: '#D32F2F',
    bottomStripTextColor: '#FFFFFF',
    bottomStripSize: '24',
    
    rniSize: '14',
    sigSize: '40',
    sigLabelSize: '10',
    sigLabelColor: '#000000',
    sigLineWidth: '128',
    authSigSize: '40',
    
    // Text Sizes
    detailsTextSize: '14',
    franchiseSize: '10',
    agencySize: '10',
    
    // Label Specific Styles
    labelColumnWidth: '110',
    labelFontSize: '14',
    labelColor: '#000000',

    cardBorderColor: '#000000',
    
    // Agency Strip Styles
    agencyBgColor: '#000000', 
    agencyTextColor: '#FFFFFF',
    
    // Back Header Styles
    backHeaderBgColor: '#ffffff', 
    backHeaderTextColor: '#D32F2F',
    backHeaderTop: '0',

    // --- Back Side Data ---
    backChannelName: 'JAMMU BHARAT NEWS',
    backRniNo: 'DELHIN/2025/64915', 
    backAgencyText: 'NATIONAL NEWS AGENCY & NEWS PAPER',
    website: 'www.jammubharatnews.com',
    officeAddress: 'PRESS MEDIA: 118, SARAR, CHENANI, UDHAMPUR, J&K - 182161',
    backBottomStripText: '',
    backBottomStripSize: '24',      
    backBottomStripBgColor: '#D32F2F', 
    backBottomStripTextColor: '#FFFFFF', 
    
    addressSize: '12', 
    addressImgSize: '60', 
    term1: 'Unauthorized use of this card is offence.',
    term2: 'Card holder is responsible for any kind of misuse of this card.',
    term3: 'Card can be verified on www.jammubharatnews.com',
    term4: 'In case this card is lost please acknowledge in nearest Police Station as well as your office.',
    term5: '', 
    term6: '', 
    authorityName: 'Chief Editor',
    instructionsTop: '0', 
    instructionsTextColor: '#000000',

    // --- Auto Stamp Data ---
    isAutoStamp: false,
    stampText: 'JAMMU BHARAT NEWS', 
    stampBottomText: 'RNI: DELHIN/2025/12345', 
    stampSubText: 'AUTHORIZED', 
    stampColor: '#D32F2F',
    showStampStars: true,

    // --- QR Code Settings ---
    isQrCodeFront: false,
    isQrCodeBack: false,
    qrCodeData: '', 
    qrSize: '60',
    qrFrontTop: '360',
    qrFrontLeft: '280',
    qrBackTop: '360',
    qrBackLeft: '280'
  };

  const [details, setDetails] = useState(defaultDetails);
  const [savedRecords, setSavedRecords] = useState([]);

  useEffect(() => {
    try {
        const saved = localStorage.getItem('jbn_current_draft_details_v30'); 
        if(saved) setDetails(JSON.parse(saved));
        else setDetails(defaultDetails);

        const loadedData = localStorage.getItem('jbn_saved_cards');
        if (loadedData) setSavedRecords(JSON.parse(loadedData));
    } catch(e) { console.error(e); }

    const loadScript = (src, onload) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
        script.onload = onload;
        document.body.appendChild(script);
        return script;
    };

    const s1 = loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', () => setIsLibLoaded(true));
    const s2 = loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js', () => setIsExcelLoaded(true));
    const s3 = loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', () => setIsPdfLoaded(true));
    const s4 = loadScript('https://unpkg.com/docx@7.1.0/build/index.js', () => setIsDocxLoaded(true));

    return () => {
      if(document.body.contains(s1)) document.body.removeChild(s1);
      if(document.body.contains(s2)) document.body.removeChild(s2);
      if(document.body.contains(s3)) document.body.removeChild(s3);
      if(document.body.contains(s4)) document.body.removeChild(s4);
    };
  }, []);

  const [personImage, setPersonImage] = useState(localStorage.getItem('jbn_img_person') || null);
  const [logoImage, setLogoImage] = useState(localStorage.getItem('jbn_img_logo1') || null);
  const [logo2Image, setLogo2Image] = useState(localStorage.getItem('jbn_img_logo2') || null);
  const [bgLogo, setBgLogo] = useState(localStorage.getItem('jbn_img_bg') || null);
  const [bgBackImage, setBgBackImage] = useState(localStorage.getItem('jbn_img_bg_back') || null);
  const [signatureImage, setSignatureImage] = useState(localStorage.getItem('jbn_img_sig') || null);
  const [stampImage, setStampImage] = useState(localStorage.getItem('jbn_img_stamp') || null);
  const [addressImage, setAddressImage] = useState(localStorage.getItem('jbn_img_address') || null);
  const [authoritySigImage, setAuthoritySigImage] = useState(localStorage.getItem('jbn_img_auth') || null);
  
  const personInputRef = useRef(null);
  const logoInputRef = useRef(null);
  const logo2InputRef = useRef(null);
  const bgLogoInputRef = useRef(null);
  const bgBackInputRef = useRef(null);
  const signatureInputRef = useRef(null);
  const stampInputRef = useRef(null);
  const addressImageRef = useRef(null);
  const authoritySigInputRef = useRef(null);

  const formatDate = (dateStr) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return dateStr; 
    return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
  };

  const handleInputChange = (e) => {
    if (isLocked) return; 
    const { name, value, type, checked } = e.target;
    setDetails(prev => ({ 
        ...prev, 
        [name]: type === 'checkbox' ? checked : value 
    }));
  };

  const handleFrontLanguageChange = (e) => {};
  const handleBackLanguageChange = (e) => {};

  const handleImageUpload = (e, setImageFunc) => {
    if (isLocked) return;
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageFunc(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSaveRecord = () => {
      const record = {
          id: Date.now(),
          date: new Date().toLocaleString(),
          data: details,
          images: {
              personImage, logoImage, logo2Image, bgLogo, bgBackImage, signatureImage, stampImage, addressImage, authoritySigImage
          }
      };
      const updatedList = [record, ...savedRecords];
      setSavedRecords(updatedList);
      localStorage.setItem('jbn_saved_cards', JSON.stringify(updatedList));
      alert("Record Saved Successfully!");
  };

  const handleClearForm = () => {
      if(window.confirm("Reset form to original MOHAN LAL data?")) {
          setDetails(defaultDetails);
          localStorage.removeItem('jbn_current_draft_details_v30');
          alert("Form Reset!");
      }
  };

  const handleDeleteRecord = (id) => {
      if(window.confirm("Delete this record?")) {
          const updatedList = savedRecords.filter(rec => rec.id !== id);
          setSavedRecords(updatedList);
          localStorage.setItem('jbn_saved_cards', JSON.stringify(updatedList));
      }
  };

  const handleLoadRecord = (record) => {
      if(window.confirm("Load this record? Current form data will be replaced.")) {
          setDetails(record.data || defaultDetails);
          setPersonImage(record.images?.personImage || null);
          setLogoImage(record.images?.logoImage || null);
          setLogo2Image(record.images?.logo2Image || null);
          setBgLogo(record.images?.bgLogo || null);
          setBgBackImage(record.images?.bgBackImage || null);
          setSignatureImage(record.images?.signatureImage || null);
          setStampImage(record.images?.stampImage || null);
          setAddressImage(record.images?.addressImage || null);
          setAuthoritySigImage(record.images?.authoritySigImage || null);
          setActiveTab('front');
      }
  };

  const handleClearAllRecords = () => {
      if(window.confirm("WARNING: This will delete ALL saved records. Are you sure?")) {
          setSavedRecords([]);
          localStorage.removeItem('jbn_saved_cards');
      }
  };

  const captureElement = async (elementId) => {
    const element = document.getElementById(elementId);
    if (!element) return null;
    const originalDisplay = element.style.display;
    if (originalDisplay === 'none') element.style.display = 'block';

    try {
        const canvas = await window.html2canvas(element, { scale: 2, useCORS: true, backgroundColor: '#ffffff' });
        if (originalDisplay === 'none') element.style.display = 'none';
        return canvas.toDataURL('image/png');
    } catch (e) {
        console.error(e);
        if (originalDisplay === 'none') element.style.display = 'none';
        return null;
    }
  };

  const handleExportWord = async () => {
      if (!isDocxLoaded || !window.docx || !window.html2canvas) {
          alert("Word generator loading... please wait.");
          return;
      }
      const frontDataUrl = await captureElement('id-card-front');
      const backDataUrl = await captureElement('id-card-back');
      if (!frontDataUrl || !backDataUrl) return alert("Error capturing cards.");

      const { Document, Packer, Paragraph, ImageRun, TextRun, AlignmentType } = window.docx;
      const doc = new Document({
          sections: [{
              properties: {},
              children: [
                  new Paragraph({
                      children: [ new TextRun({ text: "Jammu Bharat News - Press ID Card", bold: true, size: 28 }) ],
                      alignment: AlignmentType.CENTER,
                      spacing: { after: 400 },
                  }),
                  new Paragraph({
                      children: [
                          new ImageRun({ data: frontDataUrl, transformation: { width: 250, height: 400 } }),
                          new TextRun({ text: "\t" }),
                          new ImageRun({ data: backDataUrl, transformation: { width: 250, height: 400 } }),
                      ],
                      alignment: AlignmentType.CENTER,
                  }),
              ],
          }],
      });
      const blob = await Packer.toBlob(doc);
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = "JBN_ID_Card_A4.docx";
      link.click();
  };

  const handleDownloadDatabase = () => {
      const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(savedRecords, null, 2));
      const downloadAnchorNode = document.createElement('a');
      downloadAnchorNode.setAttribute("href", dataStr);
      downloadAnchorNode.setAttribute("download", "jbn_records.json");
      document.body.appendChild(downloadAnchorNode);
      downloadAnchorNode.click();
      downloadAnchorNode.remove();
  };

  const handleExportExcel = () => {
      if (!isExcelLoaded || !window.XLSX) return alert("Excel tool loading...");
      if (savedRecords.length === 0) return alert("No records.");
      const dataToExport = savedRecords.map(rec => ({
          Date: rec.date, ID: rec.data?.idNo, Name: rec.data?.name, Designation: rec.data?.designation, Phone: rec.data?.phone
      }));
      const ws = window.XLSX.utils.json_to_sheet(dataToExport);
      const wb = window.XLSX.utils.book_new();
      window.XLSX.utils.book_append_sheet(wb, ws, "ID Cards");
      window.XLSX.writeFile(wb, "JBN_ID_Records.xlsx");
  };

  const handleExportPDF = () => {
      if (!isPdfLoaded || !window.jspdf) return alert("PDF tool loading...");
      if (savedRecords.length === 0) return alert("No records.");
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      doc.text("Jammu Bharat News - Records", 14, 20);
      let y = 30;
      savedRecords.forEach((rec, i) => {
          doc.text(`${i + 1}. ${rec.data?.name} | ${rec.data?.designation} | ${rec.data?.idNo}`, 14, y);
          y += 10;
      });
      doc.save("JBN_List.pdf");
  };

  const handleSaveImage = async (side) => {
    if (!isLibLoaded || !window.html2canvas) return alert("Loading...");
    const url = await captureElement(side === 'front' ? 'id-card-front' : 'id-card-back');
    if(url) {
        const link = document.createElement('a');
        link.download = `JBN-${side}.png`;
        link.href = url;
        link.click();
    }
  };

  const handleSaveCardPDF = async (side) => {
    if (!isPdfLoaded || !window.jspdf) return alert("Loading...");
    const elementId = side === 'front' ? 'id-card-front' : 'id-card-back';
    const element = document.getElementById(elementId);
    if (!element) return;
    const wasHidden = element.style.display === 'none';
    if(wasHidden) element.style.display = 'block';
    const canvas = await window.html2canvas(element, { scale: 3, useCORS: true, backgroundColor: '#ffffff' });
    if(wasHidden) element.style.display = 'none';
    const url = canvas.toDataURL('image/jpeg', 1.0);
    const { jsPDF } = window.jspdf;
    const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: [54, 86] });
    pdf.addImage(url, 'JPEG', 0, 0, 54, 86);
    pdf.save(`JBN-${side}.pdf`);
  };

  // AUTO SAVE IMAGES
  useEffect(() => { if(personImage) localStorage.setItem('jbn_img_person', personImage); }, [personImage]);
  useEffect(() => { if(logoImage) localStorage.setItem('jbn_img_logo1', logoImage); }, [logoImage]);
  useEffect(() => { if(logo2Image) localStorage.setItem('jbn_img_logo2', logo2Image); }, [logo2Image]);
  useEffect(() => { if(bgLogo) localStorage.setItem('jbn_img_bg', bgLogo); }, [bgLogo]);
  useEffect(() => { if(bgBackImage) localStorage.setItem('jbn_img_bg_back', bgBackImage); }, [bgBackImage]);
  useEffect(() => { if(signatureImage) localStorage.setItem('jbn_img_sig', signatureImage); }, [signatureImage]);
  useEffect(() => { if(stampImage) localStorage.setItem('jbn_img_stamp', stampImage); }, [stampImage]);
  useEffect(() => { if(addressImage) localStorage.setItem('jbn_img_address', addressImage); }, [addressImage]);
  useEffect(() => { if(authoritySigImage) localStorage.setItem('jbn_img_auth', authoritySigImage); }, [authoritySigImage]);

  // Auto-save details
  useEffect(() => {
      localStorage.setItem('jbn_current_draft_details_v30', JSON.stringify(details));
  }, [details]);

  // Helper for QR URL
  const qrData = details.qrCodeData || `ID:${details.idNo}|${details.website}`;
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrData)}&size=150x150`;

  return (
    <div className="min-h-screen bg-gray-100 font-sans text-gray-800 p-4 md:p-8 flex flex-col md:flex-row gap-8 pb-20">
      
      {/* --- FORM SECTION --- */}
      <div className="w-full md:w-5/12 bg-white p-6 rounded-xl shadow-lg print:hidden h-fit overflow-y-auto max-h-screen flex flex-col">
        
        {/* Header & Tabs */}
        <div className="mb-6">
            <h1 className="text-xl font-bold text-red-600 mb-4 flex items-center gap-2 leading-tight">
            <FileText className="w-6 h-6 flex-shrink-0" />
            PRESS ID CARD
            </h1>
            
            {/* MASTER LOCK BUTTON */}
            <button 
                onClick={() => setIsLocked(!isLocked)} 
                className={`w-full py-2 rounded-lg font-bold shadow flex items-center justify-center gap-2 mb-3 transition-all ${isLocked ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-green-600 text-white hover:bg-green-700'}`}
            >
                {isLocked ? <Lock className="w-4 h-4" /> : <Unlock className="w-4 h-4" />}
                {isLocked ? "Editing Locked (Safe Mode)" : "Unlock Editing"}
            </button>

            <div className="flex p-1 bg-gray-100 rounded-lg gap-1">
                <button onClick={() => setActiveTab('front')} className={`flex-1 py-3 text-sm font-bold rounded-md transition-all flex items-center justify-center gap-1 ${activeTab === 'front' ? 'bg-white shadow text-red-600 border border-gray-200' : 'text-gray-500 hover:text-gray-700'}`}>
                    <Eye className="w-4 h-4" /> Front
                </button>
                <button onClick={() => setActiveTab('back')} className={`flex-1 py-3 text-sm font-bold rounded-md transition-all flex items-center justify-center gap-1 ${activeTab === 'back' ? 'bg-white shadow text-red-600 border border-gray-200' : 'text-gray-500 hover:text-gray-700'}`}>
                    <Eye className="w-4 h-4" /> Back
                </button>
                <button onClick={() => setActiveTab('database')} className={`flex-1 py-3 text-sm font-bold rounded-md transition-all flex items-center justify-center gap-1 ${activeTab === 'database' ? 'bg-blue-50 shadow text-blue-600 border border-blue-200' : 'text-gray-500 hover:text-gray-700'}`}>
                    <Database className="w-4 h-4" /> Records
                </button>
            </div>
        </div>

        <div className="space-y-4 flex-1 overflow-y-auto pr-1">
          
          {/* === FRONT SIDE FORM === */}
          {activeTab === 'front' && (
            <div className={`animate-in fade-in duration-300 ${isLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                
                {/* Front Language Selector */}
                <div className="bg-blue-50 p-3 rounded-lg border border-blue-200 mb-4 flex items-center justify-between">
                    <label className="text-sm font-bold text-blue-800 flex items-center gap-2"><Globe className="w-4 h-4" /> Front Lang</label>
                    <select disabled={isLocked} onChange={handleFrontLanguageChange} className="p-1.5 border border-blue-300 rounded text-sm font-semibold outline-none bg-white w-40">
                        <option value="English">English</option><option value="Hindi">Hindi</option><option value="Urdu">Urdu</option>
                    </select>
                </div>

                {/* Image Uploads Grid */}
                <div className="grid grid-cols-3 gap-2">
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer text-center" onClick={() => !isLocked && personInputRef.current.click()}>
                        {personImage ? <img src={personImage} alt="Person" className="w-full h-12 object-contain rounded mb-1" /> : <Camera className="w-5 h-5 text-gray-400 mb-1" />}<span className="text-[10px] font-semibold text-gray-500">Photo <span className="text-red-500">*</span></span>
                        <input disabled={isLocked} type="file" ref={personInputRef} onChange={(e) => handleImageUpload(e, setPersonImage)} className="hidden" accept="image/*" />
                    </div>
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer text-center" onClick={() => !isLocked && logoInputRef.current.click()}>
                        {logoImage ? <img src={logoImage} alt="Logo" className="w-full h-12 object-contain mb-1" /> : <ImageIcon className="w-5 h-5 text-gray-400 mb-1" />}<span className="text-[10px] font-semibold text-gray-500">Left Logo</span>
                        <input disabled={isLocked} type="file" ref={logoInputRef} onChange={(e) => handleImageUpload(e, setLogoImage)} className="hidden" accept="image/*" />
                    </div>
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer text-center" onClick={() => !isLocked && logo2InputRef.current.click()}>
                        {logo2Image ? <img src={logo2Image} alt="Logo 2" className="w-full h-12 object-contain mb-1" /> : <ImageIcon className="w-5 h-5 text-gray-400 mb-1" />}<span className="text-[10px] font-semibold text-gray-500">Right Logo</span>
                        <input disabled={isLocked} type="file" ref={logo2InputRef} onChange={(e) => handleImageUpload(e, setLogo2Image)} className="hidden" accept="image/*" />
                    </div>
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer text-center" onClick={() => !isLocked && bgLogoInputRef.current.click()}>
                        {bgLogo ? <img src={bgLogo} alt="Bg" className="w-full h-12 object-cover rounded mb-1 opacity-50" /> : <BgImageIcon className="w-5 h-5 text-gray-400 mb-1" />}<span className="text-[10px] font-semibold text-gray-500">Front Bg</span>
                        <input disabled={isLocked} type="file" ref={bgLogoInputRef} onChange={(e) => handleImageUpload(e, setBgLogo)} className="hidden" accept="image/*" />
                    </div>
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer text-center" onClick={() => !isLocked && signatureInputRef.current.click()}>
                        {signatureImage ? <img src={signatureImage} alt="Sig" className="w-full h-12 object-contain mb-1" /> : <PenTool className="w-5 h-5 text-gray-400 mb-1" />}<span className="text-[10px] font-semibold text-gray-500">Signature</span>
                        <input disabled={isLocked} type="file" ref={signatureInputRef} onChange={(e) => handleImageUpload(e, setSignatureImage)} className="hidden" accept="image/*" />
                    </div>
                </div>

                {/* Front Inputs */}
                <div className="space-y-3 mt-2">
                    
                    {/* MAIN HEADER SETTINGS - UPGRADED */}
                    <div className="bg-blue-50 p-3 rounded border border-blue-200 mt-2 space-y-2">
                        <div className="flex justify-between items-center">
                             <h3 className="text-xs font-bold text-blue-800 flex items-center gap-1"><Type className="w-3 h-3"/> Main Header Settings</h3>
                             <button onClick={() => setIsHeaderLocked(!isHeaderLocked)} className={`p-1 rounded ${isHeaderLocked ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}>
                                {isHeaderLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
                            </button>
                        </div>
                        <div className={`space-y-2 ${isHeaderLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                            <input type="text" name="headerText" value={details.headerText} onChange={handleInputChange} className="w-full p-1.5 border rounded text-xs font-bold" />
                            <div className="grid grid-cols-2 gap-2">
                                <div><label className="text-[9px] text-gray-500">Font Size</label><input type="range" name="pressHeaderSize" min="20" max="60" value={details.pressHeaderSize} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Move Y</label><input type="range" name="pressHeaderTop" min="0" max="100" value={details.pressHeaderTop} onChange={handleInputChange} className="w-full h-1" /></div>
                            </div>
                             <div className="grid grid-cols-4 gap-2">
                                <div className="flex flex-col items-center"><label className="text-[8px] text-gray-500">Text</label><input type="color" name="pressTextColor" value={details.pressTextColor} onChange={handleInputChange} className="h-5 w-6 border rounded" /></div>
                                <div className="flex flex-col items-center"><label className="text-[8px] text-gray-500">Bg</label><input type="color" name="pressBgColor" value={details.pressBgColor} onChange={handleInputChange} className="h-5 w-6 border rounded" /></div>
                                <div className="flex flex-col items-center"><label className="text-[8px] text-gray-500">Bdr Col</label><input type="color" name="pressBorderColor" value={details.pressBorderColor} onChange={handleInputChange} className="h-5 w-6 border rounded" /></div>
                                <div className="flex flex-col items-center w-full"><label className="text-[8px] text-gray-500">Bdr W</label><input type="range" name="pressBorderWidth" min="0" max="5" value={details.pressBorderWidth} onChange={handleInputChange} className="w-full h-1 mt-1" /></div>
                            </div>
                        </div>
                    </div>

                    <div><label className="text-xs font-bold text-gray-500">Channel Name (Front)</label><input disabled={isLocked} type="text" name="channelName" value={details.channelName} onChange={handleInputChange} className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500 outline-none uppercase" /></div>
                    
                    {/* CHANNEL NAME STRIP SETTINGS */}
                    <div className="bg-red-50 p-3 rounded border border-red-200 mt-2 space-y-2">
                        <div className="flex justify-between items-center">
                             <h3 className="text-xs font-bold text-red-800 flex items-center gap-1"><Edit3 className="w-3 h-3"/> Channel Name Strip</h3>
                             <button 
                                onClick={() => setIsChannelNameLocked(!isChannelNameLocked)}
                                className={`p-1 rounded ${isChannelNameLocked ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}
                            >
                                {isChannelNameLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
                            </button>
                        </div>
                         <div className={`grid grid-cols-3 gap-2 pt-2 border-t border-red-200 ${isChannelNameLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                             <div className="col-span-3"><label className="text-[9px] text-gray-500 flex justify-between">Move Up/Down (Slide)</label><input type="range" name="channelNameVerticalShift" min="-50" max="50" value={details.channelNameVerticalShift} onChange={handleInputChange} className="w-full h-1" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Txt Color</label><input type="color" name="channelNameTextColor" value={details.channelNameTextColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Bg Color</label><input type="color" name="channelNameBgColor" value={details.channelNameBgColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                        </div>
                    </div>

                    <div><label className="text-xs font-bold text-gray-500 flex items-center gap-1"><Hash className="w-3 h-3"/> ID Card No.</label><input disabled={isLocked} type="text" name="idNo" value={details.idNo} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" /></div>
                    <div className="grid grid-cols-2 gap-3">
                        <div><label className="text-xs font-bold text-gray-500">Full Name</label><input disabled={isLocked} type="text" name="name" value={details.name} onChange={handleInputChange} placeholder="Name" className="w-full p-2 border rounded focus:ring-2 focus:ring-red-500 outline-none" /></div>
                        <div><label className="text-xs font-bold text-gray-500">Designation</label><select disabled={isLocked} name="designation" value={details.designation} onChange={handleInputChange} className="w-full p-2 border rounded bg-white outline-none"><option>Reporter</option><option>Editor-in-Chief</option><option>Cameraman</option></select></div>
                    </div>
                    <div><label className="text-xs font-bold text-gray-500">Franchise Text</label><input disabled={isLocked} type="text" name="franchiseText" value={details.franchiseText} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" /></div>
                    <div><label className="text-xs font-bold text-gray-500">Agency / Tagline (Front)</label><input disabled={isLocked} type="text" name="agencyText" value={details.agencyText} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" /></div>
                    
                    {/* AGENCY STRIP SETTINGS */}
                    <div className="bg-gray-100 p-2 rounded border border-gray-300 mt-2 space-y-2">
                        <h3 className="text-xs font-bold text-gray-800 flex items-center gap-1"><Edit3 className="w-3 h-3"/> Agency Strip Settings</h3>
                        <div className={`grid grid-cols-3 gap-2 pt-1 ${isLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                            <div><label className="text-[9px] text-gray-500 flex justify-between">Size: {details.agencySize}px</label><input type="range" name="agencySize" min="6" max="20" value={details.agencySize} onChange={handleInputChange} className="w-full h-1" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Txt Color</label><input type="color" name="agencyTextColor" value={details.agencyTextColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Bg Color</label><input type="color" name="agencyBgColor" value={details.agencyBgColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                        </div>
                    </div>

                    <div><label className="text-xs font-bold text-gray-500">RNI No.</label><input disabled={isLocked} type="text" name="rniNo" value={details.rniNo} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" /></div>
                    <div className="grid grid-cols-2 gap-3">
                        <div><label className="text-xs font-bold text-gray-500">Phone No.</label><input disabled={isLocked} type="text" name="phone" value={details.phone} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" /></div>
                        <div><label className="text-xs font-bold text-gray-500 flex items-center gap-1"><Calendar className="w-3 h-3"/> Valid Upto</label><input disabled={isLocked} type="date" name="validUntil" value={details.validUntil} onChange={handleInputChange} className="w-full p-2 border rounded outline-none bg-white" /></div>
                    </div>
                    <div><label className="text-xs font-bold text-gray-500">Blood Group</label><input disabled={isLocked} type="text" name="bloodGroup" value={details.bloodGroup} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" placeholder="Ex: B+" /></div>
                    
                    {/* SIGNATURE LABEL INPUT & SETTINGS */}
                    <div>
                        <label className="text-xs font-bold text-gray-500">Signature Label</label>
                        <input disabled={isLocked} type="text" name="sigTitle" value={details.sigTitle} onChange={handleInputChange} className="w-full p-2 border rounded outline-none" placeholder="Ex: Holder's Signature" />
                        
                        {/* NEW: Sig Label Color & Size Controls */}
                        <div className={`mt-1 grid grid-cols-2 gap-2 ${isLocked ? 'opacity-50 pointer-events-none' : ''}`}>
                            <div className="flex items-center gap-1">
                                <label className="text-[9px] text-gray-500">Color</label>
                                <input type="color" name="sigLabelColor" value={details.sigLabelColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" />
                            </div>
                             <div className="flex flex-col justify-center">
                                 <label className="text-[9px] text-gray-500 flex justify-between">Size: {details.sigLabelSize}px</label>
                                 <input type="range" name="sigLabelSize" min="6" max="20" value={details.sigLabelSize} onChange={handleInputChange} className="w-full h-1 bg-gray-200 rounded-lg cursor-pointer" />
                            </div>
                        </div>
                    </div>

                    
                    {/* FRONT FOOTER SETTINGS SECTION */}
                    <div className="bg-red-50 p-3 rounded border border-red-200 mt-2 space-y-2">
                        <h3 className="text-xs font-bold text-red-800 flex items-center gap-1"><Edit3 className="w-3 h-3"/> Front Footer Strip Settings</h3>
                        <div>
                            <label className="text-[10px] font-bold text-gray-500">Footer Text</label>
                            <input disabled={isLocked} type="text" name="bottomStripText" value={details.bottomStripText} onChange={handleInputChange} className="w-full p-1.5 border rounded text-xs outline-none" placeholder="Enter footer text..." />
                        </div>
                        <div className={`grid grid-cols-3 gap-2 pt-2 border-t border-red-200 ${isLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                            <div><label className="text-[9px] text-gray-500 flex justify-between">Size: {details.bottomStripSize}px</label><input type="range" name="bottomStripSize" min="10" max="40" value={details.bottomStripSize} onChange={handleInputChange} className="w-full h-1" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Txt Color</label><input type="color" name="bottomStripTextColor" value={details.bottomStripTextColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                            <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Bg Color</label><input type="color" name="bottomStripBgColor" value={details.bottomStripBgColor} onChange={handleInputChange} className="h-6 w-8 rounded border cursor-pointer p-0" /></div>
                        </div>
                    </div>

                    {/* QR CODE SETTINGS (FRONT) */}
                     <div className="bg-indigo-50 p-2 rounded border border-indigo-200 mt-2">
                        <div className="flex items-center justify-between mb-2">
                             <label className="text-xs font-bold text-indigo-800 flex items-center gap-1"><QrCode className="w-3 h-3"/> Show QR (Front)</label>
                             <input disabled={isLocked} type="checkbox" name="isQrCodeFront" checked={details.isQrCodeFront} onChange={handleInputChange} className="w-4 h-4 cursor-pointer" />
                        </div>
                        {details.isQrCodeFront && (
                             <div className="space-y-2">
                                <input disabled={isLocked} type="text" name="qrCodeData" value={details.qrCodeData} onChange={handleInputChange} placeholder="Auto ID (or type custom url)" className="w-full p-1 text-xs border rounded" />
                                <div className="grid grid-cols-2 gap-2">
                                     <div><label className="text-[10px] text-gray-500">Size</label><input disabled={isLocked} type="range" name="qrSize" min="30" max="120" value={details.qrSize} onChange={handleInputChange} className="w-full h-1" /></div>
                                     <div><label className="text-[10px] text-gray-500">Top</label><input disabled={isLocked} type="range" name="qrFrontTop" min="0" max="500" value={details.qrFrontTop} onChange={handleInputChange} className="w-full h-1" /></div>
                                </div>
                                <div><label className="text-[10px] text-gray-500">Left</label><input disabled={isLocked} type="range" name="qrFrontLeft" min="0" max="300" value={details.qrFrontLeft} onChange={handleInputChange} className="w-full h-1" /></div>
                            </div>
                        )}
                    </div>

                    {/* LABEL EDITOR SECTION - UPGRADED */}
                    <div className="bg-yellow-50 p-3 rounded border border-yellow-200 mt-2">
                        <div className="flex justify-between items-center mb-2">
                            <h3 className="text-xs font-bold text-yellow-800 flex items-center gap-1"><Edit3 className="w-3 h-3"/> Manually Edit Labels</h3>
                            {/* LABEL LOCK BUTTON */}
                            <button 
                                onClick={() => setIsLabelLocked(!isLabelLocked)}
                                className={`p-1 rounded ${isLabelLocked ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}
                                title={isLabelLocked ? "Unlock Labels" : "Lock Labels"}
                            >
                                {isLabelLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
                            </button>
                        </div>
                        <div className={`grid grid-cols-2 gap-2 ${isLabelLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                            <input type="text" name="labelId" value={details.labelId} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <input type="text" name="labelName" value={details.labelName} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <input type="text" name="labelDesig" value={details.labelDesig} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <input type="text" name="labelPhone" value={details.labelPhone} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <input type="text" name="labelValid" value={details.labelValid} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <input type="text" name="labelBlood" value={details.labelBlood} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" />
                            <div className="col-span-2"><label className="text-[9px] text-gray-500">RNI Label</label><input type="text" name="labelRni" value={details.labelRni} onChange={handleInputChange} className="w-full p-1 text-xs border rounded" /></div>
                            
                            <div className="col-span-2 mt-2 pt-2 border-t border-yellow-300">
                                <p className="text-[9px] font-bold text-yellow-900 mb-1">Label Styles (Color & Size)</p>
                                <div className="grid grid-cols-3 gap-2">
                                    <div><label className="text-[9px] text-gray-500">Width</label><input type="range" name="labelColumnWidth" min="80" max="180" value={details.labelColumnWidth} onChange={handleInputChange} className="w-full h-1" /></div>
                                    <div><label className="text-[9px] text-gray-500">Size</label><input type="range" name="labelFontSize" min="10" max="20" value={details.labelFontSize} onChange={handleInputChange} className="w-full h-1" /></div>
                                    <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Color</label><input type="color" name="labelColor" value={details.labelColor} onChange={handleInputChange} className="h-4 w-6 rounded border cursor-pointer" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Style Settings (With Logo Color Grading) */}
                <div className="bg-gray-50 p-3 rounded-lg border border-gray-200 space-y-3 mt-4">
                    <h3 className="text-sm font-bold text-gray-700 flex items-center gap-1"><Palette className="w-4 h-4" /> Style Settings</h3>
                    <div className="space-y-2 pt-2 border-t border-gray-200">
                         <div><label className="text-[10px] text-gray-500 flex justify-between">Photo Size</label><input type="range" name="photoSize" min="50" max="200" value={details.photoSize} onChange={handleInputChange} className="w-full h-1 bg-gray-200 rounded-lg cursor-pointer" /></div>
                         
                         {/* NEW: Border Color Settings */}
                         <div className="border-t border-gray-200 pt-2 mt-2">
                            <p className="text-xs font-bold text-gray-600 mb-1">Border Line Colors</p>
                            <div className="grid grid-cols-2 gap-2">
                                <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Outer Line</label><input type="color" name="outerBorderColor" value={details.outerBorderColor} onChange={handleInputChange} className="h-4 w-6 rounded border cursor-pointer" /></div>
                                <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Inner Line</label><input type="color" name="innerBorderColor" value={details.innerBorderColor} onChange={handleInputChange} className="h-4 w-6 rounded border cursor-pointer" /></div>
                            </div>
                         </div>

                         {/* Logo Controls */}
                        <div className="border-t border-gray-200 pt-2">
                            <p className="text-xs font-bold text-gray-600 mb-1">Left Logo</p>
                            <div className="grid grid-cols-2 gap-2">
                                <div><label className="text-[9px] text-gray-500">Pos Y</label><input type="range" name="logoTop" min="-60" max="60" value={details.logoTop} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Pos X</label><input type="range" name="logoLeft" min="0" max="100" value={details.logoLeft} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Bright</label><input type="range" name="logo1Brightness" min="0" max="200" value={details.logo1Brightness} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Contrast</label><input type="range" name="logo1Contrast" min="0" max="200" value={details.logo1Contrast} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Border W</label><input type="range" name="logo1BorderWidth" min="0" max="10" value={details.logo1BorderWidth} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Border</label><input type="color" name="logo1BorderColor" value={details.logo1BorderColor} onChange={handleInputChange} className="h-4 w-6 rounded border cursor-pointer" /></div>
                            </div>
                        </div>
                        
                         <div className="border-t border-gray-200 pt-2">
                            <p className="text-xs font-bold text-gray-600 mb-1">Right Logo</p>
                             <div className="grid grid-cols-2 gap-2">
                                <div><label className="text-[9px] text-gray-500">Pos Y</label><input type="range" name="logo2Top" min="-60" max="60" value={details.logo2Top} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Pos X</label><input type="range" name="logo2Right" min="0" max="100" value={details.logo2Right} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Bright</label><input type="range" name="logo2Brightness" min="0" max="200" value={details.logo2Brightness} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Contrast</label><input type="range" name="logo2Contrast" min="0" max="200" value={details.logo2Contrast} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div><label className="text-[9px] text-gray-500">Border W</label><input type="range" name="logo2BorderWidth" min="0" max="10" value={details.logo2BorderWidth} onChange={handleInputChange} className="w-full h-1" /></div>
                                <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Border</label><input type="color" name="logo2BorderColor" value={details.logo2BorderColor} onChange={handleInputChange} className="h-4 w-6 rounded border cursor-pointer" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          )}

          {/* === BACK SIDE FORM === */}
          {activeTab === 'back' && (
            <div className="animate-in fade-in duration-300">
                {/* ... Back Side Controls ... */}
                <div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
                    <h3 className="text-sm font-bold text-orange-800 mb-3 flex items-center gap-2"><MapPin className="w-4 h-4" /> Company Details</h3>
                    <div className="space-y-3">
                        <input disabled={isLocked} type="text" name="backChannelName" value={details.backChannelName} onChange={handleInputChange} className="w-full p-2 border rounded text-sm uppercase" />
                        <input disabled={isLocked} type="text" name="backAgencyText" value={details.backAgencyText} onChange={handleInputChange} className="w-full p-2 border rounded text-sm uppercase" />
                        <input disabled={isLocked} type="text" name="backRniNo" value={details.backRniNo} onChange={handleInputChange} className="w-full p-2 border rounded text-sm" />
                        <textarea disabled={isLocked} name="officeAddress" value={details.officeAddress} onChange={handleInputChange} rows="2" className="w-full p-2 border rounded text-sm outline-none" />
                        
                        {/* BACK FOOTER SETTINGS SECTION (LOCKED TOGGLE) */}
                         <div className="bg-white p-2 rounded border border-gray-200 mt-2">
                            <div className="flex justify-between items-center mb-1">
                                <p className="text-[9px] font-bold text-orange-900">Back Footer Style</p>
                                <button 
                                    onClick={() => setIsBackFooterLocked(!isBackFooterLocked)}
                                    className={`p-1 rounded ${isBackFooterLocked ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}
                                >
                                    {isBackFooterLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
                                </button>
                            </div>
                             <div className={`space-y-2 ${isBackFooterLocked ? 'opacity-60 pointer-events-none' : ''}`}>
                                <input type="text" name="backBottomStripText" value={details.backBottomStripText} onChange={handleInputChange} className="w-full p-1.5 border rounded text-xs" placeholder="Footer Text (Back)" />
                                <div className="grid grid-cols-3 gap-2">
                                    <div><label className="text-[9px] text-gray-500">Size</label><input type="range" name="backBottomStripSize" min="10" max="30" value={details.backBottomStripSize} onChange={handleInputChange} className="w-full h-1" /></div>
                                    <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Txt Color</label><input type="color" name="backBottomStripTextColor" value={details.backBottomStripTextColor} onChange={handleInputChange} className="h-4 w-5 rounded border cursor-pointer" /></div>
                                    <div className="flex items-center gap-1"><label className="text-[9px] text-gray-500">Bg Color</label><input type="color" name="backBottomStripBgColor" value={details.backBottomStripBgColor} onChange={handleInputChange} className="h-4 w-5 rounded border cursor-pointer" /></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/* Address Image Upload */}
                    <div className="bg-white p-2 rounded border border-gray-200 mt-2">
                        <label className="text-xs font-bold text-gray-600 flex justify-between mb-1"><span>Upload Address Image</span></label>
                        <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded hover:bg-gray-50 cursor-pointer h-20" onClick={() => !isLocked && addressImageRef.current.click()}>
                            {addressImage ? <img src={addressImage} className="h-full object-contain" /> : <ImageIcon className="w-4 h-4 mb-1"/>}
                            <input disabled={isLocked} type="file" ref={addressImageRef} onChange={(e) => handleImageUpload(e, setAddressImage)} className="hidden" accept="image/*" />
                        </div>
                         {/* Address Image Size Slider */}
                        <div className="mt-2"><label className="text-[10px] font-bold text-gray-500 flex justify-between">Address Image Size <span>{details.addressImgSize}px</span></label><input type="range" name="addressImgSize" min="20" max="200" value={details.addressImgSize} onChange={handleInputChange} className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-orange-600" /></div>
                    </div>
                </div>
                {/* ... Instructions ... */}
                <div className="bg-red-50 p-4 rounded-lg border border-red-200 mt-3">
                     <div className="flex justify-between items-center mb-3">
                        <h3 className="text-sm font-bold text-red-800 flex items-center gap-2"><List className="w-4 h-4" /> Instructions</h3>
                        <input disabled={isLocked} type="color" name="instructionsTextColor" value={details.instructionsTextColor} onChange={handleInputChange} className="h-5 w-6 p-0 border border-red-300 rounded cursor-pointer" />
                    </div>
                    <div className="space-y-2">
                        <textarea name="term1" value={details.term1} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" />
                        <textarea name="term2" value={details.term2} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" />
                        <textarea name="term3" value={details.term3} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" />
                        <textarea name="term4" value={details.term4} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" />
                        <textarea name="term5" value={details.term5} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" placeholder="Instruction 5" />
                        <textarea name="term6" value={details.term6} onChange={handleInputChange} rows="2" className="w-full p-1.5 border rounded text-xs outline-none" placeholder="Instruction 6" />
                        
                        <div className="mt-3 pt-2 border-t border-red-200">
                            <label className="text-[10px] font-bold text-red-800 flex justify-between">Move Instructions <span>{details.instructionsTop}px</span></label>
                            <input disabled={isLocked} type="range" name="instructionsTop" min="-100" max="100" value={details.instructionsTop} onChange={handleInputChange} className="w-full h-1 bg-red-200 rounded-lg cursor-pointer" />
                        </div>
                    </div>
                </div>
                
                {/* Back Bg Image Upload */}
                <div className="bg-white p-2 rounded border border-gray-200 mt-2">
                    <label className="text-xs font-bold text-gray-600 flex justify-between mb-1"><span>Back Side Background</span></label>
                    <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded hover:bg-gray-50 cursor-pointer h-20" onClick={() => !isLocked && bgBackInputRef.current.click()}>
                        {bgBackImage ? <img src={bgBackImage} alt="Back Bg" className="h-full object-contain opacity-50" /> : <BgImageIcon className="w-4 h-4 mb-1"/>}
                        <input disabled={isLocked} type="file" ref={bgBackInputRef} onChange={(e) => handleImageUpload(e, setBgBackImage)} className="hidden" accept="image/*" />
                    </div>
                </div>

                {/* QR CODE SETTINGS (BACK) - TOGGLE */}
                 <div className="bg-indigo-50 p-2 rounded border border-indigo-200 mt-2">
                    <div className="flex items-center justify-between mb-2">
                            <label className="text-xs font-bold text-indigo-800 flex items-center gap-1"><QrCode className="w-3 h-3"/> Show QR (Back)</label>
                            <input disabled={isLocked} type="checkbox" name="isQrCodeBack" checked={details.isQrCodeBack} onChange={handleInputChange} className="w-4 h-4 cursor-pointer" />
                    </div>
                    {details.isQrCodeBack && (
                        <div className="space-y-2">
                            <div className="grid grid-cols-2 gap-2">
                                    <div><label className="text-[10px] text-gray-500">Size</label><input disabled={isLocked} type="range" name="qrSize" min="30" max="120" value={details.qrSize} onChange={handleInputChange} className="w-full h-1" /></div>
                                    <div><label className="text-[10px] text-gray-500">Top</label><input disabled={isLocked} type="range" name="qrBackTop" min="0" max="500" value={details.qrBackTop} onChange={handleInputChange} className="w-full h-1" /></div>
                            </div>
                            <div><label className="text-[10px] text-gray-500">Left</label><input disabled={isLocked} type="range" name="qrBackLeft" min="0" max="300" value={details.qrBackLeft} onChange={handleInputChange} className="w-full h-1" /></div>
                        </div>
                    )}
                </div>

                {/* Stamp Area Controls */}
                 <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 mt-3">
                     <div className="flex items-center justify-between mb-3">
                        <h3 className="text-sm font-bold text-gray-800 flex items-center gap-2"><Stamp className="w-4 h-4" /> Stamp & Authority</h3>
                        <label className="flex items-center gap-1 cursor-pointer bg-white px-2 py-1 rounded border border-gray-300 shadow-sm">
                            <input type="checkbox" name="isAutoStamp" checked={details.isAutoStamp} onChange={handleInputChange} className="w-3 h-3 text-purple-600 rounded" />
                            <span className="text-[10px] font-bold text-purple-700 flex items-center gap-1"><Wand2 className="w-3 h-3"/> Auto-Generate Stamp</span>
                        </label>
                     </div>

                     <div className="grid grid-cols-2 gap-4">
                        {/* Stamp Area Logic */}
                        {details.isAutoStamp ? (
                            <div className="bg-purple-50 p-2 rounded border border-purple-200 col-span-2 sm:col-span-1">
                                <p className="text-[10px] font-bold text-purple-800 mb-1">Auto Stamp Settings</p>
                                <input type="text" name="stampText" value={details.stampText} onChange={handleInputChange} className="w-full p-1 mb-1 text-[10px] border rounded" placeholder="Top Text" />
                                <input type="text" name="stampBottomText" value={details.stampBottomText} onChange={handleInputChange} className="w-full p-1 mb-1 text-[10px] border rounded" placeholder="Bottom Text" />
                                <input type="text" name="stampSubText" value={details.stampSubText} onChange={handleInputChange} className="w-full p-1 mb-1 text-[10px] border rounded" placeholder="Center Text" />
                                <div className="flex items-center gap-2 mb-1"><label className="text-[10px] text-gray-500">Color:</label><input type="color" name="stampColor" value={details.stampColor} onChange={handleInputChange} className="h-5 w-8 p-0 border rounded cursor-pointer" /></div>
                            </div>
                        ) : (
                            <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-white hover:bg-gray-50 cursor-pointer text-center h-28" onClick={() => stampInputRef.current.click()}>
                                {stampImage ? <img src={stampImage} alt="Stamp" className="w-full h-full object-contain" /> : <Stamp className="w-6 h-6 text-gray-400" />}<span className="text-[9px] text-gray-500 mt-1">Upload Stamp</span>
                                <input type="file" ref={stampInputRef} onChange={(e) => handleImageUpload(e, setStampImage)} className="hidden" accept="image/*" />
                            </div>
                        )}
                        <div className="flex flex-col items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg bg-white hover:bg-gray-50 cursor-pointer text-center h-28" onClick={() => authoritySigInputRef.current.click()}>
                             {authoritySigImage ? <img src={authoritySigImage} alt="Auth" className="w-full h-full object-contain" /> : <PenTool className="w-6 h-6 text-gray-400" />}<span className="text-[9px] text-gray-500 mt-1">Authority Sign</span>
                             <input type="file" ref={authoritySigInputRef} onChange={(e) => handleImageUpload(e, setAuthoritySigImage)} className="hidden" accept="image/*" />
                        </div>
                     </div>
                     {/* Authority Signature Size Slider */}
                     <div className="mt-3">
                        <label className="text-[10px] font-bold text-gray-500 flex justify-between">Authority Sign Size <span>{details.authSigSize}px</span></label><input type="range" name="authSigSize" min="20" max="100" value={details.authSigSize} onChange={handleInputChange} className="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600" />
                     </div>
                </div>
            </div>
          )}

          {/* === DATABASE TAB === */}
          {activeTab === 'database' && (
              <div className="animate-in fade-in duration-300">
                  {/* ... Database controls ... */}
                   <div className="flex gap-2 mb-4 flex-wrap">
                      <button onClick={handleExportExcel} className="bg-green-600 text-white px-3 py-1.5 rounded text-xs font-bold flex items-center gap-1"><FileSpreadsheet className="w-3 h-3"/> Export Excel</button>
                      <button onClick={handleExportPDF} className="bg-red-600 text-white px-3 py-1.5 rounded text-xs font-bold flex items-center gap-1"><FileType className="w-3 h-3"/> Export List PDF</button>
                      <button onClick={handleDownloadDatabase} className="bg-blue-600 text-white px-3 py-1.5 rounded text-xs font-bold flex items-center gap-1"><FileJson className="w-3 h-3"/> Export JSON</button>
                      <button onClick={handleClearAllRecords} className="bg-gray-600 text-white px-3 py-1.5 rounded text-xs font-bold flex items-center gap-1"><Trash2 className="w-3 h-3"/> Clear All</button>
                  </div>
                  {/* ... Record List ... */}
                  {savedRecords.length === 0 ? <div className="text-center py-10 text-gray-400 bg-gray-50 rounded border border-dashed border-gray-300"><p>No records saved yet.</p></div> : 
                      <div className="space-y-2">
                          {savedRecords.map((record) => (
                              <div key={record.id} className="bg-white p-2 rounded border flex justify-between items-center shadow-sm">
                                  <div><p className="font-bold text-xs">{record.data?.name}</p><p className="text-[10px] text-gray-500">{record.date}</p></div>
                                  <div className="flex gap-2"><button onClick={() => handleLoadRecord(record)} className="text-blue-600"><UploadCloud className="w-4 h-4"/></button><button onClick={() => handleDeleteRecord(record.id)} className="text-red-600"><Trash2 className="w-4 h-4"/></button></div>
                              </div>
                          ))}
                      </div>
                  }
              </div>
          )}
        </div>

        {/* PRINT & SAVE BUTTONS */}
        <div className="mt-4 flex flex-col gap-2 print:hidden">
             {activeTab !== 'database' && (
                <div className="flex gap-2 mb-2">
                    <button onClick={handleSaveRecord} disabled={isLocked} className="flex-1 bg-green-600 hover:bg-green-700 text-white py-2.5 rounded shadow text-xs font-bold flex justify-center gap-1"><Save className="w-4 h-4"/> Save Record</button>
                    <button onClick={handleClearForm} disabled={isLocked} className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 py-2.5 rounded shadow text-xs font-bold flex justify-center gap-1"><RotateCcw className="w-4 h-4"/> Reset Data</button>
                </div>
             )}
             <div className="flex gap-2">
                <button onClick={() => handleSaveImage('front')} className="flex-1 bg-blue-600 text-white py-2 rounded shadow text-xs font-bold flex justify-center gap-1"><Download className="w-4 h-4"/> Save Front (PNG)</button>
                <button onClick={() => handleSaveImage('back')} className="flex-1 bg-green-600 text-white py-2 rounded shadow text-xs font-bold flex justify-center gap-1"><Download className="w-4 h-4"/> Save Back (PNG)</button>
            </div>
            <div className="flex gap-2">
                <button onClick={() => handleSaveCardPDF('front')} className="flex-1 bg-indigo-600 text-white py-2 rounded shadow text-xs font-bold flex justify-center gap-1"><FileText className="w-4 h-4"/> PDF Front</button>
                <button onClick={() => handleSaveCardPDF('back')} className="flex-1 bg-indigo-600 text-white py-2 rounded shadow text-xs font-bold flex justify-center gap-1"><FileText className="w-4 h-4"/> PDF Back</button>
            </div>
            <button onClick={handleExportWord} className="w-full bg-orange-600 hover:bg-orange-700 text-white py-2 rounded-lg shadow text-xs font-bold flex justify-center gap-1"><FileWord className="w-4 h-4"/> Save Word (A4)</button>
        </div>
      </div>

      {/* --- PREVIEW SECTION (Front & Back) --- */}
      <div className="w-full md:w-7/12 flex flex-col md:flex-row flex-wrap items-start justify-center gap-8 pt-2 pb-10 overflow-y-auto">
        
        {/* FRONT PREVIEW */}
        <div className={`flex flex-col items-center gap-2 ${activeTab === 'front' || activeTab === 'database' ? 'block' : 'hidden print:block'}`}>
            <span className="text-sm font-bold text-gray-400 uppercase tracking-widest print:hidden">Front Side Preview</span>
            <div 
            id="id-card-front" 
            className="w-[350px] h-[520px] relative border-2 border-gray-300 print:shadow-none print:border print:border-gray-300 print:m-0 overflow-hidden bg-white shadow-xl"
            style={{ 
                borderColor: details.cardBorderColor,
                backgroundColor: details.bgColor,
                backgroundImage: bgLogo ? `url(${bgLogo})` : 'none',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat'
            }}
            >
                {/* Double Border Container */}
                <div className="w-full h-full p-1.5 border-[3px]" style={{ borderColor: details.outerBorderColor }}>
                <div className="w-full h-full border-[2px] flex flex-col items-center relative" style={{ borderColor: details.innerBorderColor, backgroundColor: details.bgColor + 'DD' }}>

                    {/* Header */}
                    <div 
                        className="w-full text-center font-bold tracking-wide leading-none mt-2 z-10 px-4 py-1 shadow-sm"
                        style={{ 
                            color: details.pressTextColor, 
                            backgroundColor: details.pressBgColor,
                            marginTop: `${details.pressHeaderTop}px`,
                            fontSize: `${details.pressHeaderSize}px`,
                            fontFamily: 'serif',
                            display: 'inline-block',
                            border: `${details.pressBorderWidth}px solid ${details.pressBorderColor}`,
                            width: 'auto' // Fit content width
                        }}
                    >
                        {details.headerText}
                    </div>

                    {/* Logos */}
                    <div className={`w-full flex justify-between mb-0 min-h-[40px] z-20 absolute top-14 ${details.logoTouchBorder ? 'px-0' : 'px-4'}`}>
                        <div style={{ marginTop: `${details.logoTop}px`, marginLeft: `${details.logoLeft}px`, transform: 'translateY(-10px)' }}>
                            {logoImage && <img src={logoImage} alt="L" className="object-contain" style={{ 
                                width: `${details.logoSize}px`, 
                                maxHeight: '80px', 
                                filter: `brightness(${details.logo1Brightness}%) contrast(${details.logo1Contrast}%) grayscale(${details.logo1Grayscale}%)`,
                                border: `${details.logo1BorderWidth}px solid ${details.logo1BorderColor}`
                            }} />}
                        </div>
                        <div style={{ marginTop: `${details.logo2Top}px`, marginRight: `${details.logo2Right}px`, transform: 'translateY(-10px)' }}>
                            {logo2Image && <img src={logo2Image} alt="R" className="object-contain" style={{ 
                                width: `${details.logo2Size}px`, 
                                maxHeight: '80px', 
                                filter: `brightness(${details.logo2Brightness}%) contrast(${details.logo2Contrast}%) grayscale(${details.logo2Grayscale}%)`,
                                border: `${details.logo2BorderWidth}px solid ${details.logo2BorderColor}`
                            }} />}
                        </div>
                    </div>

                    <div className="h-1 w-full"></div>

                    {/* Content - Tightened Spacing */}
                    <div className="w-full flex flex-col items-center z-10 -mt-3" style={{ marginTop: `${details.contentTop}px` }}>
                        
                         {/* ATTACHED STRIP GROUP */}
                         <div className="w-full flex flex-col items-center bg-transparent">
                             <div 
                                className="w-full text-center font-bold py-0.5 uppercase tracking-wide" 
                                style={{ 
                                    fontSize: `${details.channelNameSize}px`,
                                    backgroundColor: details.channelNameBgColor, 
                                    color: details.channelNameTextColor,
                                    transform: `translateY(${details.channelNameVerticalShift}px)` 
                                }}
                            >
                                {details.channelName}
                            </div>

                            <div 
                                className="text-center font-bold uppercase mt-0.5" 
                                style={{ 
                                    color: details.mainTextColor,
                                    fontSize: `${details.franchiseSize}px`,
                                    lineHeight: '1.1',
                                    transform: `translateY(${details.channelNameVerticalShift}px)` 
                                }}
                            >
                                {details.franchiseText.includes('INDIA') ? <>{details.franchiseText.split('INDIA')[0]} <span className="text-[#D32F2F]">INDIA</span>{details.franchiseText.split('INDIA')[1]}</> : details.franchiseText}
                            </div>
                         </div>

                        {/* Agency/Tagline Black Strip with Configurable Colors */}
                        <div 
                            className="w-[95%] text-center font-bold py-0.5 mt-0.5 rounded-sm uppercase tracking-wide"
                            style={{ 
                                fontSize: `${details.agencySize}px`,
                                backgroundColor: details.agencyBgColor,
                                color: details.agencyTextColor,
                                transform: `translateY(${details.channelNameVerticalShift}px)` 
                            }}
                        >
                            {details.agencyText}
                        </div>

                        <div 
                            className="text-center font-bold mt-0.5 w-full px-4" 
                            style={{ 
                                color: details.mainTextColor, 
                                fontSize: `${details.rniSize}px`,
                                transform: `translateY(${details.channelNameVerticalShift}px)` 
                            }}
                        >
                            {details.labelRni} &nbsp;&nbsp;&nbsp; <span className="font-normal">{details.rniNo}</span>
                        </div>

                        {/* Photo Section with Shape Toggle */}
                        <div 
                            className={`mt-1 bg-black flex items-center justify-center overflow-hidden shadow-sm ${details.isPhotoRound ? 'rounded-full' : ''}`} 
                            style={{ 
                                width: `${details.photoSize}px`, 
                                height: `${details.photoSize}px`,
                                borderWidth: '2px',
                                borderStyle: 'solid',
                                borderColor: details.photoBorderColor,
                                transform: `translateY(${details.channelNameVerticalShift}px)` // Attached to strip
                            }}
                        >
                            {personImage ? <img src={personImage} alt="Reporter" className="w-full h-full object-cover" /> : <div className="text-white font-bold text-xs">PHOTO</div>}
                        </div>

                        <div 
                            className="w-full px-8 mt-2 font-bold space-y-0.5" 
                            style={{ 
                                color: details.mainTextColor,
                                fontSize: `${details.detailsTextSize}px`,
                                transform: `translateY(${details.channelNameVerticalShift}px)` // Attached to strip
                            }}
                        >
                            {/* Labels with Custom Style */}
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelId}</span><span className="mr-2">:</span><span className="uppercase">{details.idNo}</span></div>
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelName}</span><span className="mr-2">:</span><span className="uppercase">{details.name}</span></div>
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelDesig}</span><span className="mr-2">:</span><span className="uppercase">{details.designation}</span></div>
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelPhone}</span><span className="mr-2">:</span><span>{details.phone}</span></div>
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelValid}</span><span className="mr-2">:</span><span>{formatDate(details.validUntil)}</span></div>
                            <div className="flex items-center"><span style={{ width: `${details.labelColumnWidth}px`, fontSize: `${details.labelFontSize}px`, color: details.labelColor }}>{details.labelBlood}</span><span className="mr-2">:</span><span className="uppercase text-red-600">{details.bloodGroup}</span></div>
                        </div>
                    </div>

                    {/* Holder Signature with Dynamic Size */}
                    <div className="absolute bottom-10 w-full flex flex-col items-end justify-end pr-0 z-20">
                        {signatureImage ? (
                            <img 
                                src={signatureImage} 
                                alt="Sig" 
                                className="object-contain mb-1" 
                                style={{ height: `${details.sigSize}px` }} 
                            /> 
                        ) : (
                            <div className="h-8 border-b border-gray-400 mb-1" style={{ width: `${details.sigLineWidth}px` }}></div>
                        )}
                        <span 
                            className="text-[10px] font-bold uppercase tracking-wider text-center w-32" 
                            style={{ color: details.sigLabelColor, fontSize: `${details.sigLabelSize}px` }} // Applied Sig Label Size & Color
                        >
                            {details.sigTitle}
                        </span>
                    </div>
                     {/* QR Code on Front if Enabled */}
                     {details.isQrCodeFront && (
                         <div className="absolute z-30" style={{ top: `${details.qrFrontTop}px`, left: `${details.qrFrontLeft}px` }}>
                             <img src={qrCodeUrl} style={{ width: `${details.qrSize}px`, height: `${details.qrSize}px` }} alt="QR Code" />
                         </div>
                     )}

                    {/* Footer Strip */}
                    <div className="absolute bottom-0 w-full text-center font-bold py-1 uppercase tracking-wider z-0"
                        style={{ 
                            backgroundColor: details.bottomStripBgColor, 
                            color: details.bottomStripTextColor, 
                            fontSize: `${details.bottomStripSize}px` 
                        }}
                    >
                        {details.bottomStripText}
                    </div>
                </div>
                </div>
            </div>
         </div>

         {/* BACK PREVIEW */}
         <div style={{ display: (activeTab === 'back' || activeTab === 'database') ? 'block' : 'hidden print:block' }}>
             <div 
            id="id-card-back" 
            className="w-[350px] h-[520px] relative border-2 border-gray-300 print:shadow-none print:border print:border-gray-300 print:m-0 overflow-hidden bg-white shadow-xl"
            style={{ borderColor: details.cardBorderColor,
                backgroundColor: details.bgColor,
                backgroundImage: bgBackImage ? `url(${bgBackImage})` : 'none',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat'
            }}
            >
                {/* Double Border Container */}
                <div className="w-full h-full p-1.5 border-[3px]" style={{ borderColor: details.outerBorderColor }}>
                <div className="w-full h-full border-[2px] flex flex-col items-center relative py-4 px-2" style={{ borderColor: details.innerBorderColor, backgroundColor: details.bgColor + 'DD' }}>
                    
                    {/* 1. Header Section with Background Strip & Custom Text */}
                    <h2 
                        className="text-2xl font-bold uppercase text-center leading-tight tracking-wider px-2 py-1 rounded" 
                        style={{ 
                            fontSize: `${details.channelNameSize}px`,
                            backgroundColor: details.backHeaderBgColor,
                            color: details.backHeaderTextColor,
                            marginTop: `${details.backHeaderTop}px`
                        }}
                    >
                        {details.backChannelName}
                    </h2>
                    
                    <div 
                        className="text-center mt-2 font-bold uppercase text-black"
                        style={{ fontSize: `${details.franchiseSize}px` }}
                    >
                         {details.franchiseText.includes('INDIA') ? <>{details.franchiseText.split('INDIA')[0]} <span className="text-[#D32F2F]">INDIA</span>{details.franchiseText.split('INDIA')[1]}</> : details.franchiseText}
                    </div>

                    {/* Black Strip (Also using editable agency text) */}
                    <div 
                        className="w-[95%] text-center font-bold py-1 mt-1 rounded-sm uppercase tracking-wide"
                        style={{ 
                            fontSize: `${details.agencySize}px`,
                            backgroundColor: details.agencyBgColor,
                            color: details.agencyTextColor
                        }}
                    >
                            {details.backAgencyText}
                    </div>

                    <div className="text-center font-bold mt-1 w-full px-4 text-sm text-black">
                         {details.labelBackRni} &nbsp;&nbsp;&nbsp; <span className="font-normal">{details.backRniNo}</span>
                    </div>

                    {/* Red Divider */}
                    <div className="w-full h-[2px] bg-[#D32F2F] my-3"></div>

                    {/* 2. Instructions Section (Wrapped for sliding) */}
                    <div style={{ marginTop: `${details.instructionsTop}px` }}>
                        <h3 className="text-lg font-bold uppercase text-center mb-3" style={{ color: details.instructionsTextColor }}>{details.labelInstruction}</h3>
                        
                        <div className="w-full px-4 text-[11px] font-bold space-y-3 leading-tight text-justify" style={{ color: details.instructionsTextColor }}>
                            <div className="flex gap-2"><span>1.</span><p>{details.term1}</p></div>
                            <div className="flex gap-2"><span>2.</span><p>{details.term2}</p></div>
                            <div className="flex gap-2"><span>3.</span><p>{details.term3}</p></div>
                            <div className="flex gap-2"><span>4.</span><p>{details.term4}</p></div>
                            {details.term5 && <div className="flex gap-2"><span>5.</span><p>{details.term5}</p></div>}
                            {details.term6 && <div className="flex gap-2"><span>6.</span><p>{details.term6}</p></div>}
                        </div>
                    </div>

                    {/* Stamp Area with Authority Signature */}
                    <div className="mt-8 mb-4 flex justify-between items-center w-full px-6">
                        
                        {/* STAMP LOGIC */}
                        {details.isAutoStamp ? (
                            <div className="relative transform -rotate-12">
                                <svg width="90" height="90" viewBox="0 0 100 100">
                                    <path id="cpT" d="M 15,50 A 35,35 0 1,1 85,50" fill="none" />
                                    <path id="cpB" d="M 18,50 A 32,32 0 0,0 82,50" fill="none" />
                                    <circle cx="50" cy="50" r="42" stroke={details.stampColor} strokeWidth="2" fill="none" />
                                    <circle cx="50" cy="50" r="30" stroke={details.stampColor} strokeWidth="1" fill="none" />
                                    <text fill={details.stampColor} fontSize="8.5" fontWeight="bold" letterSpacing="0.5">
                                        <textPath href="#circlePathTop" startOffset="50%" textAnchor="middle">
                                            {details.stampText}
                                        </textPath>
                                    </text>

                                    <text fill={details.stampColor} fontSize="7" fontWeight="bold" letterSpacing="0.5">
                                        <textPath href="#circlePathBottom" startOffset="50%" textAnchor="middle">
                                            {details.stampBottomText}
                                        </textPath>
                                    </text>

                                    <text x="50" y="53" textAnchor="middle" fill={details.stampColor} fontSize="7" fontWeight="bold">
                                        {details.stampSubText}
                                    </text>

                                    {details.showStampStars && (
                                        <>
                                            <text x="12" y="53" fill={details.stampColor} fontSize="10" fontWeight="bold">★</text>
                                            <text x="80" y="53" fill={details.stampColor} fontSize="10" fontWeight="bold">★</text>
                                        </>
                                    )}
                                </svg>
                            </div>
                        ) : (
                            // UPLOADED IMAGE STAMP
                            stampImage ? (
                                <div className="relative transform -rotate-12">
                                    <img src={stampImage} alt="Stamp" className="w-20 h-20 object-contain opacity-80" />
                                </div>
                            ) : (
                                <div className="w-20 h-20 border-2 border-dashed border-red-300 rounded-full flex items-center justify-center text-red-300 text-[10px] font-bold uppercase transform -rotate-12">
                                    STAMP AREA
                                </div>
                            )
                        )}

                        {/* Authority Signature Display */}
                        {authoritySigImage && (
                            <div className="flex flex-col items-center">
                                <img 
                                    src={authoritySigImage} 
                                    alt="Auth" 
                                    className="object-contain mb-1" 
                                    style={{ height: `${details.authSigSize}px` }} 
                                />
                                <span className="text-[10px] font-bold text-black uppercase">Authority</span>
                            </div>
                        )}
                    </div>

                    {/* Footer Section - with Image option */}
                    <div className="w-full mt-auto">
                        <div className="w-full h-[2px] bg-[#D32F2F] mb-2"></div>
                        {/* Separate Back Footer Text Strip */}
                        <div className="w-full text-center font-bold py-1 uppercase tracking-wider z-0 mb-1" style={{ backgroundColor: details.backBottomStripBgColor, color: details.backBottomStripTextColor, fontSize: `${details.backBottomStripSize}px` }}>
                             {details.backBottomStripText}
                        </div>
                        <div className="text-center w-full">
                            <h4 className="text-xs font-bold text-black uppercase mb-1">{details.labelOfficeAddr}</h4>
                            {addressImage ? (
                                <img 
                                    src={addressImage} 
                                    alt="Address" 
                                    className="w-full object-contain mb-1" 
                                    style={{ height: `${details.addressImgSize}px` }} 
                                />
                            ) : (
                                <p 
                                    className="font-bold text-black px-4"
                                    style={{ fontSize: `${details.addressSize}px` }} 
                                >
                                    {details.officeAddress}
                                </p>
                            )}
                        </div>
                    </div>
                     {/* QR Code on Back if Enabled */}
                     {details.isQrCodeBack && (
                         <div className="absolute z-30" style={{ top: `${details.qrBackTop}px`, left: `${details.qrBackLeft}px` }}>
                             <img src={qrCodeUrl} style={{ width: `${details.qrSize}px`, height: `${details.qrSize}px` }} alt="QR Code" />
                         </div>
                     )}

                </div>
                </div>
            </div>
         </div>

      </div>
    </div>
  );
}