import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, TrendingUp } from 'lucide-react';
import PageHeader from '@/components/PageHeader';

interface Scenario {
  id: string;
  name: string;
  image: string;
  description?: string;
  count: number;
  growth: string;
}

export default function Scenarios() {
  const navigate = useNavigate();
  const [scenarios, setScenarios] = useState<Scenario[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  // AI智能获客用本地 mock 数据（暂时注释掉，可以后续启用）
  // const aiScenarios = [
  //   {
  //     id: "ai-friend",
  //     name: "AI智能加友",
  //     icon: "🤖",
  //     count: 245,
  //     growth: "+18.5%",
  //     description: "智能分析目标用户画像，自动筛选优质客户",
  //     path: "/scenarios/ai-friend",
  //   },
  //   {
  //     id: "ai-group",
  //     name: "AI群引流",
  //     icon: "🤖",
  //     count: 178,
  //     growth: "+15.2%",
  //     description: "智能群管理，提高群活跃度，增强获客效果",
  //     path: "/scenarios/ai-group",
  //   },
  //   {
  //     id: "ai-conversion",
  //     name: "AI场景转化",
  //     icon: "🤖",
  //     count: 134,
  //     growth: "+12.8%",
  //     description: "多场景智能营销，提升获客转化率",
  //     path: "/scenarios/ai-conversion",
  //   },
  // ];

  useEffect(() => {
    const fetchScenarios = async () => {
      setLoading(true);
      try {
        // 这里可以调用实际的API
        // const response = await fetch('/api/scenarios');
        // const data = await response.json();
        
        // 模拟数据
        const mockScenarios: Scenario[] = [
          {
            id: "douyin",
            name: "抖音获客",
            image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
            description: "通过抖音平台进行精准获客",
            count: 156,
            growth: "+12%",
          },
          {
            id: "xiaohongshu",
            name: "小红书获客",
            image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
            description: "利用小红书平台进行内容营销获客",
            count: 89,
            growth: "+8%",
          },
          {
            id: "gongzhonghao",
            name: "公众号获客",
            image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
            description: "通过微信公众号进行获客",
            count: 234,
            growth: "+15%",
          },
          {
            id: "haibao",
            name: "海报获客",
            image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
            description: "通过海报分享进行获客",
            count: 167,
            growth: "+10%",
          },
        ];
        
        setScenarios(mockScenarios);
      } catch (error) {
        setError('获取场景数据失败');
        console.error('获取场景数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchScenarios();
  }, []);

  if (loading) {
    return (
      <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
        <PageHeader
          title="场景获客"
          showBack={false}
        />
        <div className="flex justify-center items-center h-40">
          <div className="text-gray-500">加载中...</div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
        <PageHeader
          title="场景获客"
          showBack={false}
        />
        <div className="text-red-500 text-center py-8">{error}</div>
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
      <PageHeader
        title="场景获客"
        showBack={false}
        rightContent={
          <button 
            onClick={() => navigate('/scenarios/new')}
            className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
          >
            <Plus className="h-4 w-4 mr-1" />
            新建计划
          </button>
        }
      />

      <div className="p-4">
        <div className="grid grid-cols-2 gap-4">
          {scenarios.map((scenario) => (
            <div
              key={scenario.id}
              className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
              onClick={() => navigate(`/scenarios/${scenario.id}/detail`)}
            >
              <div className="p-4 flex flex-col items-center">
                <img src={scenario.image} alt={scenario.name} className="w-12 h-12 mb-2 rounded" />
                <h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
                {scenario.description && (
                  <p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
                )}
                <div className="flex items-center mt-2 text-gray-500 text-sm">
                  <span>今日: </span>
                  <span className="font-medium ml-1">{scenario.count}</span>
                </div>
                <div className="flex items-center mt-1 text-green-500 text-xs">
                  <TrendingUp className="h-3 w-3 mr-1" />
                  <span>{scenario.growth}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* AI智能获客部分（暂时注释掉，可以后续启用） */}
        {/*
        <div className="mt-6">
          <div className="flex items-center mb-4">
            <h2 className="text-lg font-medium">AI智能获客</h2>
            <span className="ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">
              Beta
            </span>
          </div>

          <div className="grid grid-cols-2 gap-4">
            {aiScenarios.map((scenario) => (
              <div
                key={scenario.id}
                className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
                onClick={() => navigate(scenario.path)}
              >
                <div className="p-4 flex flex-col items-center">
                  <div className="text-3xl mb-2">{scenario.icon}</div>
                  <h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
                  <p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
                  <div className="flex items-center mt-2 text-gray-500 text-sm">
                    <span>今日: </span>
                    <span className="font-medium ml-1">{scenario.count}</span>
                  </div>
                  <div className="flex items-center mt-1 text-green-500 text-xs">
                    <TrendingUp className="h-3 w-3 mr-1" />
                    <span>{scenario.growth}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        */}
      </div>
    </div>
  );
}