import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Button } from '@/client/components/ui/button';
import { Badge } from '@/client/components/ui/badge';
import { Separator } from '@/client/components/ui/separator';
import { 
  Brain, 
  FileText, 
  Image, 
  Code, 
  Zap, 
  Shield, 
  Users,
  ArrowRight,
  ExternalLink,
  BarChart,
  Settings
} from 'lucide-react';

export default function AIToolsPage() {
  const aiTools = [
    {
      icon: <FileText className="h-8 w-8" />,
      title: "元亨Word",
      description: "智能文档批量处理平台，支持Word模板与Excel数据结合，一键生成个性化文档",
      features: ["智能字段替换", "批量图片处理", "Excel数据驱动", "实时预览"],
      status: "active",
      link: "https://www.d8d.fun/editor/workspace/159/template/142",
      color: "text-blue-600",
      bgColor: "bg-blue-50"
    },
    {
      icon: <Image className="h-8 w-8" />,
      title: "智能图像处理",
      description: "基于深度学习的图像识别、分析和增强工具，支持多种图像格式处理",
      features: ["图像识别", "智能裁剪", "风格转换", "质量增强"],
      status: "active",
      link: "#",
      color: "text-green-600",
      bgColor: "bg-green-50"
    },
    {
      icon: <Code className="h-8 w-8" />,
      title: "代码智能生成",
      description: "AI辅助编程工具，支持多种编程语言，提高开发效率",
      features: ["代码补全", "Bug检测", "性能优化", "文档生成"],
      status: "beta",
      link: "#",
      color: "text-purple-600",
      bgColor: "bg-purple-50"
    },
    {
      icon: <BarChart className="h-8 w-8" />,
      title: "数据分析平台",
      description: "智能数据分析与可视化工具，帮助企业洞察业务数据",
      features: ["数据挖掘", "预测分析", "可视化报表", "实时监控"],
      status: "active",
      link: "#",
      color: "text-orange-600",
      bgColor: "bg-orange-50"
    },
    {
      icon: <Users className="h-8 w-8" />,
      title: "智能客服系统",
      description: "基于自然语言处理的智能客服解决方案，提升客户服务效率",
      features: ["智能问答", "情感分析", "多轮对话", "知识库管理"],
      status: "coming",
      link: "#",
      color: "text-red-600",
      bgColor: "bg-red-50"
    },
    {
      icon: <Settings className="h-8 w-8" />,
      title: "流程自动化",
      description: "企业业务流程自动化工具，减少人工操作，提高工作效率",
      features: ["工作流设计", "规则引擎", "任务调度", "监控告警"],
      status: "beta",
      link: "#",
      color: "text-indigo-600",
      bgColor: "bg-indigo-50"
    }
  ];

  const getStatusBadge = (status: string) => {
    const statusConfig = {
      active: { label: "已上线", variant: "default" as const },
      beta: { label: "测试版", variant: "secondary" as const },
      coming: { label: "即将推出", variant: "outline" as const }
    };
    
    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.active;
    return <Badge variant={config.variant}>{config.label}</Badge>;
  };

  const handleToolClick = (tool: any) => {
    if (tool.link && tool.link !== '#') {
      window.open(tool.link, '_blank');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
              <Brain className="h-4 w-4 mr-2" />
              AI工具矩阵
            </div>
            
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              智能工具平台
            </h1>
            
            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
              元亨科技为您提供全方位的AI解决方案，从文档处理到数据分析，助力企业智能化转型
            </p>
            
            <div className="flex flex-wrap justify-center gap-4 mt-8">
              <Badge variant="secondary" className="text-sm">文档处理</Badge>
              <Badge variant="secondary" className="text-sm">图像识别</Badge>
              <Badge variant="secondary" className="text-sm">代码生成</Badge>
              <Badge variant="secondary" className="text-sm">数据分析</Badge>
              <Badge variant="secondary" className="text-sm">智能客服</Badge>
              <Badge variant="secondary" className="text-sm">流程自动化</Badge>
            </div>
          </div>
        </div>
      </div>

      {/* Featured Tool - 元亨Word */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="flex items-center mb-4">
                <div className="p-3 bg-blue-100 rounded-lg mr-4">
                  <FileText className="h-8 w-8 text-blue-600" />
                </div>
                <div>
                  <Badge variant="default" className="mb-2">旗舰产品</Badge>
                  <h2 className="text-3xl font-bold text-gray-900">元亨Word批量处理</h2>
                </div>
              </div>
              
              <p className="text-lg text-gray-700 mb-6">
                基于AI技术的智能文档批量处理平台，支持Word模板与Excel数据完美结合，
                一键生成个性化文档，大幅提升工作效率。
              </p>
              
              <div className="space-y-3 mb-8">
                <div className="flex items-center">
                  <Zap className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-gray-700">智能字段替换，精准匹配数据</span>
                </div>
                <div className="flex items-center">
                  <Image className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-gray-700">批量图片处理，自动尺寸优化</span>
                </div>
                <div className="flex items-center">
                  <Shield className="h-5 w-5 text-green-500 mr-3" />
                  <span className="text-gray-700">数据安全保障，隐私保护</span>
                </div>
              </div>
              
              <Button 
                size="lg"
                className="bg-blue-600 hover:bg-blue-700 text-white"
                onClick={() => window.open('https://www.d8d.fun/editor/workspace/159/template/142', '_blank')}
              >
                <ExternalLink className="h-4 w-4 mr-2" />
                立即体验元亨Word
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            </div>
            
            <div className="relative">
              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8">
                <div className="grid gap-6">
                  <Card className="border-0 shadow-lg">
                    <CardHeader>
                      <CardTitle>核心功能</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                          Word模板批量处理
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                          Excel数据驱动生成
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                          智能图片替换处理
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                          实时预览与下载
                        </li>
                      </ul>
                    </CardContent>
                  </Card>
                  
                  <Card className="border-0 shadow-lg">
                    <CardHeader>
                      <CardTitle>适用场景</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
                          合同批量生成
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
                          报告文档自动化
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
                          证书批量制作
                        </li>
                        <li className="flex items-center">
                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
                          表格数据填充
                        </li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* All AI Tools */}
      <div className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">AI工具全家桶</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              从文档处理到智能分析，我们提供全方位的AI解决方案
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {aiTools.map((tool, index) => (
              <Card 
                key={index}
                className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
                  tool.status === 'coming' ? 'opacity-75' : ''
                }`}
                onClick={() => handleToolClick(tool)}
              >
                <CardHeader>
                  <div className="flex items-center justify-between mb-4">
                    <div className={`p-3 rounded-lg ${tool.bgColor} ${tool.color}`}>
                      {tool.icon}
                    </div>
                    {getStatusBadge(tool.status)}
                  </div>
                  <CardTitle className="text-xl">{tool.title}</CardTitle>
                  <CardDescription className="text-base mt-2">
                    {tool.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 mb-4">
                    {tool.features.map((feature, featureIndex) => (
                      <div key={featureIndex} className="flex items-center text-sm text-gray-600">
                        <div className="w-1.5 h-1.5 bg-gray-400 rounded-full mr-2"></div>
                        {feature}
                      </div>
                    ))}
                  </div>
                  
                  <Button 
                    variant={tool.status === 'coming' ? "outline" : "default"}
                    size="sm"
                    className="w-full"
                    disabled={tool.status === 'coming'}
                  >
                    {tool.status === 'coming' ? '即将推出' : '了解更多'}
                    <ArrowRight className="h-3 w-3 ml-2" />
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Technology Stack */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">技术架构</h2>
            <p className="text-xl text-gray-600">基于前沿AI技术，构建稳定可靠的智能平台</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { name: "机器学习", description: "深度学习算法模型训练" },
              { name: "自然语言处理", description: "文本理解与生成技术" },
              { name: "计算机视觉", description: "图像识别与分析处理" },
              { name: "大数据分析", description: "海量数据处理与挖掘" }
            ].map((tech, index) => (
              <Card key={index} className="border-0 shadow-lg text-center">
                <CardHeader>
                  <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Brain className="h-6 w-6 text-white" />
                  </div>
                  <CardTitle>{tech.name}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{tech.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold mb-4">
            开启智能办公新时代
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            选择元亨科技AI工具，让工作更高效、更智能
          </p>
          <Button 
            size="lg"
            variant="secondary"
            className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3"
            onClick={() => window.open('https://www.d8d.fun/editor/workspace/159/template/142', '_blank')}
          >
            <ExternalLink className="h-4 w-4 mr-2" />
            免费体验元亨Word
          </Button>
        </div>
      </div>
    </div>
  );
}