'use client';

import { useState, useRef, useCallback, useEffect } from 'react';
import { Upload, X, Copy, Check, ScanLine, ExternalLink, QrCode, Loader2, ClipboardPaste } from 'lucide-react';
import jsQR from 'jsqr';

export default function DecodePanel() {
  const [dragOver, setDragOver] = useState(false);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [decoding, setDecoding] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // Paste from clipboard
  useEffect(() => {
    function onPaste(e: ClipboardEvent) {
      const item = Array.from(e.clipboardData?.items || []).find(i => i.type.startsWith('image/'));
      if (item) {
        const file = item.getAsFile();
        if (file) processFile(file);
      }
    }
    window.addEventListener('paste', onPaste);
    return () => window.removeEventListener('paste', onPaste);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const decodeFromImage = useCallback((src: string) => {
    setDecoding(true);
    setResult(null);
    setError('');
    const img = new Image();
    img.onload = () => {
      const canvas = canvasRef.current;
      if (!canvas) { setDecoding(false); return; }
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      if (!ctx) { setDecoding(false); return; }
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' });
      setDecoding(false);
      if (code) {
        setResult(code.data);
      } else {
        // Try inverted
        const codeInv = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'onlyInvert' });
        if (codeInv) {
          setResult(codeInv.data);
        } else {
          setError('No QR code detected in this image. Make sure the QR code is clearly visible and not blurry.');
        }
      }
    };
    img.onerror = () => { setDecoding(false); setError('Failed to load image.'); };
    img.src = src;
  }, []);

  function processFile(file: File) {
    if (!file.type.startsWith('image/')) { setError('Please upload an image file (PNG, JPG, WebP, GIF…)'); return; }
    if (file.size > 20 * 1024 * 1024) { setError('Image must be under 20 MB'); return; }
    const reader = new FileReader();
    reader.onload = ev => {
      const src = ev.target?.result as string;
      setImagePreview(src);
      decodeFromImage(src);
    };
    reader.readAsDataURL(file);
  }

  function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) processFile(file);
  }

  function handleFileInput(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) processFile(file);
    e.target.value = '';
  }

  function clear() {
    setImagePreview(null);
    setResult(null);
    setError('');
    setCopied(false);
  }

  async function copyResult() {
    if (!result) return;
    await navigator.clipboard.writeText(result);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  const isUrl = result && /^https?:\/\//i.test(result);
  const resultType = result
    ? result.startsWith('http') ? 'URL'
      : result.startsWith('mailto:') ? 'Email'
      : result.startsWith('tel:') ? 'Phone'
      : result.startsWith('WIFI:') ? 'WiFi'
      : result.startsWith('BEGIN:VCARD') ? 'vCard'
      : result.startsWith('smsto:') || result.startsWith('sms:') ? 'SMS'
      : 'Text'
    : null;

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* ── Left: Upload ─────────────────────────────────────────────────── */}
      <div className="space-y-4">
        <div>
          <h3 className="text-sm font-semibold text-white mb-1">Decode a QR Code</h3>
          <p className="text-xs text-slate-500">Upload or paste an image containing a QR code to extract its content.</p>
        </div>

        {/* Drop zone / preview */}
        {imagePreview ? (
          <div className="relative rounded-2xl overflow-hidden border border-slate-700/50 bg-slate-800/40">
            <img src={imagePreview} alt="Uploaded image" className="w-full max-h-64 object-contain" />
            <button
              onClick={clear}
              className="absolute top-3 right-3 p-1.5 bg-slate-900/80 rounded-lg text-slate-400 hover:text-white transition-colors"
            >
              <X size={15} />
            </button>
          </div>
        ) : (
          <div
            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={handleDrop}
            onClick={() => fileInputRef.current?.click()}
            className={`flex flex-col items-center justify-center gap-3 p-10 border-2 border-dashed rounded-2xl cursor-pointer transition-all ${
              dragOver ? 'border-indigo-400 bg-indigo-600/10' : 'border-slate-700/60 hover:border-slate-500 hover:bg-white/[0.02]'
            }`}
          >
            <div className={`p-3 rounded-2xl ${dragOver ? 'bg-indigo-600/20' : 'bg-slate-700/50'}`}>
              <ScanLine size={24} className={dragOver ? 'text-indigo-300' : 'text-slate-400'} />
            </div>
            <div className="text-center">
              <p className="text-sm font-medium text-slate-300">Drop an image here</p>
              <p className="text-xs text-slate-500 mt-0.5">or click to browse</p>
            </div>
          </div>
        )}

        <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileInput} className="hidden" />

        {/* Action buttons */}
        <div className="flex gap-2">
          <button
            onClick={() => fileInputRef.current?.click()}
            className="flex-1 flex items-center justify-center gap-2 py-2.5 bg-indigo-600/15 hover:bg-indigo-600/25 border border-indigo-500/30 text-indigo-300 text-sm font-medium rounded-xl transition-colors"
          >
            <Upload size={14} /> Upload Image
          </button>
          <button
            onClick={() => {
              navigator.clipboard.read().then(items => {
                for (const item of items) {
                  const imageType = item.types.find(t => t.startsWith('image/'));
                  if (imageType) {
                    item.getType(imageType).then(blob => processFile(new File([blob], 'paste.png', { type: imageType })));
                    return;
                  }
                }
                setError('No image found in clipboard. Try Ctrl+V / Cmd+V after copying an image.');
              }).catch(() => setError('Clipboard access denied. Use Ctrl+V / Cmd+V to paste directly.'));
            }}
            className="flex items-center justify-center gap-2 px-4 py-2.5 bg-slate-700/50 hover:bg-slate-600/60 border border-slate-600/50 text-slate-300 text-sm rounded-xl transition-colors"
            title="Paste from clipboard (Ctrl+V)"
          >
            <ClipboardPaste size={14} />
          </button>
        </div>

        <p className="text-xs text-slate-600 text-center">
          Tip: Press <kbd className="px-1 py-0.5 bg-slate-800 rounded text-slate-500 font-mono text-xs">Ctrl+V</kbd> anywhere on the page to paste an image
        </p>
      </div>

      {/* ── Right: Result ────────────────────────────────────────────────── */}
      <div className="flex flex-col gap-4">
        <div className="flex-1 flex flex-col justify-center">
          {decoding ? (
            <div className="flex flex-col items-center justify-center gap-3 py-16 text-slate-500">
              <Loader2 size={28} className="animate-spin text-indigo-400" />
              <p className="text-sm">Scanning for QR code…</p>
            </div>
          ) : error ? (
            <div className="flex flex-col items-center justify-center gap-3 py-10">
              <div className="w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center">
                <QrCode size={22} className="text-red-400" />
              </div>
              <p className="text-sm text-red-400 text-center max-w-xs">{error}</p>
            </div>
          ) : result ? (
            <div className="space-y-4">
              {/* Type badge */}
              <div className="flex items-center gap-2">
                <ScanLine size={15} className="text-emerald-400" />
                <span className="text-sm font-semibold text-white">QR Code Decoded</span>
                {resultType && (
                  <span className="text-xs px-2 py-0.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-full">{resultType}</span>
                )}
              </div>

              {/* Content box */}
              <div className="bg-white/[0.03] border border-slate-700/50 rounded-2xl p-4">
                <p className="text-sm text-slate-200 break-all font-mono leading-relaxed">{result}</p>
              </div>

              {/* Actions */}
              <div className="flex gap-2 flex-wrap">
                <button
                  onClick={copyResult}
                  className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-xl transition-all ${
                    copied
                      ? 'bg-emerald-500/20 border border-emerald-500/30 text-emerald-300'
                      : 'bg-slate-700/50 hover:bg-slate-600/60 border border-slate-600/50 text-slate-300'
                  }`}
                >
                  {copied ? <Check size={14} /> : <Copy size={14} />}
                  {copied ? 'Copied!' : 'Copy'}
                </button>
                {isUrl && (
                  <a
                    href={result} target="_blank" rel="noopener noreferrer"
                    className="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-300 rounded-xl transition-colors"
                  >
                    <ExternalLink size={14} /> Open URL
                  </a>
                )}
                <button onClick={clear} className="flex items-center gap-2 px-4 py-2 text-sm text-slate-500 hover:text-slate-300 border border-slate-700/40 hover:border-slate-600 rounded-xl transition-colors">
                  <X size={14} /> Clear
                </button>
              </div>
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center gap-3 py-16 text-slate-600">
              <div className="w-16 h-16 rounded-2xl border-2 border-dashed border-slate-700/70 flex items-center justify-center">
                <QrCode size={26} className="text-slate-700" />
              </div>
              <p className="text-sm text-center">Upload an image to see the decoded content here</p>
            </div>
          )}
        </div>

        {/* Supported formats note */}
        <div className="p-4 bg-white/[0.02] border border-slate-700/40 rounded-xl text-xs text-slate-600 space-y-1">
          <p className="font-medium text-slate-500">Supported QR content types</p>
          <p>URL · Email · Phone · SMS · WiFi · vCard · Plain text</p>
          <p className="text-slate-700 mt-1">Decoding runs entirely in your browser — no image is uploaded to any server.</p>
        </div>
      </div>

      {/* Hidden canvas for pixel processing */}
      <canvas ref={canvasRef} className="hidden" />
    </div>
  );
}