import React, { useState } from 'react';
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { TrendingUp, Sparkles, MessageSquare, ShoppingCart, Brain, Target, Users, DollarSign } from 'lucide-react';

const KidProductAISystem = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [aiInsight, setAiInsight] = useState('');
  const [adContent, setAdContent] = useState('');
  const [productName, setProductName] = useState('');
  const [productCategory, setProductCategory] = useState('ของเล่น');
  const [targetAge, setTargetAge] = useState('3-6 ปี');

  // ข้อมูลการขายตัวอย่าง
  const salesData = [
    { month: 'ม.ค.', toys: 45000, books: 32000, clothes: 28000, electronics: 38000 },
    { month: 'ก.พ.', toys: 52000, books: 35000, clothes: 31000, electronics: 42000 },
    { month: 'มี.ค.', toys: 48000, books: 38000, clothes: 34000, electronics: 45000 },
    { month: 'เม.ย.', toys: 65000, books: 42000, clothes: 39000, electronics: 51000 },
    { month: 'พ.ค.', toys: 58000, books: 45000, clothes: 42000, electronics: 48000 },
    { month: 'มิ.ย.', toys: 72000, books: 48000, clothes: 46000, electronics: 55000 }
  ];

  const categoryData = [
    { name: 'ของเล่น', value: 340000, color: '#FF6B9D' },
    { name: 'หนังสือ', value: 240000, color: '#4ECDC4' },
    { name: 'เสื้อผ้า', value: 220000, color: '#FFE66D' },
    { name: 'อิเล็กทรอนิกส์', value: 279000, color: '#95E1D3' }
  ];

  const topProducts = [
    { name: 'บล็อกตัวต่อชุดใหญ่', sales: 12500, growth: 23, category: 'ของเล่น' },
    { name: 'หนังสือนิทานภาพ', sales: 9800, growth: 18, category: 'หนังสือ' },
    { name: 'เสื้อยืดการ์ตูน', sales: 8900, growth: -5, category: 'เสื้อผ้า' },
    { name: 'แท็บเล็ตสำหรับเด็ก', sales: 15600, growth: 31, category: 'อิเล็กทรอนิกส์' },
    { name: 'ตุ๊กตาหมีขนาดใหญ่', sales: 7200, growth: 12, category: 'ของเล่น' }
  ];

  // ฟังก์ชัน AI วิเคราะห์แนวโน้ม
  const analyzeWithAI = (product) => {
    setSelectedProduct(product);
    
    const insights = {
      'บล็อกตัวต่อชุดใหญ่': {
        trend: 'เติบโต',
        reason: 'ผู้ปกครองให้ความสำคัญกับของเล่นที่พัฒนาทักษะมากขึ้น โดยเฉพาะของเล่น STEM ที่ช่วยพัฒนาความคิดสร้างสรรค์',
        prediction: 'คาดการณ์ยอดขายเพิ่มขึ้น 25-30% ในไตรมาสหน้า เนื่องจากเทรนด์การเรียนรู้ผ่านการเล่นกำลังได้รับความนิยม',
        recommendation: '• จัดโปรโมชั่นแบบชุดเซ็ท (Bundle)\n• ทำคอนเทนต์วิดีโอแนะนำวิธีเล่น\n• ร่วมมือกับโรงเรียนอนุบาล\n• เพิ่มสต็อกสินค้าก่อนช่วงปิดเทอม'
      },
      'แท็บเล็ตสำหรับเด็ก': {
        trend: 'เติบโตสูง',
        reason: 'การศึกษาออนไลน์และแอปพลิเคชันการเรียนรู้มีบทบาทมากขึ้น พ่อแม่ยุคใหม่ยอมรับเทคโนโลยีช่วยพัฒนาเด็ก',
        prediction: 'คาดการณ์ยอดขายคงที่ในระดับสูง โดยมียอดขายพุ่งสูงสุดในช่วงเปิดเทอม ควรเตรียมสต็อกตั้งแต่เดือนเมษายน',
        recommendation: '• เน้นการตลาดผ่านช่องทางดิจิทัล\n• จัดโปรโมชั่นพร้อมแอปการเรียนรู้\n• สร้างคอนเทนต์ด้านความปลอดภัยสำหรับเด็ก\n• มีบริการรับประกันและซ่อม'
      }
    };

    const defaultInsight = {
      trend: 'มีศักยภาพ',
      reason: 'สินค้าในหมวดนี้มีความต้องการคงที่ในตลาด คุณภาพและราคาเป็นปัจจัยสำคัญในการตัดสินใจซื้อ',
      prediction: 'คาดการณ์ยอดขายคงที่ ควรมีการทำการตลาดเชิงรุกเพื่อเพิ่มส่วนแบ่งตลาด',
      recommendation: '• ปรับปรุงคุณภาพและดีไซน์สินค้า\n• ทำการตลาดเน้นความปลอดภัย\n• สร้างโปรโมชั่นพิเศษ\n• รับฟังความคิดเห็นลูกค้า'
    };

    const insight = insights[product.name] || defaultInsight;
    
    setAiInsight(`
🎯 การวิเคราะห์ด้วย AI สำหรับ "${product.name}"

📊 แนวโน้ม: ${insight.trend}
การเติบโต: ${product.growth > 0 ? '+' : ''}${product.growth}%

💡 เหตุผลจาก AI:
${insight.reason}

🔮 การพยากรณ์:
${insight.prediction}

✨ คำแนะนำจาก AI:
${insight.recommendation}

📈 คะแนนความมั่นใจ: ${85 + Math.floor(Math.random() * 10)}%
`);
  };

  // ฟังก์ชัน AI สร้างคำโฆษณา
  const generateAd = () => {
    if (!productName) {
      setAdContent('⚠️ กรุณาระบุชื่อสินค้าก่อนค่ะ');
      return;
    }

    const ageMessages = {
      '0-2 ปี': 'ปลอดภัย เหมาะสำหรับน้อง ๆ วัยเตาะแตะ',
      '3-6 ปี': 'พัฒนาการเหมาะสมกับวัยก่อนวัยเรียน',
      '7-12 ปี': 'สนุกและเสริมการเรียนรู้สำหรับวัยเรียน',
      '13-15 ปี': 'ทันสมัย เท่ห์ เหมาะกับวัยรุ่นตัวน้อย'
    };

    const categoryEmojis = {
      'ของเล่น': '🎮',
      'หนังสือ': '📚',
      'เสื้อผ้า': '👕',
      'อิเล็กทรอนิกส์': '💻',
      'อาหาร': '🍭',
      'กีฬา': '⚽'
    };

    const adTemplates = [
      `✨ ${categoryEmojis[productCategory]} ${productName} ${categoryEmojis[productCategory]} ✨

🌟 ${ageMessages[targetAge]}
💝 คุณภาพดี ปลอดภัย ผ่านมาตรฐาน
🎁 ของขวัญที่ดีที่สุดสำหรับลูกรัก
💯 ราคาคุ้มค่า คุ้มครองผู้บริโภค

👉 สั่งซื้อวันนี้ รับส่วนลด 20%
📦 จัดส่งฟรี เมื่อซื้อครบ 500 บาท
⭐ รีวิว 4.8/5 จากผู้ปกครอง 1,000+ คน

#สินค้าเด็ก #ของขวัญเด็ก #${productCategory}`,

      `🎉 เปิดตัว! ${productName} 🎉

พิเศษสำหรับเด็กอายุ ${targetAge}
✅ ได้รับการรับรองจากผู้เชี่ยวชาญ
✅ ${ageMessages[targetAge]}
✅ วัสดุคุณภาพสูง ใช้งานทนทาน

🔥 โปรโมชั่นพิเศษ! 🔥
💰 ลดสูงสุด 30% วันนี้เท่านั้น
🎁 ซื้อ 2 แถม 1
🚚 จัดส่งด่วนภายใน 24 ชม.

⭐⭐⭐⭐⭐ ผู้ปกครองแนะนำ
"ลูกชอบมาก คุณภาพดีจริง!" - คุณแม่มะลิ`,

      `💖 ${productName} 💖
${categoryEmojis[productCategory]} ${productCategory}สุดพิเศษสำหรับน้อง ๆ ${categoryEmojis[productCategory]}

🎯 เหมาะสำหรับเด็กอายุ ${targetAge}
🌈 ${ageMessages[targetAge]}
🏆 ได้รับรางวัลสินค้าคุณภาพ 2024
💚 เป็นมิตรกับสิ่งแวดล้อม

📢 โปรโมชั่นสุดพิเศษ!
🎊 ซื้อวันนี้ รับของแถมมูลค่า 200 บาท
💝 บรรจุภัณฑ์สวยงาม พร้อมของขวัญ
🌟 รับประกัน 1 ปีเต็ม

สั่งเลย! จำนวนจำกัด 🛒`
    ];

    const randomAd = adTemplates[Math.floor(Math.random() * adTemplates.length)];
    setAdContent(randomAd);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="bg-white rounded-2xl shadow-xl p-8 mb-6">
          <div className="flex items-center gap-4 mb-4">
            <div className="bg-gradient-to-r from-pink-500 to-purple-600 p-3 rounded-xl">
              <Brain className="w-8 h-8 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
                ระบบประชาสัมพันธ์อัจฉริยะ AI
              </h1>
              <p className="text-gray-600">วิเคราะห์แนวโน้มและสร้างคำโฆษณาสินค้าสำหรับเด็กด้วย AI</p>
            </div>
          </div>

          {/* Tabs */}
          <div className="flex gap-2 mt-6">
            <button
              onClick={() => setActiveTab('dashboard')}
              className={`px-6 py-3 rounded-lg font-medium transition-all ${
                activeTab === 'dashboard'
                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              <Target className="w-5 h-5 inline mr-2" />
              แดชบอร์ด
            </button>
            <button
              onClick={() => setActiveTab('analysis')}
              className={`px-6 py-3 rounded-lg font-medium transition-all ${
                activeTab === 'analysis'
                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              <TrendingUp className="w-5 h-5 inline mr-2" />
              วิเคราะห์แนวโน้ม
            </button>
            <button
              onClick={() => setActiveTab('ad')}
              className={`px-6 py-3 rounded-lg font-medium transition-all ${
                activeTab === 'ad'
                  ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              <Sparkles className="w-5 h-5 inline mr-2" />
              สร้างโฆษณา
            </button>
          </div>
        </div>

        {/* Dashboard Tab */}
        {activeTab === 'dashboard' && (
          <div className="space-y-6">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <div className="bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl p-6 text-white shadow-xl">
                <DollarSign className="w-8 h-8 mb-2 opacity-80" />
                <p className="text-sm opacity-90">ยอดขายรวม</p>
                <p className="text-3xl font-bold">1.08M</p>
                <p className="text-sm mt-2">+18% จากเดือนที่แล้ว</p>
              </div>
              <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-xl">
                <ShoppingCart className="w-8 h-8 mb-2 opacity-80" />
                <p className="text-sm opacity-90">สินค้าทั้งหมด</p>
                <p className="text-3xl font-bold">248</p>
                <p className="text-sm mt-2">12 สินค้าใหม่</p>
              </div>
              <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-xl">
                <Users className="w-8 h-8 mb-2 opacity-80" />
                <p className="text-sm opacity-90">ลูกค้าใหม่</p>
                <p className="text-3xl font-bold">1,432</p>
                <p className="text-sm mt-2">+24% จากเดือนที่แล้ว</p>
              </div>
              <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-xl">
                <TrendingUp className="w-8 h-8 mb-2 opacity-80" />
                <p className="text-sm opacity-90">อัตราการเติบโต</p>
                <p className="text-3xl font-bold">+21%</p>
                <p className="text-sm mt-2">เทียบกับปีที่แล้ว</p>
              </div>
            </div>

            {/* Charts */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div className="bg-white rounded-2xl shadow-xl p-6">
                <h3 className="text-xl font-bold text-gray-800 mb-4">📈 ยอดขายรายเดือน</h3>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={salesData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line type="monotone" dataKey="toys" stroke="#FF6B9D" name="ของเล่น" strokeWidth={2} />
                    <Line type="monotone" dataKey="books" stroke="#4ECDC4" name="หนังสือ" strokeWidth={2} />
                    <Line type="monotone" dataKey="clothes" stroke="#FFE66D" name="เสื้อผ้า" strokeWidth={2} />
                    <Line type="monotone" dataKey="electronics" stroke="#95E1D3" name="อิเล็กทรอนิกส์" strokeWidth={2} />
                  </LineChart>
                </ResponsiveContainer>
              </div>

              <div className="bg-white rounded-2xl shadow-xl p-6">
                <h3 className="text-xl font-bold text-gray-800 mb-4">🎯 สัดส่วนยอดขายตามหมวดหมู่</h3>
                <ResponsiveContainer width="100%" height={300}>
                  <PieChart>
                    <Pie
                      data={categoryData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      outerRadius={100}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {categoryData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>
        )}

        {/* Analysis Tab */}
        {activeTab === 'analysis' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="bg-white rounded-2xl shadow-xl p-6">
              <h3 className="text-xl font-bold text-gray-800 mb-4">🏆 สินค้าขายดี Top 5</h3>
              <div className="space-y-4">
                {topProducts.map((product, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl hover:shadow-lg transition-all cursor-pointer"
                    onClick={() => analyzeWithAI(product)}
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <span className="text-2xl font-bold text-purple-600">#{index + 1}</span>
                        <div>
                          <p className="font-semibold text-gray-800">{product.name}</p>
                          <p className="text-sm text-gray-600">{product.category}</p>
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="font-bold text-gray-800">{product.sales.toLocaleString()}</p>
                      <p className={`text-sm font-medium ${product.growth > 0 ? 'text-green-600' : 'text-red-600'}`}>
                        {product.growth > 0 ? '↑' : '↓'} {Math.abs(product.growth)}%
                      </p>
                    </div>
                    <button className="ml-4 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-lg hover:shadow-lg transition-all">
                      วิเคราะห์
                    </button>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-6">
              <div className="flex items-center gap-2 mb-4">
                <Brain className="w-6 h-6 text-purple-600" />
                <h3 className="text-xl font-bold text-gray-800">🤖 การวิเคราะห์จาก AI</h3>
              </div>
              {aiInsight ? (
                <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6">
                  <pre className="whitespace-pre-wrap text-sm text-gray-700 font-medium leading-relaxed">
                    {aiInsight}
                  </pre>
                </div>
              ) : (
                <div className="bg-gray-50 rounded-xl p-8 text-center">
                  <Brain className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                  <p className="text-gray-500">เลือกสินค้าเพื่อให้ AI วิเคราะห์แนวโน้มการขาย</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Ad Generator Tab */}
        {activeTab === 'ad' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="bg-white rounded-2xl shadow-xl p-6">
              <h3 className="text-xl font-bold text-gray-800 mb-4">✨ สร้างคำโฆษณาด้วย AI</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">ชื่อสินค้า</label>
                  <input
                    type="text"
                    value={productName}
                    onChange={(e) => setProductName(e.target.value)}
                    placeholder="เช่น บล็อกตัวต่อชุดใหญ่"
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">หมวดหมู่</label>
                  <select
                    value={productCategory}
                    onChange={(e) => setProductCategory(e.target.value)}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none"
                  >
                    <option value="ของเล่น">ของเล่น</option>
                    <option value="หนังสือ">หนังสือ</option>
                    <option value="เสื้อผ้า">เสื้อผ้า</option>
                    <option value="อิเล็กทรอนิกส์">อิเล็กทรอนิกส์</option>
                    <option value="อาหาร">อาหาร</option>
                    <option value="กีฬา">กีฬา</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">กลุ่มอายุเป้าหมาย</label>
                  <select
                    value={targetAge}
                    onChange={(e) => setTargetAge(e.target.value)}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none"
                  >
                    <option value="0-2 ปี">0-2 ปี (ทารก)</option>
                    <option value="3-6 ปี">3-6 ปี (ก่อนวัยเรียน)</option>
                    <option value="7-12 ปี">7-12 ปี (วัยเรียน)</option>
                    <option value="13-15 ปี">13-15 ปี (วัยรุ่นต้น)</option>
                  </select>
                </div>

                <button
                  onClick={generateAd}
                  className="w-full px-6 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-xl font-bold hover:shadow-2xl transition-all transform hover:scale-105"
                >
                  <Sparkles className="w-5 h-5 inline mr-2" />
                  สร้างคำโฆษณาด้วย AI
                </button>
              </div>
            </div>

            <div className="bg-white rounded-2xl shadow-xl p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-xl font-bold text-gray-800">📝 คำโฆษณาที่สร้างโดย AI</h3>
                {adContent && (
                  <button
                    onClick={() => navigator.clipboard.writeText(adContent)}
                    className="px-4 py-2 bg-purple-100 text-purple-600 rounded-lg hover:bg-purple-200 transition-all text-sm font-medium"
                  >
                    📋 คัดลอก
                  </button>
                )}
              </div>
              {adContent ? (
                <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 min-h-[400px]">
                  <pre className="whitespace-pre-wrap text-gray-700 leading-relaxed font-medium">
                    {adContent}
                  </pre>
                </div>
              ) : (
                <div className="bg-gray-50 rounded-xl p-8 text-center min-h-[400px] flex flex-col items-center justify-center">
                  <MessageSquare className="w-16 h-16 text-gray-300 mb-4" />
                  <p className="text-gray-500">กรอกข้อมูลสินค้าและกดปุ่มเพื่อสร้างคำโฆษณา</p>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default KidProductAISystem;