"use client";

import React, { useState, useCallback } from 'react';
import { 
  Code, Minimize2, CheckCircle, Copy, FilePlus, Eraser, Check, XCircle 
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { 
  Tooltip, 
  TooltipContent, 
  TooltipProvider, 
  TooltipTrigger 
} from '@/components/ui/tooltip';
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { toast } from "sonner";

type Mode = 'format' | 'compress' | 'validate';

export default function JsonFormatterPage() {
  const [mode, setMode] = useState<Mode>('format');
  const [inputJson, setInputJson] = useState('');
  const [outputJson, setOutputJson] = useState('');
  const [isValid, setIsValid] = useState<boolean | null>(null);
  const [errorMsg, setErrorMsg] = useState('');
  const [charCount, setCharCount] = useState(0);

  const validateJson = useCallback((jsonStr: string) => {
    if (!jsonStr.trim()) {
      setIsValid(null);
      setErrorMsg('');
      return null;
    }

    try {
      const parsed = JSON.parse(jsonStr);
      setIsValid(true);
      setErrorMsg('');
      return parsed;
    } catch (err) {
      const msg = err instanceof Error ? err.message : '未知错误';
      setErrorMsg(msg);
      setIsValid(false);
      return null;
    }
  }, []);

  const formatJson = useCallback(() => {
    const parsed = validateJson(inputJson);
    if (parsed !== null) {
      const formatted = JSON.stringify(parsed, null, 2);
      setOutputJson(formatted);
      toast.success('格式化成功');
    }
  }, [inputJson, validateJson]);

  const compressJson = useCallback(() => {
    const parsed = validateJson(inputJson);
    if (parsed !== null) {
      const compressed = JSON.stringify(parsed);
      setOutputJson(compressed);
      toast.success('压缩成功');
    }
  }, [inputJson, validateJson]);

  const validateOnly = useCallback(() => {
    validateJson(inputJson);
    if (inputJson.trim() && isValid) {
      toast.success('JSON 格式正确');
    }
  }, [inputJson, validateJson, isValid]);

  const handleAction = useCallback(() => {
    switch (mode) {
      case 'format':
        formatJson();
        break;
      case 'compress':
        compressJson();
        break;
      case 'validate':
        validateOnly();
        break;
    }
  }, [mode, formatJson, compressJson, validateOnly]);

  const copyToClipboard = useCallback(async (text: string, type: string) => {
    if (!text) {
      toast.warning('没有可复制的内容');
      return;
    }

    try {
      await navigator.clipboard.writeText(text);
      toast.success(`${type}已复制`);
    } catch {
      toast.error('复制失败');
    }
  }, []);

  const clearAll = useCallback(() => {
    setInputJson('');
    setOutputJson('');
    setIsValid(null);
    setErrorMsg('');
    setCharCount(0);
  }, []);

  const loadExample = useCallback(() => {
    const example = {
      name: "信奥工具箱",
      version: "1.0.0",
      features: ["JSON格式化", "压缩", "验证"],
      config: {
        theme: "cyan",
        language: "zh-CN"
      }
    };
    const exampleStr = JSON.stringify(example, null, 2);
    setInputJson(exampleStr);
    setCharCount(exampleStr.length);
    validateJson(exampleStr);
  }, [validateJson]);

  const handleInputChange = useCallback((value: string) => {
    setInputJson(value);
    setCharCount(value.length);
    if (value.trim()) {
      validateJson(value);
    } else {
      setIsValid(null);
      setErrorMsg('');
    }
  }, [validateJson]);

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      {/* Page Header */}
      <div className="flex items-center justify-between border-b pb-4">
        <div className="flex items-center space-x-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-cyan-500 to-blue-600 shadow-lg">
            <Code className="h-6 w-6 text-white" />
          </div>
          <div>
            <h1 className="text-2xl font-bold tracking-tight">JSON 格式化工具</h1>
            <p className="text-muted-foreground">格式化JSON，使其更易读</p>
          </div>
        </div>
        <Tabs value={mode} onValueChange={(v) => setMode(v as Mode)} className="w-75">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="format">格式化</TabsTrigger>
            <TabsTrigger value="compress">压缩</TabsTrigger>
            <TabsTrigger value="validate">验证</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>

      {/* Action Bar */}
      <Card>
        <CardContent className="flex flex-wrap items-center gap-4 p-4">
          <Button 
            onClick={handleAction} 
            disabled={!inputJson.trim()} 
            className="gap-2"
          >
            {mode === 'format' && <Code className="h-4 w-4" />}
            {mode === 'compress' && <Minimize2 className="h-4 w-4" />}
            {mode === 'validate' && <CheckCircle className="h-4 w-4" />}
            {mode === 'format' ? '格式化' : mode === 'compress' ? '压缩' : '验证'}
          </Button>
          
          <Button
            variant="secondary"
            onClick={compressJson}
            disabled={!inputJson.trim() || isValid === false}
            className="gap-2"
          >
            <Minimize2 className="h-4 w-4" />
            压缩
          </Button>

          <Button
            variant="outline"
            onClick={validateOnly}
            disabled={!inputJson.trim()}
            className="gap-2"
          >
            <CheckCircle className="h-4 w-4" />
            验证
          </Button>

          <Button variant="ghost" onClick={loadExample} className="gap-2">
            <FilePlus className="h-4 w-4" />
            加载示例
          </Button>

          <Button variant="ghost" onClick={clearAll} className="gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
            <Eraser className="h-4 w-4" />
            清空内容
          </Button>
        </CardContent>
      </Card>

      {/* Main Content */}
      <div className="grid gap-6 lg:grid-cols-2">
        {/* Input Panel */}
        <Card className="flex flex-col h-full">
          <CardHeader className="py-3 flex flex-row items-center justify-between">
            <CardTitle className="text-base font-medium flex items-center gap-2">
              JSON 输入
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => copyToClipboard(inputJson, '输入内容')}>
                      <Copy className="h-3 w-3" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>复制输入</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </CardTitle>
            {isValid !== null && (
              <Badge variant={isValid ? "default" : "destructive"} className={isValid ? "bg-emerald-500 hover:bg-emerald-600" : ""}>
                 {isValid ? <Check className="h-3 w-3 mr-1" /> : <XCircle className="h-3 w-3 mr-1" />}
                 {isValid ? '格式正确' : '格式错误'}
              </Badge>
            )}
          </CardHeader>
          <CardContent className="flex-1 p-0 relative">
            <Textarea
              value={inputJson}
              onChange={(e) => handleInputChange(e.target.value)}
              placeholder="请输入JSON数据..."
              className="min-h-125 h-full border-0 rounded-none focus-visible:ring-0 resize-none font-mono text-sm leading-relaxed p-4 bg-transparent"
            />
            {errorMsg && (
              <div className="absolute bottom-0 left-0 right-0 bg-destructive/10 text-destructive text-xs p-2 border-t border-destructive/20">
                {errorMsg}
              </div>
            )}
          </CardContent>
          <div className="p-2 border-t bg-muted/30 text-xs text-muted-foreground flex justify-end">
            字符数: {charCount}
          </div>
        </Card>

        {/* Output Panel */}
        <Card className="flex flex-col h-full">
          <CardHeader className="py-3 flex flex-row items-center justify-between">
            <CardTitle className="text-base font-medium flex items-center gap-2">
              格式化结果
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => copyToClipboard(outputJson, '结果')}>
                      <Copy className="h-3 w-3" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>复制结果</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </CardTitle>
          </CardHeader>
          <CardContent className="flex-1 p-0 bg-muted/30">
            <Textarea
              value={outputJson}
              readOnly
              placeholder="处理结果将显示在这里..."
              className="min-h-125 h-full border-0 rounded-none focus-visible:ring-0 resize-none font-mono text-sm leading-relaxed p-4 bg-transparent"
            />
          </CardContent>
        </Card>
      </div>

      {/* Usage Info */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <span className="text-xl">💡</span> 使用说明
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-6 md:grid-cols-3">
            <div className="space-y-2">
              <h4 className="font-semibold text-sm">格式化模式</h4>
              <ul className="list-disc pl-4 text-sm text-muted-foreground space-y-1">
                <li>美化JSON结构，增加缩进</li>
                <li>提高可读性</li>
                <li>便于调试和查看</li>
              </ul>
            </div>
            <div className="space-y-2">
              <h4 className="font-semibold text-sm">压缩模式</h4>
              <ul className="list-disc pl-4 text-sm text-muted-foreground space-y-1">
                <li>移除所有空白字符</li>
                <li>减小文件大小</li>
                <li>适合生产环境</li>
              </ul>
            </div>
            <div className="space-y-2">
              <h4 className="font-semibold text-sm">验证模式</h4>
              <ul className="list-disc pl-4 text-sm text-muted-foreground space-y-1">
                <li>检查JSON语法正确性</li>
                <li>显示详细统计信息</li>
                <li>提供错误诊断</li>
              </ul>
            </div>
          </div>
          <div className="mt-4 p-3 bg-muted rounded-md text-xs text-muted-foreground">
            💡 提示：支持复杂的嵌套结构，包括对象、数组、字符串、数字、布尔值和null值。
          </div>
        </CardContent>
      </Card>
    </div>
  );
}