"use client";

import { useState } from "react";
import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function WhistleblowerPage() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);

  const handleUpload = () => {
    setIsUploading(true);
    let p = 0;
    const interval = setInterval(() => {
      p += 5;
      setProgress(p);
      if (p >= 100) {
        clearInterval(interval);
        setIsUploading(false);
        alert("File encrypted and dropped successfully.");
      }
    }, 200);
  };

  return (
    <ThemedLayout theme="minimal" title="The Drop Box">
      <div className="mx-auto max-w-3xl pt-20 text-[#e6e6e6]">
        <header className="mb-12 border-b-8 border-white/15 pb-8">
          <h1 className="text-6xl font-black uppercase tracking-tighter text-[#fafafa]">Whistleblower Drop</h1>
          <p className="mt-4 text-sm font-bold text-[#a0a0a0]">Secure. Anonymous. Untraceable.</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <div className="space-y-8">
            <section>
              <h3 className="text-2xl font-bold mb-4 underline decoration-4">Our Mission</h3>
              <p className="leading-relaxed text-sm">
                We provide a secure channel for individuals to expose corruption and corporate 
                malfeasance. Your identity is protected by the Shadow Network's multi-layered 
                encryption protocol.
              </p>
            </section>
            <section className="border border-white/10 bg-[#141414] p-8 text-[#e8e8e8]">
              <h3 className="mb-4 text-xl font-bold uppercase">Support the Cause</h3>
              <p className="mb-4 text-[10px] opacity-70">
                We are a non-profit entity. All donations go towards server maintenance and legal defense funds.
              </p>
              <div className="mb-4 break-all bg-black/40 p-2 font-mono text-xs">
                0x594f1Cf2A72b3f785fcB6ABdFa73B6D76FcC22b8
              </div>
              <button className="w-full border border-white/30 py-2 text-xs font-bold uppercase transition-all hover:bg-white/10">
                Donate BTC
              </button>
            </section>
          </div>

          <div className="flex flex-col items-center justify-center border-4 border-white/15 p-8 text-center">
            <div className="text-6xl mb-6">📁</div>
            <h3 className="text-xl font-bold mb-4 uppercase">Drop Your Files</h3>
            <p className="text-[10px] mb-8 opacity-60">
              Drag and drop your encrypted archives here. 
              Max file size: 2GB.
            </p>
            
            {isUploading ? (
              <div className="w-full space-y-4">
                <div className="h-4 w-full overflow-hidden bg-white/5">
                  <div className="h-full bg-[#00ff9d]/60 transition-all" style={{ width: `${progress}%` }} />
                </div>
                <div className="text-[10px] font-bold uppercase">Encrypting: {progress}%</div>
              </div>
            ) : (
              <button 
                onClick={handleUpload}
                className="w-full border border-white/20 bg-[#0a0a0a] py-4 font-black uppercase text-[#e8e8e8] transition-colors hover:border-red-500/50 hover:bg-red-950/40"
              >
                Select Files
              </button>
            )}
          </div>
        </div>

        <div className="mt-20 flex justify-between items-center opacity-30">
          <div className="text-xs font-bold uppercase">Escrow Assured</div>
          <div className="text-xs font-bold uppercase tracking-widest">Node 22 // Shadow Network</div>
        </div>
      </div>
    </ThemedLayout>
  );
}