"use client";

import { useState, useCallback } from "react";
import { Settings, RefreshCw, Copy, Shield, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";

interface StringConfig {
  length: number;
  includeUppercase: boolean;
  includeLowercase: boolean;
  includeNumbers: boolean;
  includeSymbols: boolean;
  excludeSimilar: boolean;
  customChars: string;
  batchCount: number;
}

const defaultConfig: StringConfig = {
  length: 16,
  includeUppercase: true,
  includeLowercase: true,
  includeNumbers: true,
  includeSymbols: false,
  excludeSimilar: false,
  customChars: "",
  batchCount: 1,
};

const UPPERCASE = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const LOWERCASE = "abcdefghijklmnopqrstuvwxyz";
const NUMBERS = "0123456789";
const SYMBOLS = "!@#$%^&*()_+-=[]{}|;:,.<>?";
const SIMILAR_CHARS = "0O1lI|";

export default function RandomStringGenerator() {
  const [config, setConfig] = useState<StringConfig>(defaultConfig);
  const [generatedStrings, setGeneratedStrings] = useState<string[]>([]);
  const [currentString, setCurrentString] = useState("");

  const handleConfigChange = (field: keyof StringConfig, value: any) => {
    setConfig((prev) => ({ ...prev, [field]: value }));
  };

  const getCharacterSet = useCallback(() => {
    let chars = "";

    if (config.customChars) {
      chars = config.customChars;
    } else {
      if (config.includeUppercase) chars += UPPERCASE;
      if (config.includeLowercase) chars += LOWERCASE;
      if (config.includeNumbers) chars += NUMBERS;
      if (config.includeSymbols) chars += SYMBOLS;
    }

    if (config.excludeSimilar && !config.customChars) {
      chars = chars
        .split("")
        .filter((char) => !SIMILAR_CHARS.includes(char))
        .join("");
    }

    return chars;
  }, [config]);

  const generateRandomString = useCallback(
    (length: number, charset: string) => {
      if (!charset) return "";

      let result = "";
      const charactersLength = charset.length;

      for (let i = 0; i < length; i++) {
        result += charset.charAt(Math.floor(Math.random() * charactersLength));
      }

      return result;
    },
    []
  );

  const generateStrings = useCallback(() => {
    const charset = getCharacterSet();

    if (!charset) {
      toast.error("请至少选择一种字符类型");
      return;
    }

    const newStrings = [];
    for (let i = 0; i < config.batchCount; i++) {
      const randomStr = generateRandomString(config.length, charset);
      newStrings.push(randomStr);
    }

    setGeneratedStrings(newStrings);
    setCurrentString(newStrings[0] || "");
    toast.success(`成功生成 ${newStrings.length} 个随机字符串`);
  }, [config, getCharacterSet, generateRandomString]);

  const copyToClipboard = (text: string) => {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        toast.success("已复制到剪贴板");
      })
      .catch(() => {
        toast.error("复制失败");
      });
  };

  const copyAllStrings = () => {
    const allStrings = generatedStrings.join("\n");
    copyToClipboard(allStrings);
  };

  const getStrengthInfo = () => {
    const charset = getCharacterSet();
    const entropy = Math.log2(Math.pow(charset.length, config.length));

    let strength = "弱";
    let color = "bg-red-500 hover:bg-red-600";

    if (entropy >= 60) {
      strength = "极强";
      color = "bg-emerald-500 hover:bg-emerald-600";
    } else if (entropy >= 40) {
      strength = "强";
      color = "bg-cyan-500 hover:bg-cyan-600";
    } else if (entropy >= 25) {
      strength = "中等";
      color = "bg-amber-500 hover:bg-amber-600";
    }

    return { strength, entropy: entropy.toFixed(1), color };
  };

  const strengthInfo = getStrengthInfo();

  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      {/* Page Header */}
      <div className="flex items-center space-x-4 border-b pb-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-violet-500 to-purple-600 shadow-lg">
          <Zap className="h-6 w-6 text-white" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">随机字符串生成器</h1>
          <p className="text-muted-foreground">
            生成安全可靠的随机字符串，支持多种字符集配置
          </p>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Left: Configuration */}
        <div className="space-y-6">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <Settings className="h-4 w-4" />
                基础设置
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="length">字符串长度</Label>
                  <div className="relative">
                    <Input
                      id="length"
                      type="number"
                      min={1}
                      max={1000}
                      value={config.length}
                      onChange={(e) =>
                        handleConfigChange("length", parseInt(e.target.value) || 1)
                      }
                      className="pr-8"
                    />
                    <span className="absolute right-3 top-2.5 text-xs text-muted-foreground">位</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="batchCount">生成数量</Label>
                  <div className="relative">
                    <Input
                      id="batchCount"
                      type="number"
                      min={1}
                      max={100}
                      value={config.batchCount}
                      onChange={(e) =>
                        handleConfigChange("batchCount", parseInt(e.target.value) || 1)
                      }
                      className="pr-8"
                    />
                    <span className="absolute right-3 top-2.5 text-xs text-muted-foreground">个</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base font-medium">字符集选择</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="uppercase"
                    checked={config.includeUppercase}
                    onCheckedChange={(checked) =>
                      handleConfigChange("includeUppercase", checked)
                    }
                  />
                  <Label htmlFor="uppercase">大写字母 (A-Z)</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="lowercase"
                    checked={config.includeLowercase}
                    onCheckedChange={(checked) =>
                      handleConfigChange("includeLowercase", checked)
                    }
                  />
                  <Label htmlFor="lowercase">小写字母 (a-z)</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="numbers"
                    checked={config.includeNumbers}
                    onCheckedChange={(checked) =>
                      handleConfigChange("includeNumbers", checked)
                    }
                  />
                  <Label htmlFor="numbers">数字 (0-9)</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="symbols"
                    checked={config.includeSymbols}
                    onCheckedChange={(checked) =>
                      handleConfigChange("includeSymbols", checked)
                    }
                  />
                  <Label htmlFor="symbols">特殊符号</Label>
                </div>
                <div className="flex items-center space-x-2 col-span-2">
                  <Checkbox
                    id="excludeSimilar"
                    checked={config.excludeSimilar}
                    onCheckedChange={(checked) =>
                      handleConfigChange("excludeSimilar", checked)
                    }
                  />
                  <Label htmlFor="excludeSimilar">排除相似字符 (0O1lI|)</Label>
                </div>
              </div>

              <Separator />

              <div className="space-y-2">
                <Label htmlFor="customChars">自定义字符集</Label>
                <Input
                  id="customChars"
                  value={config.customChars}
                  onChange={(e) =>
                    handleConfigChange("customChars", e.target.value)
                  }
                  placeholder="输入自定义字符集（将覆盖上述选择）"
                />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right: Generate & Result */}
        <div className="space-y-6">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <Shield className="h-4 w-4" />
                安全强度
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-3 gap-4 text-center">
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground">字符集大小</div>
                  <div className="text-xl font-bold">{getCharacterSet().length}</div>
                </div>
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground">安全熵</div>
                  <div className="text-xl font-bold">{strengthInfo.entropy}</div>
                </div>
                <div className="space-y-1">
                  <div className="text-xs text-muted-foreground">强度等级</div>
                  <Badge className={strengthInfo.color}>{strengthInfo.strength}</Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base font-medium">生成控制</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Button
                onClick={generateStrings}
                className="w-full h-12 text-lg gap-2"
              >
                <RefreshCw className="h-5 w-5" />
                生成随机字符串
              </Button>

              {generatedStrings.length > 0 && (
                <div className="grid grid-cols-2 gap-4">
                  <Button
                    variant="outline"
                    onClick={() => copyToClipboard(currentString)}
                    className="gap-2"
                  >
                    <Copy className="h-4 w-4" />
                    复制当前
                  </Button>
                  <Button
                    variant="outline"
                    onClick={copyAllStrings}
                    className="gap-2"
                  >
                    <Copy className="h-4 w-4" />
                    复制全部
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>

          {generatedStrings.length > 0 && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-base font-medium">生成结果</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {config.batchCount === 1 ? (
                    <div className="relative">
                      <Input
                        value={currentString}
                        readOnly
                        className="font-mono text-lg pr-12"
                      />
                      <Button
                        variant="ghost"
                        size="icon"
                        className="absolute right-1 top-1 h-8 w-8"
                        onClick={() => copyToClipboard(currentString)}
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>
                  ) : (
                    <Textarea
                      value={generatedStrings.join("\n")}
                      readOnly
                      className="font-mono min-h-50"
                    />
                  )}
                  <div className="text-xs text-muted-foreground text-right">
                    生成时间: {new Date().toLocaleTimeString()}
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

      {/* Info Card */}
      <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>支持多种字符集组合配置</li>
                <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>密码长度建议至少12位以上</li>
                <li>重要账户建议使用16位以上密码</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>创建API密钥</li>
                <li>生成验证码</li>
                <li>创建随机标识符</li>
              </ul>
            </div>
          </div>
          <div className="mt-4 p-3 bg-muted rounded-md text-xs text-muted-foreground">
            💡 提示：生成的字符串完全在本地浏览器中创建，不会发送到任何服务器。
          </div>
        </CardContent>
      </Card>
    </div>
  );
}