import { useState } from 'react';
import EmbedPanel from './components/EmbedPanel.js';
import DetectPanel from './components/DetectPanel.js';
import ApiDocs from './components/ApiDocs.js';
import HowItWorks from './components/HowItWorks.js';

export default function App() {
  const [tab, setTab] = useState<'embed' | 'detect' | 'api' | 'how'>('embed');

  const isWide = tab === 'how';

  return (
    <div className="min-h-screen bg-zinc-950">
      <header className="sticky top-0 z-10 border-b border-zinc-800/50 bg-zinc-950/80 px-6 py-4 backdrop-blur-xl">
        <div className={`mx-auto flex items-center justify-between ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-violet-600 shadow-lg shadow-blue-600/20">
              <svg className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </div>
            <h1 className="text-xl font-bold tracking-tight text-zinc-100">
              <span className="text-blue-400">L</span><span className="text-blue-400">T</span>Mar<span className="text-blue-400">X</span>
            </h1>
          </div>
          <nav className="flex gap-1 rounded-xl bg-zinc-900/80 p-1 ring-1 ring-zinc-800/50">
            <button
              onClick={() => setTab('embed')}
              className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
                tab === 'embed'
                  ? 'bg-zinc-800 text-zinc-100 shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-200'
              }`}
            >
              🎨 Embed
            </button>
            <button
              onClick={() => setTab('detect')}
              className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
                tab === 'detect'
                  ? 'bg-zinc-800 text-zinc-100 shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-200'
              }`}
            >
              🔍 Detect
            </button>
            <button
              onClick={() => setTab('api')}
              className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
                tab === 'api'
                  ? 'bg-zinc-800 text-zinc-100 shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-200'
              }`}
            >
              {'{}'} API
            </button>
            <button
              onClick={() => setTab('how')}
              className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-all ${
                tab === 'how'
                  ? 'bg-zinc-800 text-zinc-100 shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-200'
              }`}
            >
              📐 How
            </button>
          </nav>
        </div>
      </header>

      <main className={`mx-auto px-6 py-10 ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
        <div className="mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-zinc-100">
            {tab === 'embed' ? '🎬 Embed Watermark' : tab === 'detect' ? '🔎 Detect Watermark' : tab === 'api' ? '📖 API Reference' : '📐 How It Works'}
          </h2>
          <p className="mt-1 text-sm text-zinc-500">
            {tab === 'embed'
              ? 'Embed an imperceptible 32-bit payload into your video.'
              : tab === 'detect'
              ? 'Analyze a video to detect and extract embedded watermarks.'
              : tab === 'api'
              ? 'Integrate LTMarX into your application.'
              : 'Interactive walkthrough of the DWT/DCT watermarking pipeline.'}
          </p>
        </div>

        {tab === 'embed' ? <EmbedPanel /> : tab === 'detect' ? <DetectPanel /> : tab === 'api' ? <ApiDocs /> : <HowItWorks />}
      </main>

      <footer className="border-t border-zinc-800/30 px-6 py-6">
        <div className={`mx-auto ${isWide ? 'max-w-4xl' : 'max-w-2xl'}`}>
          <p className="text-center text-[11px] text-zinc-700">
            <span className="text-zinc-600">L</span><span className="text-zinc-600">T</span>Mar<span className="text-zinc-600">X</span> — DWT/DCT watermarking with DM-QIM and BCH error correction.
            All processing happens in your browser.
          </p>
        </div>
      </footer>
    </div>
  );
}