'use client';
import "@/styles/globals.css"
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Home, ArrowLeft, RefreshCw, Search, AlertTriangle, ExternalLink } from 'lucide-react';

export default function NotFound() {
  const handleRefresh = () => {
    window.location.reload();
  };

  const handleGoBack = () => {
    window.history.back();
  };

  return (
        <Card className="backdrop-blur-md absolute inset-x-6 top-6 bottom-6
  flex-1 min-h-0">
          <CardHeader className="text-center p-0">
            <div className="flex justify-center mb-4">
              <div className="relative">
                <div className="text-8xl font-bold text-destructive animate-pulse">404</div>
                <div className="absolute -top-2 -right-2">
                  <Badge variant="destructive" className="animate-bounce">
                    <AlertTriangle className="w-3 h-3 mr-1" />
                    Error
                  </Badge>
                </div>
              </div>
            </div>
            <CardTitle className="text-3xl font-bold text-foreground">
              页面未找到
            </CardTitle>
            <CardDescription className="text-lg text-muted-foreground mt-2">
              抱歉，您访问的页面似乎不存在或已被移动
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-6 p-0">
            {/* 错误信息提示 */}
            <Alert>
              <Search className="h-4 w-4" />
              <AlertTitle>发生了什么？</AlertTitle>
              <AlertDescription>
                您访问的页面可能已经删除、移动或暂时不可用。请检查URL是否正确，或尝试以下操作。
              </AlertDescription>
            </Alert>

            {/* 可能的原因列表 */}
            <div className="space-y-3">
              <h4 className="font-semibold text-foreground flex items-center">
                <span className="w-2 h-2 bg-warning rounded-full mr-2"></span>
                可能的原因：
              </h4>
              <div className="grid gap-2 ml-4">
                <div className="flex items-center text-sm text-muted-foreground">
                  <span className="text-destructive mr-2">•</span>
                  页面地址输入错误或链接已失效
                </div>
                <div className="flex items-center text-sm text-muted-foreground">
                  <span className="text-destructive mr-2">•</span>
                  页面已被移动或删除
                </div>
                <div className="flex items-center text-sm text-muted-foreground">
                  <span className="text-destructive mr-2">•</span>
                  您没有访问此页面的权限
                </div>
                <div className="flex items-center text-sm text-muted-foreground">
                  <span className="text-destructive mr-2">•</span>
                  服务器暂时无法响应
                </div>
              </div>
            </div>

            {/* 快速操作按钮 */}
            <div className="flex flex-col sm:flex-row gap-3 pt-2">
              <Button asChild className="flex-1">
                <Link href="/">
                  <Home className="w-4 h-4 mr-2" />
                  返回首页
                </Link>
              </Button>

              <Button variant="outline" onClick={handleGoBack} className="flex-1">
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回上页
              </Button>

              <Button variant="outline" onClick={handleRefresh} className="flex-1">
                <RefreshCw className="w-4 h-4 mr-2" />
                刷新页面
              </Button>
            </div>
          </CardContent>

          <CardFooter className="flex flex-col space-y-4 pt-6 border-t p-0">
            {/* 帮助信息 */}
            <div className="text-center text-sm text-muted-foreground">
              <p>需要帮助？请联系系统管理员</p>
            </div>

            {/* 错误详情 */}
            <div className="flex items-center justify-between text-xs text-muted-foreground bg-muted/50 rounded p-2">
              <span>错误代码: 404</span>
              <span>时间: {new Date().toLocaleString('zh-CN')}</span>
            </div>
          </CardFooter>
        </Card>
  );
} 