import React, { useState, useEffect, useRef } from 'react';
import { 
  FileJson, 
  Copy, 
  Trash2, 
  Minimize2, 
  Maximize2, 
  CheckCircle, 
  AlertTriangle, 
  Upload, 
  Download,
  Code,
  AlignLeft,
  Wrench
} from 'lucide-react';

export default function App() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [error, setError] = useState(null);
  const [indentSize, setIndentSize] = useState(2);
  const [stats, setStats] = useState({ size: '0 B', items: 0 });
  const [notification, setNotification] = useState(null);
  
  const fileInputRef = useRef(null);

  // Sample data for initial load
  const sampleData = {
    "project": "Super JSON Tool",
    "active": true,
    "version": 1.0,
    "features": [
      "Syntax Highlighting",
      "Error Detection",
      "Minification"
    ],
    "metrics": {
      "rating": 4.8,
      "users": null
    }
  };

  useEffect(() => {
    // Initial load
    setInput(JSON.stringify(sampleData, null, indentSize));
  }, []);

  useEffect(() => {
    processJson(input);
  }, [input, indentSize]);

  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [notification]);

  const showNotification = (message, type = 'success') => {
    setNotification({ message, type });
  };

  // Syntax highlighting logic
  const highlightJson = (jsonStr) => {
    if (!jsonStr) return '';
    
    // HTML entity escaping to prevent XSS in the preview
    const escapeHtml = (unsafe) => {
      return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
    };

    let processed = jsonStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    
    // Regex to capture JSON parts
    return processed.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        let cls = 'text-amber-600'; // number default
        
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'text-blue-600 font-semibold'; // key
            } else {
                cls = 'text-emerald-600'; // string
            }
        } else if (/true|false/.test(match)) {
            cls = 'text-purple-600 font-bold'; // boolean
        } else if (/null/.test(match)) {
            cls = 'text-red-500 font-bold'; // null
        }
        
        return '<span class="' + cls + '">' + match + '</span>';
    });
  };

  const calculateSize = (str) => {
    const bytes = new Blob([str]).size;
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  const processJson = (rawInput) => {
    if (!rawInput.trim()) {
      setOutput('');
      setError(null);
      setStats({ size: '0 B', items: 0 });
      return;
    }

    try {
      const parsed = JSON.parse(rawInput);
      const formatted = JSON.stringify(parsed, null, indentSize);
      setOutput(highlightJson(formatted));
      setError(null);
      
      // Calculate stats
      const itemCount = Array.isArray(parsed) ? parsed.length : Object.keys(parsed).length;
      setStats({
        size: calculateSize(rawInput),
        items: itemCount
      });
    } catch (err) {
      setError(err.message);
      // Even if error, we show raw text but without fancy highlighting logic implies valid structure
      // We'll just plain-text escape it for the output so it doesn't break
      setOutput(rawInput.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
    }
  };

  // Actions
  const handleFormat = () => {
    try {
      const parsed = JSON.parse(input);
      setInput(JSON.stringify(parsed, null, indentSize));
      showNotification('Formatted successfully');
    } catch (e) {
      showNotification('Cannot format invalid JSON', 'error');
    }
  };

  const handleMinify = () => {
    try {
      const parsed = JSON.parse(input);
      setInput(JSON.stringify(parsed));
      showNotification('Minified successfully');
    } catch (e) {
      showNotification('Cannot minify invalid JSON', 'error');
    }
  };

  const handleClear = () => {
    setInput('');
    showNotification('Cleared editor');
  };

  const handleCopy = () => {
    const contentToCopy = error ? input : JSON.stringify(JSON.parse(input), null, indentSize);
    navigator.clipboard.writeText(contentToCopy).then(() => {
      showNotification('Copied to clipboard');
    });
  };

  const handleFix = () => {
    // Basic regex fixes for common lazy-JSON issues
    let fixed = input
      .replace(/'/g, '"') // Replace single quotes with double
      .replace(/,\s*([\]}])/g, '$1') // Remove trailing commas
      .replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":'); // Quote unquoted keys
    
    setInput(fixed);
    showNotification('Attempted auto-fix');
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => setInput(e.target.result);
      reader.readAsText(file);
    }
  };

  const handleDownload = () => {
    if (error) {
      showNotification('Fix errors before downloading', 'error');
      return;
    }
    const blob = new Blob([input], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'data.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <div className="flex flex-col h-screen bg-slate-50 text-slate-800 font-sans">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between shadow-sm z-10">
        <div className="flex items-center gap-3">
          <div className="bg-blue-600 p-2 rounded-lg">
            <FileJson className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-xl font-bold text-slate-900">JSON Studio</h1>
            <p className="text-xs text-slate-500">Validate, Format & Minify</p>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button 
            onClick={() => fileInputRef.current?.click()}
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
          >
            <Upload className="w-4 h-4" />
            <span className="hidden sm:inline">Load File</span>
          </button>
          <input 
            type="file" 
            ref={fileInputRef} 
            onChange={handleFileUpload} 
            className="hidden" 
            accept=".json,.txt"
          />
          
          <button 
            onClick={handleDownload}
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
          >
            <Download className="w-4 h-4" />
            <span className="hidden sm:inline">Download</span>
          </button>

          <a 
            href="#" 
            onClick={(e) => { e.preventDefault(); setInput(JSON.stringify(sampleData, null, 2)); }}
            className="text-xs text-blue-600 underline hover:text-blue-700 ml-2"
          >
            Load Sample
          </a>
        </div>
      </header>

      {/* Toolbar */}
      <div className="bg-white border-b border-slate-200 px-6 py-2 flex flex-wrap items-center gap-2 sm:gap-4 overflow-x-auto">
        <div className="flex items-center gap-1 border-r border-slate-200 pr-4">
          <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider mr-2">Actions</span>
          <button onClick={handleFormat} className="p-2 text-slate-600 hover:text-blue-600 hover:bg-slate-100 rounded" title="Beautify">
            <Maximize2 className="w-4 h-4" />
          </button>
          <button onClick={handleMinify} className="p-2 text-slate-600 hover:text-blue-600 hover:bg-slate-100 rounded" title="Minify">
            <Minimize2 className="w-4 h-4" />
          </button>
           <button onClick={handleFix} className="p-2 text-slate-600 hover:text-blue-600 hover:bg-slate-100 rounded" title="Auto-Fix Quotes/Commas">
            <Wrench className="w-4 h-4" />
          </button>
        </div>

        <div className="flex items-center gap-2 border-r border-slate-200 pr-4">
          <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Indent:</span>
          <select 
            value={indentSize} 
            onChange={(e) => setIndentSize(Number(e.target.value))}
            className="text-sm border-slate-300 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-slate-50 px-2 py-1"
          >
            <option value={2}>2 Spaces</option>
            <option value={4}>4 Spaces</option>
            <option value={8}>8 Spaces</option>
          </select>
        </div>

        <div className="flex items-center gap-2 ml-auto">
          <button onClick={handleCopy} className="flex items-center gap-2 px-3 py-1.5 text-sm bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-md transition-colors">
            <Copy className="w-4 h-4" />
            Copy
          </button>
          <button onClick={handleClear} className="flex items-center gap-2 px-3 py-1.5 text-sm bg-red-50 hover:bg-red-100 text-red-600 rounded-md transition-colors">
            <Trash2 className="w-4 h-4" />
            Clear
          </button>
        </div>
      </div>

      {/* Main Editor Area */}
      <div className="flex-1 flex flex-col md:flex-row overflow-hidden relative">
        
        {/* Input Pane */}
        <div className="flex-1 flex flex-col border-r border-slate-200 min-w-0 bg-white">
          <div className="px-4 py-2 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
            <div className="flex items-center gap-2 text-slate-500">
              <Code className="w-4 h-4" />
              <span className="text-xs font-bold uppercase">Input</span>
            </div>
            <span className="text-xs text-slate-400">Paste or type JSON here</span>
          </div>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="flex-1 w-full p-4 font-mono text-sm resize-none outline-none text-slate-700 leading-relaxed"
            placeholder="{ ... }"
            spellCheck="false"
          />
        </div>

        {/* Output Pane */}
        <div className="flex-1 flex flex-col min-w-0 bg-slate-50">
          <div className="px-4 py-2 bg-slate-100 border-b border-slate-200 flex justify-between items-center">
            <div className="flex items-center gap-2 text-slate-500">
              <AlignLeft className="w-4 h-4" />
              <span className="text-xs font-bold uppercase">Formatted Output</span>
            </div>
            
            {/* Status Indicator */}
            {input.trim() && (
              <div className={`flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full ${error ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
                {error ? <AlertTriangle className="w-3 h-3" /> : <CheckCircle className="w-3 h-3" />}
                {error ? 'Invalid JSON' : 'Valid JSON'}
              </div>
            )}
          </div>

          <div className="flex-1 overflow-auto relative">
            <pre 
              className={`p-4 font-mono text-sm leading-relaxed min-h-full ${error ? 'text-slate-400' : ''}`}
              dangerouslySetInnerHTML={{ __html: output }}
            />
            
            {/* Empty State */}
            {!input.trim() && (
              <div className="absolute inset-0 flex items-center justify-center text-slate-400 pointer-events-none">
                <div className="text-center">
                  <FileJson className="w-12 h-12 mx-auto opacity-20 mb-2" />
                  <p className="text-sm">Waiting for input...</p>
                </div>
              </div>
            )}
          </div>

          {/* Error Panel (Sticky Bottom of Output) */}
          {error && (
            <div className="bg-red-50 border-t border-red-100 p-4 text-sm text-red-600 animate-in slide-in-from-bottom-5 fade-in duration-300">
              <p className="font-bold flex items-center gap-2 mb-1">
                <AlertTriangle className="w-4 h-4" />
                Syntax Error
              </p>
              <p className="font-mono text-xs opacity-90 break-all">{error}</p>
            </div>
          )}
        </div>
      </div>

      {/* Footer Stats */}
      <footer className="bg-white border-t border-slate-200 px-6 py-2 flex justify-between items-center text-xs text-slate-500">
        <div className="flex gap-4">
          <span>Size: <strong className="text-slate-700">{stats.size}</strong></span>
          <span>Items/Keys: <strong className="text-slate-700">{stats.items}</strong></span>
        </div>
        <div>
          JSON Formatter Tool v1.0
        </div>
      </footer>

      {/* Notification Toast */}
      {notification && (
        <div className={`fixed bottom-12 right-6 px-4 py-2 rounded-lg shadow-lg text-sm font-medium transition-all transform translate-y-0 ${
          notification.type === 'error' ? 'bg-red-600 text-white' : 'bg-slate-800 text-white'
        }`}>
          {notification.message}
        </div>
      )}
    </div>
  );
}