import React, { useState, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import { 
  Bot, 
  Send, 
  Sparkles, 
  Trash2, 
  Copy, 
  Check, 
  Cpu, 
  User, 
  Layers, 
  Zap,
  RefreshCw,
  MessageSquare,
  Wand2,
  Sliders
} from 'lucide-react';
import modelsData from '../data/models.json';
import { ChatMessage } from '../types';

export const ChatPlayground: React.FC = () => {
  const location = useLocation();
  const locationState = location.state as { initialPrompt?: string; persona?: string; selectedModel?: string } | undefined;

  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: 'welcome',
      sender: 'assistant',
      text: 'سلام! من دستیار هوش مصنوعی هوشان هستم. چه کمکی در زمینه تصمیم‌گیری، تحلیل کسب‌وکار، تولید محتوا یا برنامه‌نویسی می‌توانم برای شما انجام دهم؟',
      timestamp: 'هم‌اکنون',
      model: 'GPT-4o'
    }
  ]);

  const [inputPrompt, setInputPrompt] = useState(locationState?.initialPrompt || '');
  const [selectedModel, setSelectedModel] = useState(locationState?.selectedModel || 'GPT-4o');
  const [selectedPersona, setSelectedPersona] = useState(locationState?.persona || 'مدیر استراتژی');
  const [isTyping, setIsTyping] = useState(false);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [coinsUsed, setCoinsUsed] = useState(12);

  const messagesEndRef = useRef<HTMLDivElement>(null);

  const personas = [
    { name: 'مدیر استراتژی', icon: '💼', role: 'مشاور ارشد استراتژی و تحول دیجیتال', systemPrompt: 'شما دستیار استراتژیک مدیران هستید.' },
    { name: 'متخصص سئو و محتوا', icon: '✍️', role: 'استراتژیست محتوا و کپی‌رایتر', systemPrompt: 'شما متخصص تولید محتوا، سئو و نگارش پرامپت هستید.' },
    { name: 'مهندس برنامه‌نویسی', icon: '💻', role: 'معمار نرم‌افزار و توسعه‌دهنده فول‌استک', systemPrompt: 'شما برنامه‌نویس ارشد و متخصص کدنویسی هستید.' },
    { name: 'مشاور حقوقی و قراردادها', icon: '⚖️', role: 'کارشناس حقوقی اسناد و قراردادهای تجاری', systemPrompt: 'شما مشاور حقوقی اسناد و قراردادهای کسب‌وکار هستید.' },
    { name: 'تحلیل‌گر داده و مالی', icon: '📊', role: 'تحلیل‌گر هوش تجاری و مالی', systemPrompt: 'شما تحلیل‌گر ارشد داده و مدل‌های مالی هستید.' },
  ];

  const quickPrompts = [
    'یک چک‌لیست برای ارزیابی آمادگی سازمان در پذیرش هوش مصنوعی آماده کن',
    'چگونه از مهندسی پرامپت برای تولید گزارش‌های مدیریتی دقیق استفاده کنم؟',
    'استراتژی بازاریابی محتوایی برای یک شرکت B2B بر اساس مدل قیف فروش بنویس',
    'بندهای کلیدی یک قرارداد عدم افشای اطلاعات (NDA) محرمانه را تدوین کن'
  ];

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isTyping]);

  const handleSend = () => {
    if (!inputPrompt.trim()) return;

    const userMsg: ChatMessage = {
      id: Date.now().toString(),
      sender: 'user',
      text: inputPrompt,
      timestamp: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
    };

    setMessages((prev) => [...prev, userMsg]);
    const currentInput = inputPrompt;
    setInputPrompt('');
    setIsTyping(true);

    setTimeout(() => {
      let aiReply = '';
      if (selectedPersona === 'مدیر استراتژی') {
        aiReply = `تحلیل استراتژیک هوشان برای موضوع: **${currentInput.slice(0, 40)}...**\n\n1. **تحلیل وضعیت و چالش‌های کلیدی**:\n   در مواجهه با این مسئله، نخستین گام تفکیک اهداف کوتاه‌مدت (Quick Wins) از ارزش‌آفرینی بلندمدت است.\n\n2. **نقشه راه پیشنهادی**:\n   - ارزیابی منابع داخلی و زیرساخت‌های فناوری\n   - اتوماسیون فرآیندهای پرتکرار برای کاهش ۲۰ تا ۳۰ درصدی هزینه‌ها\n   - بازمهارت‌آموزی تیم‌ها برای سازگاری با ابزارهای داده‌محور\n\n3. **شاخص‌های کلیدی عملکرد (KPIs)**:\n   افزایش نرخ بازگشت سرمایه (ROI)، بهبود زمان پاسخ‌گویی به بازار و ارتقای رضایت مشتریان.`;
      } else if (selectedPersona === 'متخصص سئو و محتوا') {
        aiReply = `پیشنهاد محتوایی و سئو هوشان:\n\n✨ **عنوان پیشنهادی جذاب**: راهنمای عملی ${currentInput.slice(0, 30)} برای افزایش ترافیک ارگانیک\n\n📝 **ساختار مقاله (Outline)**:\n- **مقدمه**: اهمیت موضوع و بیان چالش کاربر\n- **بخش اول (H2)**: مفاهیم پایه و اصول نگارش\n- **بخش دوم (H2)**: ابزارهای هوش مصنوعی کاربردی\n- **نتیجه‌گیری و اقدام (CTA)**: ترغیب به ثبت‌نام و تست دمو\n\n🔍 **کلمات کلیدی پیشنهادی**: هوش مصنوعی، ابزارهای فارسی، بهینه‌سازی، هوشان`;
      } else if (selectedPersona === 'مهندس برنامه‌نویسی') {
        aiReply = `راهکار فنی و پیاده‌سازی کد:\n\n\`\`\`typescript\n// پیاده‌سازی هوشمند با TypeScript و هوشان API\nasync function processHoushanTask(prompt: string, model: string) {\n  const response = await fetch('https://api.houshan.ai/v1/chat', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_TOKEN' },\n    body: JSON.stringify({ prompt, model, stream: true })\n  });\n  return response.json();\n}\n\`\`\`\nکد فوق بهینه‌سازی شده، دارای Type Safety کامل و قابلیت هندلینگ خطاست.`;
      } else {
        aiReply = `پاسخ تخصصی هوشان با مدل **${selectedModel}**:\n\nبررسی دقیق ابعاد موضوع نشان می‌دهد که با رعایت چارچوب‌های استاندارد، می‌توان به بهترین نتیجه دست یافت. اگر مایلید جزئیات بیشتری درباره پیاده‌سازی سازمانی یا فایل‌های ضمیمه در این زمینه بررسی شود، بفرمایید.`;
      }

      const assistantMsg: ChatMessage = {
        id: (Date.now() + 1).toString(),
        sender: 'assistant',
        text: aiReply,
        timestamp: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
        model: selectedModel
      };

      setIsTyping(false);
      setMessages((prev) => [...prev, assistantMsg]);
      setCoinsUsed((c) => c + 1);
    }, 1100);
  };

  const handleCopyMessage = (id: string, text: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  const handleClearHistory = () => {
    setMessages([
      {
        id: 'welcome',
        sender: 'assistant',
        text: 'تاریخچه گفتگو پاک شد. می‌توانید گفتگوی جدیدی را با هوشان شروع کنید.',
        timestamp: 'هم‌اکنون',
        model: selectedModel
      }
    ]);
  };

  return (
    <div className="pt-24 pb-12 bg-slate-950 min-h-screen flex flex-col">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex-1 flex flex-col">
        
        {/* Top Control Bar */}
        <div className="mb-4 p-4 rounded-2xl bg-slate-900/80 border border-slate-800 flex flex-wrap items-center justify-between gap-4">
          
          {/* Persona selector */}
          <div className="flex items-center gap-2 overflow-x-auto">
            <span className="text-xs text-slate-400 shrink-0 hidden sm:inline">شخصیت:</span>
            {personas.map((p) => (
              <button
                key={p.name}
                onClick={() => setSelectedPersona(p.name)}
                className={`px-3 py-1.5 rounded-xl text-xs font-semibold transition-all flex items-center gap-1.5 shrink-0 cursor-pointer ${
                  selectedPersona === p.name
                    ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30'
                    : 'bg-slate-950 text-slate-400 hover:text-slate-200 border border-slate-800'
                }`}
              >
                <span>{p.icon}</span>
                <span>{p.name}</span>
              </button>
            ))}
          </div>

          {/* Model Selector & Actions */}
          <div className="flex items-center gap-3 mr-auto">
            <div className="flex items-center gap-1.5 bg-slate-950 px-3 py-1.5 rounded-xl border border-slate-800">
              <Cpu className="w-3.5 h-3.5 text-purple-400" />
              <select
                value={selectedModel}
                onChange={(e) => setSelectedModel(e.target.value)}
                className="bg-transparent text-xs text-white font-bold focus:outline-none cursor-pointer"
              >
                {modelsData.map((m) => (
                  <option key={m.id} value={m.name} className="bg-slate-900 text-white">
                    {m.name} ({m.provider})
                  </option>
                ))}
              </select>
            </div>

            <div className="hidden sm:flex items-center gap-1 text-[11px] text-emerald-400 bg-emerald-500/10 px-2.5 py-1.5 rounded-xl border border-emerald-500/20 font-mono">
              <Zap className="w-3 h-3" />
              <span>{coinsUsed} سکه مصرفی</span>
            </div>

            <button
              onClick={handleClearHistory}
              title="پاک کردن گفتگو"
              className="p-2 rounded-xl text-slate-400 hover:text-rose-400 bg-slate-950 hover:bg-slate-800 border border-slate-800 transition-colors cursor-pointer"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          </div>

        </div>

        {/* Main Chat Box */}
        <div className="flex-1 flex flex-col bg-slate-900/60 border border-slate-800 rounded-3xl overflow-hidden shadow-2xl">
          
          {/* Messages Stream */}
          <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-6 max-h-[60vh] sm:max-h-[65vh]">
            {messages.map((msg) => (
              <div 
                key={msg.id}
                className={`flex gap-3 sm:gap-4 ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
              >
                {/* Assistant Avatar */}
                {msg.sender === 'assistant' && (
                  <div className="w-9 h-9 rounded-2xl bg-gradient-to-tr from-indigo-600 to-cyan-400 p-[1px] shrink-0 mt-1">
                    <div className="w-full h-full bg-slate-950 rounded-[15px] flex items-center justify-center">
                      <Bot className="w-5 h-5 text-indigo-400" />
                    </div>
                  </div>
                )}

                {/* Message Bubble */}
                <div className={`relative max-w-2xl rounded-3xl p-4 sm:p-5 space-y-2 text-xs sm:text-sm leading-relaxed ${
                  msg.sender === 'user'
                    ? 'bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-br-none shadow-md shadow-indigo-600/20'
                    : 'bg-slate-950/90 border border-slate-800 text-slate-200 rounded-bl-none shadow-sm'
                }`}>
                  
                  {msg.model && (
                    <div className="flex items-center justify-between gap-4 pb-2 border-b border-slate-800 text-[10px] text-indigo-400 font-mono">
                      <span className="flex items-center gap-1">
                        <Sparkles className="w-3 h-3" />
                        <span>مدل هوش مصنوعی: {msg.model}</span>
                      </span>
                      <span className="text-slate-500">{msg.timestamp}</span>
                    </div>
                  )}

                  <div className="whitespace-pre-line font-light">
                    {msg.text}
                  </div>

                  {msg.sender === 'assistant' && (
                    <div className="flex items-center justify-end pt-1">
                      <button
                        onClick={() => handleCopyMessage(msg.id, msg.text)}
                        className="text-[11px] text-slate-500 hover:text-slate-300 flex items-center gap-1 cursor-pointer"
                      >
                        {copiedId === msg.id ? (
                          <Check className="w-3 h-3 text-emerald-400" />
                        ) : (
                          <Copy className="w-3 h-3" />
                        )}
                        <span>{copiedId === msg.id ? 'کپی شد' : 'کپی'}</span>
                      </button>
                    </div>
                  )}
                </div>

                {/* User Avatar */}
                {msg.sender === 'user' && (
                  <div className="w-9 h-9 rounded-2xl bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 flex items-center justify-center shrink-0 mt-1">
                    <User className="w-5 h-5" />
                  </div>
                )}
              </div>
            ))}

            {isTyping && (
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-2xl bg-indigo-600/20 text-indigo-400 flex items-center justify-center shrink-0">
                  <Bot className="w-5 h-5" />
                </div>
                <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-indigo-400 animate-bounce" />
                  <div className="w-2 h-2 rounded-full bg-cyan-400 animate-bounce [animation-delay:0.2s]" />
                  <div className="w-2 h-2 rounded-full bg-purple-400 animate-bounce [animation-delay:0.4s]" />
                  <span className="text-xs text-slate-400 pr-2">هوشان در حال تایپ پاسخ...</span>
                </div>
              </div>
            )}

            <div ref={messagesEndRef} />
          </div>

          {/* Quick Prompts Bar */}
          <div className="px-4 py-2 border-t border-slate-800/80 bg-slate-950/40 flex items-center gap-2 overflow-x-auto text-[11px] text-slate-400">
            <span className="shrink-0 text-slate-500 font-semibold">پیشنهاد:</span>
            {quickPrompts.map((qp, i) => (
              <button
                key={i}
                onClick={() => setInputPrompt(qp)}
                className="px-2.5 py-1 rounded-lg bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 shrink-0 text-right cursor-pointer"
              >
                {qp}
              </button>
            ))}
          </div>

          {/* Input Area */}
          <div className="p-4 bg-slate-950 border-t border-slate-800">
            <div className="flex items-center gap-3">
              <input
                type="text"
                value={inputPrompt}
                onChange={(e) => setInputPrompt(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    handleSend();
                  }
                }}
                placeholder={`پیام خود را برای ${selectedPersona} با مدل ${selectedModel} بنویسید...`}
                className="flex-1 px-4 py-3 rounded-2xl bg-slate-900 border border-slate-800 text-xs sm:text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
              />
              <button
                onClick={handleSend}
                disabled={!inputPrompt.trim() || isTyping}
                className="px-5 py-3 rounded-2xl bg-gradient-to-r from-indigo-600 to-cyan-600 hover:opacity-90 disabled:opacity-40 text-white text-xs font-bold shadow-md shadow-indigo-600/25 transition-all flex items-center gap-2 shrink-0 cursor-pointer"
              >
                <span>ارسال</span>
                <Send className="w-4 h-4 rotate-180" />
              </button>
            </div>
          </div>

        </div>

      </div>
    </div>
  );
};
