'use client';

import { useState } from 'react';
import Link from 'next/link';

export default function TemplateLibrary() {
  const [selectedTemplate, setSelectedTemplate] = useState<number | null>(null);

  const templates = [
    {
      id: 1,
      name: '客户数据自动化处理',
      description: '自动收集、清洗和分析客户数据，生成洞察报告',
      category: '数据处理',
      difficulty: '中级',
      estimatedTime: '10-15分钟',
      usageCount: 2156,
      rating: 4.8,
      tags: ['数据清洗', 'ETL', '客户分析', '报告生成'],
      icon: '📊',
      features: ['自动数据收集', '智能数据清洗', '实时分析', '可视化报表'],
      preview: 'https://readdy.ai/api/search-image?query=modern%20data%20processing%20dashboard%20with%20clean%20charts%20and%20analytics%20visualization%2C%20blue%20and%20white%20interface%2C%20professional%20business%20intelligence%20design&width=400&height=240&seq=template_1&orientation=landscape'
    },
    {
      id: 2,
      name: 'AI内容创作助手',
      description: '基于关键词自动生成高质量文章并发布到多个平台',
      category: '内容创作',
      difficulty: '简单',
      estimatedTime: '5-10分钟',
      usageCount: 1892,
      rating: 4.9,
      tags: ['内容生成', 'SEO优化', '多平台发布', 'AI写作'],
      icon: '✍️',
      features: ['AI智能写作', 'SEO优化', '一键发布', '内容调度'],
      preview: 'https://readdy.ai/api/search-image?query=AI%20content%20creation%20interface%20with%20writing%20tools%20and%20publishing%20options%2C%20modern%20minimalist%20design%20with%20purple%20and%20blue%20accents&width=400&height=240&seq=template_2&orientation=landscape'
    },
    {
      id: 3,
      name: '邮件智能管理系统',
      description: '自动分类邮件、生成智能回复并跟踪邮件状态',
      category: '任务自动化',
      difficulty: '中级',
      estimatedTime: '8-12分钟',
      usageCount: 1456,
      rating: 4.7,
      tags: ['邮件自动化', 'NLP处理', '智能回复', '状态跟踪'],
      icon: '📧',
      features: ['智能分类', '自动回复', '状态跟踪', '优先级管理'],
      preview: 'https://readdy.ai/api/search-image?query=email%20management%20dashboard%20with%20organized%20inbox%2C%20smart%20filtering%20and%20automated%20responses%2C%20clean%20modern%20interface%20design&width=400&height=240&seq=template_3&orientation=landscape'
    },
    {
      id: 4,
      name: '电商订单自动化',
      description: '从订单接收到发货的完整自动化处理流程',
      category: '系统集成',
      difficulty: '高级',
      estimatedTime: '15-20分钟',
      usageCount: 1234,
      rating: 4.8,
      tags: ['订单处理', 'ERP集成', '库存管理', '物流跟踪'],
      icon: '📦',
      features: ['订单自动处理', '库存同步', '物流跟踪', '异常处理'],
      preview: 'https://readdy.ai/api/search-image?query=e-commerce%20order%20processing%20dashboard%20with%20inventory%20management%20and%20shipping%20tracking%2C%20professional%20blue%20and%20orange%20design&width=400&height=240&seq=template_4&orientation=landscape'
    },
    {
      id: 5,
      name: '社交媒体监控',
      description: '监控品牌提及、分析情感倾向并生成营销洞察',
      category: '数据处理',
      difficulty: '中级',
      estimatedTime: '12-18分钟',
      usageCount: 987,
      rating: 4.6,
      tags: ['社媒监控', '情感分析', '品牌监测', '营销洞察'],
      icon: '📱',
      features: ['实时监控', '情感分析', '趋势预测', '竞品分析'],
      preview: 'https://readdy.ai/api/search-image?query=social%20media%20monitoring%20dashboard%20with%20sentiment%20analysis%20charts%20and%20brand%20mention%20tracking%2C%20modern%20colorful%20interface&width=400&height=240&seq=template_5&orientation=landscape'
    },
    {
      id: 6,
      name: '财务报表自动化',
      description: '自动收集财务数据，生成专业的财务报表和分析',
      category: '数据处理',
      difficulty: '高级',
      estimatedTime: '20-25分钟',
      usageCount: 756,
      rating: 4.9,
      tags: ['财务分析', '报表生成', '数据可视化', 'BI集成'],
      icon: '💰',
      features: ['多源数据整合', '自动报表', '财务分析', '预算跟踪'],
      preview: 'https://readdy.ai/api/search-image?query=financial%20reporting%20dashboard%20with%20charts%20graphs%20and%20financial%20analytics%2C%20professional%20green%20and%20blue%20business%20interface&width=400&height=240&seq=template_6&orientation=landscape'
    },
    {
      id: 7,
      name: '客户服务自动化',
      description: '智能客服机器人，自动回复客户询问并转接人工',
      category: 'AI工作流',
      difficulty: '中级',
      estimatedTime: '10-15分钟',
      usageCount: 1678,
      rating: 4.7,
      tags: ['智能客服', '自动回复', '工单管理', '人工转接'],
      icon: '🤖',
      features: ['智能对话', '多渠道支持', '工单管理', '知识库'],
      preview: 'https://readdy.ai/api/search-image?query=customer%20service%20chatbot%20interface%20with%20conversation%20flow%20and%20automated%20responses%2C%20friendly%20blue%20and%20white%20design&width=400&height=240&seq=template_7&orientation=landscape'
    },
    {
      id: 8,
      name: '数据备份与同步',
      description: '定期备份重要数据并同步到多个云存储平台',
      category: '系统集成',
      difficulty: '简单',
      estimatedTime: '5-8分钟',
      usageCount: 1345,
      rating: 4.8,
      tags: ['数据备份', '云同步', '定时任务', '安全存储'],
      icon: '☁️',
      features: ['定时备份', '多云同步', '数据加密', '恢复管理'],
      preview: 'https://readdy.ai/api/search-image?query=cloud%20backup%20and%20sync%20dashboard%20with%20progress%20indicators%20and%20storage%20management%2C%20clean%20modern%20tech%20interface&width=400&height=240&seq=template_8&orientation=landscape'
    },
    {
      id: 9,
      name: '项目进度跟踪',
      description: '自动跟踪项目进度，生成进度报告并发送提醒',
      category: '任务自动化',
      difficulty: '中级',
      estimatedTime: '12-15分钟',
      usageCount: 892,
      rating: 4.6,
      tags: ['项目管理', '进度跟踪', '报告生成', '提醒通知'],
      icon: '📋',
      features: ['进度监控', '里程碑跟踪', '团队协作', '风险预警'],
      preview: 'https://readdy.ai/api/search-image?query=project%20management%20dashboard%20with%20progress%20tracking%20and%20milestone%20indicators%2C%20professional%20purple%20and%20blue%20interface&width=400&height=240&seq=template_9&orientation=landscape'
    }
  ];

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case '简单': return 'text-green-600 bg-green-100';
      case '中级': return 'text-yellow-600 bg-yellow-100';
      case '高级': return 'text-red-600 bg-red-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  };

  const handleUseTemplate = (templateId: number) => {
    console.log('使用模板:', templateId);
    // 这里可以跳转到创建页面并预填充模板数据
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
      {templates.map((template) => (
        <div
          key={template.id}
          className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
          onClick={() => setSelectedTemplate(selectedTemplate === template.id ? null : template.id)}
        >
          {/* 模板预览图 */}
          <div className="relative h-48 bg-gray-100">
            <img
              src={template.preview}
              alt={template.name}
              className="w-full h-full object-cover object-top"
            />
            <div className="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md">
              <span className="text-xl">{template.icon}</span>
            </div>
            <div className="absolute bottom-3 left-3 flex items-center space-x-2">
              <span className={`px-2 py-1 text-xs rounded-full ${getDifficultyColor(template.difficulty)}`}>
                {template.difficulty}
              </span>
              <span className="px-2 py-1 text-xs bg-gray-900 text-white rounded-full">
                {template.estimatedTime}
              </span>
            </div>
          </div>

          {/* 模板信息 */}
          <div className="p-6">
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-1">{template.name}</h3>
                <span className="text-sm text-blue-600 font-medium">{template.category}</span>
              </div>
              <div className="flex items-center space-x-1">
                <div className="w-4 h-4 flex items-center justify-center">
                  <i className="ri-star-fill text-yellow-400"></i>
                </div>
                <span className="text-sm font-medium text-gray-700">{template.rating}</span>
              </div>
            </div>

            <p className="text-gray-600 text-sm mb-4 leading-relaxed">
              {template.description}
            </p>

            {/* 使用统计 */}
            <div className="flex items-center text-sm text-gray-500 mb-4">
              <div className="w-4 h-4 flex items-center justify-center mr-1">
                <i className="ri-user-line"></i>
              </div>
              <span>{template.usageCount.toLocaleString()} 次使用</span>
            </div>

            {/* 标签 */}
            <div className="flex flex-wrap gap-1 mb-4">
              {template.tags.slice(0, 3).map((tag, index) => (
                <span
                  key={index}
                  className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full"
                >
                  {tag}
                </span>
              ))}
              {template.tags.length > 3 && (
                <span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
                  +{template.tags.length - 3}
                </span>
              )}
            </div>

            {/* 展开的详细信息 */}
            {selectedTemplate === template.id && (
              <div className="border-t border-gray-200 pt-4 mt-4">
                <div className="mb-4">
                  <h4 className="text-sm font-medium text-gray-900 mb-2">主要功能</h4>
                  <ul className="space-y-1">
                    {template.features.map((feature, index) => (
                      <li key={index} className="text-sm text-gray-600 flex items-center">
                        <div className="w-4 h-4 flex items-center justify-center mr-2">
                          <i className="ri-check-line text-green-500"></i>
                        </div>
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mb-4">
                  <h4 className="text-sm font-medium text-gray-900 mb-2">所有标签</h4>
                  <div className="flex flex-wrap gap-1">
                    {template.tags.map((tag, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* 操作按钮 */}
            <div className="flex items-center space-x-3">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  handleUseTemplate(template.id);
                }}
                className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors whitespace-nowrap"
              >
                使用模板
              </button>
              <button
                onClick={(e) => e.stopPropagation()}
                className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
              >
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-eye-line"></i>
                </div>
              </button>
              <button
                onClick={(e) => e.stopPropagation()}
                className="p-2 text-gray-400 hover:text-red-600 transition-colors"
              >
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-heart-line"></i>
                </div>
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}