import React, { useState, useRef, useEffect, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

// --- CONFIGURATIONS ---
const API_BASE_URL = 'https://your-api-domain.com'; // Replace with your FastAPI Cloud Run URL

interface ToolConfig {
  id: string;
  name: string;
  ext: string;
  h1: string;
  description: string;
  content: string;
}

const TOOL_CONFIGS: Record<string, ToolConfig> = {
  pdf: {
    id: 'pdf', name: 'PDF', ext: '.pdf',
    h1: 'Unlock PDF Password Online - Free & Secure Removal',
    description: 'Instantly remove password protection from your PDF files. 100% legal, no file storage, and processed in secure ephemeral memory.',
    content: `
      <h2>The Secure Way to Unlock PDF Files</h2>
      <p>Managing password-protected documents is a routine task in modern business. However, once a file has been securely transmitted, the password often becomes an unnecessary friction point. SecurePass Removr provides a high-performance utility to strip these passwords, allowing for seamless archiving and sharing within your authorized team.</p>
      <h3>Legal & Secure Compliance</h3>
      <p>This tool is designed for users who possess the legal right to their documents and know the existing password. We do NOT provide password cracking, bypassing, or hacking services. Our mission is to provide a clean, secure environment for legitimate document management.</p>
      <h3>Step-by-Step Guide to Removing PDF Passwords</h3>
      <ol>
        <li>Upload your protected PDF file (Max 50MB).</li>
        <li>Enter the <strong>correct</strong> password for the document.</li>
        <li>Click 'Remove Password' and wait for our ephemeral engine to process the file.</li>
        <li>Download your unlocked document. It will be deleted from our temporary cache within 60 minutes.</li>
      </ol>
      <h3>FAQ</h3>
      <h4>Does this store my files?</h4>
      <p>No. Your files are processed in volatile RAM. A temporary download link is provided, and the source is wiped immediately. The result is permanently deleted from our encrypted bucket after 1 hour.</p>
    `
  },
  excel: {
    id: 'excel', name: 'Excel', ext: '.xlsx, .xls',
    h1: 'Unlock Excel Spreadsheet Password Online',
    description: 'Remove workbook and sheet protection from Excel files instantly. Perfect for analysts and financial teams.',
    content: `
      <h2>Professional Excel Password Management</h2>
      <p>Excel spreadsheets often contain sensitive financial data. When protection is no longer needed, SecurePass Removr allows you to remove the "Open" password or editing restrictions in seconds. This utility is ideal for automating data pipelines that cannot handle password prompts.</p>
      <h3>Workflow Optimization</h3>
      <p>If your team has inherited a password-protected archive and you possess the credentials, using our tool ensures you can convert those documents into an "Open" format for better accessibility and indexing in your cloud storage solutions.</p>
    `
  },
  word: {
    id: 'word', name: 'Word', ext: '.docx, .doc',
    h1: 'Remove Password from Word Document Online',
    description: 'Get full access to your Word documents. Strip opening and editing passwords securely with 100% layout retention.',
    content: `
      <h2>Unrestricted Word Document Access</h2>
      <p>Microsoft Word documents are the standard for corporate communication. SecurePass Removr ensures that your document layout, fonts, and embedded images remain perfectly intact while removing the security layer. We support all modern .docx and legacy .doc formats.</p>
    `
  },
  zip: {
    id: 'zip', name: 'ZIP', ext: '.zip, .7z',
    h1: 'Unlock ZIP Archive Password Online',
    description: 'Remove password protection from ZIP and 7Z archives. Fast extraction and re-packing without security.',
    content: `
      <h2>Streamline Your Archives</h2>
      <p>Password-protected ZIP files are excellent for transit but difficult for long-term searchable storage. Our tool uses professional p7zip logic to decrypt your archive with the provided password and re-archive it as a standard open ZIP file.</p>
    `
  }
};

// --- COMPONENTS ---

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <nav className="bg-white border-b border-slate-200 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center">
            <Link to="/" className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
              </div>
              <span className="font-bold text-xl tracking-tight">SecurePass<span className="text-indigo-600">Removr</span></span>
            </Link>
          </div>
          <div className="hidden md:flex items-center space-x-8">
            {Object.values(TOOL_CONFIGS).map(t => (
              <Link key={t.id} to={`/${t.id}`} className="text-slate-600 hover:text-indigo-600 font-medium transition">Unlock {t.name}</Link>
            ))}
            <button className="bg-indigo-600 text-white px-5 py-2 rounded-full font-semibold hover:bg-indigo-700 transition">Try Pro</button>
          </div>
          <button onClick={() => setIsOpen(!isOpen)} className="md:hidden p-2 text-slate-600">
            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2"><path d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"}/></svg>
          </button>
        </div>
      </div>
      {isOpen && (
        <div className="md:hidden bg-white border-b px-4 py-4 space-y-2">
          {Object.values(TOOL_CONFIGS).map(t => (
            <Link key={t.id} to={`/${t.id}`} className="block text-slate-600 py-2" onClick={() => setIsOpen(false)}>Unlock {t.name}</Link>
          ))}
        </div>
      )}
    </nav>
  );
};

const Footer = () => (
  <footer className="bg-slate-900 text-slate-400 pt-16 pb-8">
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
        <div>
          <h4 className="text-white font-bold mb-6">SecurePass Removr</h4>
          <p className="text-sm leading-relaxed">Professional document utility for legal password removal. We prioritize privacy, security, and document integrity above all else.</p>
        </div>
        <div>
          <h4 className="text-white font-bold mb-6 uppercase text-xs tracking-widest">Tools</h4>
          <ul className="space-y-3 text-sm">
            {Object.values(TOOL_CONFIGS).map(t => (
              <li key={t.id}><Link to={`/${t.id}`} className="hover:text-white transition">Unlock {t.name} Online</Link></li>
            ))}
          </ul>
        </div>
        <div>
          <h4 className="text-white font-bold mb-6 uppercase text-xs tracking-widest">Legal</h4>
          <ul className="space-y-3 text-sm">
            <li><Link to="/privacy" className="hover:text-white transition">Privacy Policy</Link></li>
            <li><Link to="/terms" className="hover:text-white transition">Terms of Service</Link></li>
          </ul>
        </div>
      </div>
      <div className="border-t border-slate-800 pt-8 text-center text-xs">
        <p>© 2024 SecurePass Removr. Not a hacking tool. Correct password required.</p>
      </div>
    </div>
  </footer>
);

const FileUploader = ({ toolName, acceptedFileTypes }: { toolName: string, acceptedFileTypes: string }) => {
  const [file, setFile] = useState<File | null>(null);
  const [password, setPassword] = useState('');
  const [status, setStatus] = useState<'idle' | 'processing' | 'done' | 'error'>('idle');
  const [error, setError] = useState('');
  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement><head><link rel="me" href="https://www.blogger.com/profile/03827890146572799910" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
</head><body>(null);

  const handleUpload = async () => {
    if (!file || !password) { setError('Please select a file and enter the password.'); return; }
    setStatus('processing');
    setError('');
    const formData = new FormData();
    formData.append('file', file);
    formData.append('password', password);

    try {
      const response = await fetch(`${API_BASE_URL}/api/unlock`, { method: 'POST', body: formData });
      if (!response.ok) { const d = await response.json(); throw new Error(d.detail || 'Processing failed.'); }
      const blob = await response.blob();
      setDownloadUrl(window.URL.createObjectURL(blob));
      setStatus('done');
    } catch (err: any) {
      setStatus('error');
      setError(err.message || 'An error occurred.');
    }
  };

  return (
    <div className="w-full max-w-2xl mx-auto bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">
      <div className="p-8 border-b border-slate-50 bg-slate-50/50 text-center">
        <h3 className="text-xl font-bold">Upload {toolName} File</h3>
        <p className="text-sm text-slate-500 mt-1">Legitimate removal only. Password required.</p>
      </div>
      <div className="p-8 space-y-6">
        {status === 'done' ? (
          <div className="text-center py-6 space-y-4">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto text-green-600 font-bold">✓</div>
            <h4 className="text-xl font-bold">Success!</h4>
            <a href={downloadUrl!} download={`unlocked_${file?.name}`} className="inline-block bg-indigo-600 text-white px-8 py-3 rounded-xl font-bold">Download File</a>
            <button onClick={() => { setStatus('idle'); setFile(null); setPassword(''); }} className="block w-full text-slate-400 text-sm">Process Another</button>
          </div>
        ) : (
          <>
            <div onClick={() => fileInputRef.current?.click()} className={`border-2 border-dashed rounded-xl p-10 text-center cursor-pointer transition ${file ? 'border-indigo-500 bg-indigo-50' : 'border-slate-300 hover:border-indigo-400'}`}>
              <input type="file" ref={fileInputRef} onChange={(e) => setFile(e.target.files?.[0] || null)} className="hidden" accept={acceptedFileTypes} />
              <p className="font-medium text-slate-700">{file ? file.name : `Click to select ${toolName} file`}</p>
              <p className="text-xs text-slate-400 mt-1">Limit 50MB</p>
            </div>
            <div className="space-y-2">
              <label className="text-xs font-bold text-slate-500 uppercase">Document Password</label>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Enter password..." className="w-full p-4 border rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none" />
            </div>
            {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
            <button onClick={handleUpload} disabled={status === 'processing'} className="w-full py-4 bg-indigo-600 text-white rounded-xl font-bold shadow-lg hover:bg-indigo-700 disabled:bg-slate-300 transition">
              {status === 'processing' ? 'Decryption in Progress...' : 'Remove Password'}
            </button>
          </>
        )}
      </div>
    </div>
  );
};

// --- PAGES ---

const HomePage = () => (
  <div className="pb-24 space-y-20">
    <div className="bg-white pt-20 pb-28 text-center px-4">
      <h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-6">Unlock Your Documents <br/><span className="text-indigo-600">The Professional Way</span></h1>
      <p className="text-xl text-slate-500 max-w-2xl mx-auto mb-10">Safe, secure, and ephemeral password removal for PDF, Office, and ZIP files. We never log passwords or store your data.</p>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
        {Object.values(TOOL_CONFIGS).map(t => (
          <Link key={t.id} to={`/${t.id}`} className="bg-white p-6 rounded-2xl border border-slate-200 hover:shadow-xl transition text-center group">
            <div className="w-10 h-10 bg-indigo-50 rounded-lg flex items-center justify-center text-indigo-600 mb-4 mx-auto group-hover:bg-indigo-600 group-hover:text-white transition">⚡</div>
            <h3 className="font-bold text-slate-800">Unlock {t.name}</h3>
          </Link>
        ))}
      </div>
    </div>
    
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8">
       <div className="p-8 bg-white rounded-2xl border border-slate-100 shadow-sm">
          <h4 className="font-bold text-lg mb-4">Bank-Grade SSL</h4>
          <p className="text-slate-500 text-sm">Every byte is encrypted in transit and handled in ephemeral, sandboxed memory stacks.</p>
       </div>
       <div className="p-8 bg-white rounded-2xl border border-slate-100 shadow-sm">
          <h4 className="font-bold text-lg mb-4">Auto-Wipe Policy</h4>
          <p className="text-slate-500 text-sm">Files and result links are permanently deleted after 60 minutes. Zero permanent storage footprint.</p>
       </div>
       <div className="p-8 bg-white rounded-2xl border border-slate-100 shadow-sm">
          <h4 className="font-bold text-lg mb-4">Legal & Private</h4>
          <p className="text-slate-500 text-sm">We provide a utility, not a exploit. We require the password and respect document integrity.</p>
       </div>
    </div>
  </div>
);

const ToolPage = ({ config }: { config: ToolConfig }) => {
  useEffect(() => window.scrollTo(0, 0), [config.id]);
  return (
    <div className="pb-24">
      <div className="bg-slate-900 text-white pt-24 pb-48 text-center px-4">
        <h1 className="text-4xl md:text-5xl font-extrabold mb-4">{config.h1}</h1>
        <p className="text-slate-400 max-w-2xl mx-auto">{config.description}</p>
      </div>
      <div className="-mt-32 px-4">
        <FileUploader toolName={config.name} acceptedFileTypes={config.ext} />
      </div>
      <div className="max-w-4xl mx-auto px-4 mt-24">
        {/* AdSense Placement Area */}
        <div className="ad-slot h-32 mb-12">
          <span className="text-slate-300 text-xs uppercase tracking-widest">Advertisement Block</span>
        </div>
        <article className="prose prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: config.content }} />
      </div>
    </div>
  );
};

// --- APP COMPONENT ---

const App = () => {
  return (
    <Router>
      <div className="flex flex-col min-h-screen">
        <Navbar />
        <main className="flex-grow">
          <Routes>
            <Route path="/" element={<HomePage />} />
            {Object.values(TOOL_CONFIGS).map(t => (
              <Route key={t.id} path={`/${t.id}`} element={<ToolPage config={t} />} />
            ))}
            <Route path="/privacy" element={<div className="p-20 max-w-3xl mx-auto prose"><h1>Privacy Policy</h1><p>We process files in RAM. No storage. No logging.</p></div>} />
            <Route path="/terms" element={<div className="p-20 max-w-3xl mx-auto prose"><h1>Terms of Service</h1><p>Legal use only. Correct password required.</p></div>} />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
};

// --- MOUNT ---
const rootEl = document.getElementById('root');
if (rootEl) {
  createRoot(rootEl).render(<App />);
}</body></html>