import React, { useState, useEffect, useRef } from 'react';
import { 
  Send, Sparkles, Shield, X, MessageSquare, Loader2, 
  RotateCcw, Info, Heart, Headphones, BookOpen, Clock
} from 'lucide-react';

const apiKey = ""; // API Key

export default function App() {
  const [messages, setMessages] = useState([
    { 
      role: 'assistant', 
      text: 'مرحباً بك في بوابة الشفاء. أنا رفيقك في هذه الرحلة المتخصص في برامج الرقية الشرعية. مهمتي هي مساعدتك في فهم حالتك وتقديم برنامج علاجي مخصص ومبني على الكتاب والسنة.\n\nمن فضلك، أخبرني بوضوح: ما هي الأعراض التي تشعر بها؟ (سأقوم بمتابعة حالتك بأسئلة دقيقة للوصول لتشخيص صحيح وإرشادك للبرنامج الأنسب).' 
    }
  ]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const chatEndRef = useRef(null);

  const scrollToBottom = () => {
    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages, isLoading]);

  const sendMessage = async () => {
    if (!input.trim() || isLoading) return;

    const userMessage = { role: 'user', text: input };
    setMessages(prev => [...prev, userMessage]);
    setInput("");
    setIsLoading(true);

    try {
      const systemPrompt = `
        أنت "المعالج الرقمي للرقية الشرعية". أسلوبك يجب أن يكون حكيماً، شرعياً، ودقيقاً.
        ممنوع تماماً ذكر أنك "ذكاء اصطناعي" أو "نموذج لغوي" للمريض حتى لا تسبب له أي وسواس أو شك. تعامل كأنك معالج خبير.
        مهمتك تمر عبر 3 مراحل:
        1. الاستجواب: لا تشخص فوراً. اسأل المستخدم عن أعراض محددة (أحلام، ثقل أكتاف، ضيق صدر، نفور من العبادات، نبض متنقل). اسأل سؤالاً أو سؤالين في كل مرة لتعرف التفاصيل.
        2. التحليل: بناءً على الإجابات، حدد ما إذا كانت الحالة (عين وحسد، سحر، مس شيطاني، أو مجرد وهم وضغوط نفسية).
        3. التشخيص والبرنامج: بعد الاكتفاء من الأسئلة، قدم تشخيصاً واضحاً ثم برنامجاً علاجياً مفصلاً (صباحاً، ظهراً، مساءً) يشمل آيات محددة وأفعالاً (اغتسال، دهان بالزيت، أذكار).
        
        ملاحظات هامة:
        - ابدأ دائماً بالاستفسار عن الأعراض الجسدية والنفسية وأعراض المنام.
        - كن متعاطفاً واستخدم عبارات دينية مطمئنة (بإذن الله، لعلها طهور، الشافي هو الله).
        - إذا كانت الأعراض طبية بحتة، انصح بزيارة الطبيب بجانب الرقية.
        - اجعل إجاباتك منظمة باستخدام النقاط.
      `;

      const history = messages.map(m => ({
        role: m.role === 'assistant' ? 'model' : 'user',
        parts: [{ text: m.text }]
      }));

      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [...history, { role: 'user', parts: [{ text: input }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] }
        })
      });

      const data = await response.json();
      const botResponse = data.candidates?.[0]?.content?.parts?.[0]?.text || "عذراً، لم أستطع تحليل البيانات حالياً. حاول مرة أخرى.";
      
      setMessages(prev => [...prev, { role: 'assistant', text: botResponse }]);
    } catch (error) {
      setMessages(prev => [...prev, { role: 'assistant', text: "حدث خطأ في الاتصال. يرجى المحاولة لاحقاً." }]);
    } finally {
      setIsLoading(false);
    }
  };

  const resetChat = () => {
    setMessages([{ 
      role: 'assistant', 
      text: 'مرحباً بك مجدداً. لنبدأ من جديد. أخبرني عن حالتك وما تشعر به الآن؟' 
    }]);
  };

  return (
    <div className="min-h-screen bg-[#f8fafc] flex flex-col font-sans text-right" dir="rtl">
      {/* Header */}
      <header className="bg-emerald-900 text-white p-4 shadow-lg flex justify-between items-center sticky top-0 z-10">
        <div className="flex items-center gap-3">
          <div className="bg-emerald-500 p-2 rounded-xl shadow-inner">
            <Shield className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="font-black text-lg sm:text-xl">تطبيق الرقية الذكي</h1>
            <p className="text-[10px] text-emerald-300 font-bold opacity-80 uppercase tracking-tighter">استجواب • تشخيص • برنامج علاجي</p>
          </div>
        </div>
        <button 
          onClick={resetChat}
          className="p-2 hover:bg-emerald-800 rounded-full transition-colors"
          title="إعادة ضبط المحادثة"
        >
          <RotateCcw className="w-5 h-5" />
        </button>
      </header>

      {/* Chat Area */}
      <main className="flex-1 max-w-4xl w-full mx-auto p-4 flex flex-col gap-6 overflow-y-auto pb-32">
        <div className="bg-amber-50 border border-amber-200 p-4 rounded-2xl flex items-start gap-3 mb-2">
          <Info className="w-5 h-5 text-amber-600 mt-1 shrink-0" />
          <p className="text-sm text-amber-800 font-medium leading-relaxed">
            هذا النظام مخصص لتحليل حالتك بناءً على الأعراض التي تصفها بدقة. تذكر أن الشفاء بيد الله وحده، والرقية سبب من الأسباب.
          </p>
        </div>

        {messages.map((msg, idx) => (
          <div 
            key={idx} 
            className={`flex ${msg.role === 'user' ? 'justify-start' : 'justify-end'} animate-in fade-in slide-in-from-bottom-2 duration-300`}
          >
            <div className={`flex flex-col max-w-[90%] sm:max-w-[80%] ${msg.role === 'user' ? 'items-start' : 'items-end'}`}>
              <div className={`px-5 py-4 rounded-[1.8rem] shadow-sm text-base leading-relaxed whitespace-pre-wrap ${
                msg.role === 'user' 
                  ? 'bg-emerald-700 text-white rounded-br-none font-bold' 
                  : 'bg-white text-slate-800 border border-slate-200 rounded-bl-none font-medium'
              }`}>
                {msg.text}
              </div>
              <span className="text-[10px] text-slate-400 mt-2 px-2 font-bold uppercase">
                {msg.role === 'user' ? 'أنت' : 'المعالج الرقمي'}
              </span>
            </div>
          </div>
        ))}

        {isLoading && (
          <div className="flex justify-end animate-pulse">
            <div className="bg-white border border-slate-200 p-4 rounded-[1.8rem] flex items-center gap-3">
              <div className="flex gap-1">
                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-bounce"></div>
                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-bounce delay-150"></div>
                <div className="w-2 h-2 bg-emerald-500 rounded-full animate-bounce delay-300"></div>
              </div>
              <span className="text-sm font-bold text-slate-500 italic">جاري مراجعة إجابتك...</span>
            </div>
          </div>
        )}
        <div ref={chatEndRef} />
      </main>

      {/* Input Area */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md border-t border-slate-200 p-4 pb-6 sm:pb-4">
        <div className="max-w-4xl mx-auto flex gap-3">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
            placeholder="اكتب ما تشعر به هنا..."
            className="flex-1 bg-slate-100 border-2 border-transparent focus:border-emerald-500 focus:bg-white rounded-2xl px-6 py-4 outline-none transition-all font-bold text-slate-700 shadow-inner"
            disabled={isLoading}
          />
          <button
            onClick={sendMessage}
            disabled={isLoading || !input.trim()}
            className="bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-300 text-white w-14 h-14 rounded-2xl flex items-center justify-center shadow-xl transition-all hover:scale-105 active:scale-95"
          >
            {isLoading ? <Loader2 className="w-6 h-6 animate-spin" /> : <Send className="w-6 h-6 rotate-180" />}
          </button>
        </div>
        <p className="text-center text-[10px] text-slate-400 mt-2 font-medium">
          يرجى الإجابة بوضوح لضمان حصولك على البرنامج الأنسب لحالتك.
        </p>
      </div>

      {/* Steps Overlay */}
      <div className="hidden lg:flex fixed left-6 top-1/2 -translate-y-1/2 flex-col gap-4">
        <div className="bg-white p-4 rounded-2xl shadow-lg border border-slate-100 w-48 animate-in slide-in-from-left-4">
          <h4 className="font-black text-emerald-800 text-sm mb-3 flex items-center gap-2">
            <Sparkles className="w-4 h-4" /> مراحل الجلسة
          </h4>
          <ul className="space-y-3">
            <li className="flex items-center gap-2 text-xs font-bold text-slate-600">
              <div className="w-5 h-5 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center text-[10px]">1</div>
              الاستماع للأعراض
            </li>
            <li className="flex items-center gap-2 text-xs font-bold text-slate-400">
              <div className="w-5 h-5 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center text-[10px]">2</div>
              تحليل نوع الإصابة
            </li>
            <li className="flex items-center gap-2 text-xs font-bold text-slate-400">
              <div className="w-5 h-5 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center text-[10px]">3</div>
              تقديم البرنامج
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}