import React, { useState, useEffect, useCallback } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, addDoc, query, orderBy, 
  onSnapshot, updateDoc, doc, deleteDoc, serverTimestamp 
} from 'firebase/firestore';
import { 
  getAuth, signInAnonymously, onAuthStateChanged, User 
} from 'firebase/auth';
import { 
  Trash2, Play, Plus, Save, RotateCcw, 
  Settings, ArrowUp, ArrowDown, X, Cast, LayoutTemplate 
} from 'lucide-react';

// --- CONFIGURATION ---
const firebaseConfig = JSON.parse(__firebase_config || '{}');
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = __app_id || 'default-shaambavi';

// --- TYPES ---
type StepType = 'speak' | 'wait' | 'breath' | 'affirmation';

interface MicroStep {
  id: string;
  type: StepType;
  text: string;
  isCompleted: boolean;
}

interface Flow {
  id: string;
  title: string;
  originalInput: string;
  steps: MicroStep[];
  createdAt: any;
  deletedAt: any | null;
}

// --- GROQ API HELPER (THE BRAIN) ---
const generateFlowFromGroq = async (inputText: string, apiKey: string): Promise<MicroStep[]> => {
  if (!apiKey) throw new Error("Please enter a Groq API Key in Settings.");

  // UPDATED SYSTEM PROMPT: Neurodivergent Logic + Specific Tone
  const systemPrompt = `
    You are "My Own Shaambavi", an Executive Function Prosthetic for a neurodivergent user (ADHD/Autism).
    
    YOUR CORE LOGIC:
    1. DECONSTRUCT: The user sees "Clean Kitchen". You see "Stand up", "Walk to kitchen", "Find sponge", "Wet sponge". Break everything down into micro-steps.
    2. HIDDEN STEPS: Identify the invisible barriers (transitioning, fetching items). Always put "fetching" before "using".
    3. SEQUENCE: Group by location to minimize switching costs.
    
    YOUR TONE & PERSONA (CRITICAL):
    - Grounded, warm, not sugary. Not "parental".
    - Subordinate but supportive. Phrases: "I'm here", "Proceeding", "Noted", "Ready when you are".
    - For acknowledgments, use: "Okay", "Understood", "Yes ma'am", "Got it", "Right away".
    - For Meds: "Sip of water" -> "Tablet in hand" -> "Tablet in mouth" -> "Sip to finish".
    
    OUTPUT FORMAT:
    Strict JSON array of objects. Keys: "type" (speak|wait|breath|affirmation), "text".
    
    TYPES:
    - "speak": An instruction. Short. Clear.
    - "wait": A pause for user action (use this often after physical steps). Text should be a cue like "Tap when done" or "Tap to proceed".
    - "breath": A grounding moment. Text: "Deep inhale... and a soft exhale."
    - "affirmation": Grounding statements like "You are moving through life with intention", "You showed up for yourself", "You're in motion".
  `;

  try {
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${apiKey}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        messages: [
          { role: "system", content: systemPrompt },
          { role: "user", content: inputText }
        ],
        model: "llama-3.3-70b-versatile", // Using Llama 3 70B for high intelligence/logic
        temperature: 0.4, // Lower temperature for more reliable sequencing
        response_format: { type: "json_object" }
      })
    });

    if (!response.ok) {
        const errData = await response.json();
        throw new Error(errData.error?.message || `API Error: ${response.status}`);
    }

    const data = await response.json();
    const content = data.choices[0]?.message?.content;
    
    if (!content) throw new Error("No content received from AI.");

    const json = JSON.parse(content);
    const stepsArray = Array.isArray(json) ? json : (json.steps || json.actions || []);

    return stepsArray.map((s: any) => ({
      id: Math.random().toString(36).substr(2, 9),
      type: s.type || 'speak',
      text: s.text,
      isCompleted: false
    }));
  } catch (error) {
    console.error("Groq Error:", error);
    throw error;
  }
};

// --- COMPONENTS ---

// 1. SETTINGS
const SettingsModal = ({ 
  apiKey, setApiKey, onClose 
}: { apiKey: string, setApiKey: (k: string) => void, onClose: () => void }) => (
  <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4 font-serif">
    <div className="bg-slate-900 border border-slate-700 rounded-lg p-6 w-full max-w-md shadow-2xl">
      <h2 className="text-2xl italic font-bold text-slate-200 mb-4 flex items-center gap-2">
        <Settings className="w-5 h-5 text-red-400" /> Settings
      </h2>
      <div className="space-y-4">
        <div>
          <label className="block text-slate-400 text-sm mb-1 font-sans">Groq API Key</label>
          <input 
            type="password" 
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
            placeholder="gsk_..."
            className="w-full bg-slate-800 border border-slate-700 text-white rounded p-3 focus:outline-none focus:border-red-500 transition-colors font-sans"
          />
          <p className="text-xs text-slate-500 mt-2 font-sans">
            Required for Llama 3 70B logic.
          </p>
        </div>
        <button 
          onClick={onClose}
          className="w-full bg-red-900/50 hover:bg-red-800 text-red-100 py-3 rounded font-bold italic transition-colors border border-red-800"
        >
          Save & Close
        </button>
      </div>
    </div>
  </div>
);

// 2. FLOW CREATOR
const FlowCreator = ({ 
  apiKey, onSave, onCancel 
}: { apiKey: string, onSave: (title: string, input: string, steps: MicroStep[]) => void, onCancel: () => void }) => {
  const [input, setInput] = useState("");
  const [title, setTitle] = useState("");
  const [loading, setLoading] = useState(false);
  const [generatedSteps, setGeneratedSteps] = useState<MicroStep[]>([]);
  const [stepMode, setStepMode] = useState(false);

  const handleMagic = async () => {
    if (!input.trim()) return;
    setLoading(true);
    try {
      const steps = await generateFlowFromGroq(input, apiKey);
      setGeneratedSteps(steps);
      setStepMode(true);
      if (!title) setTitle(input.split('\n')[0].substring(0, 25));
    } catch (e: any) {
      alert(`Error: ${e.message}`);
    } finally {
      setLoading(false);
    }
  };

  const moveStep = (index: number, direction: -1 | 1) => {
    const newSteps = [...generatedSteps];
    if (index + direction < 0 || index + direction >= newSteps.length) return;
    [newSteps[index], newSteps[index + direction]] = [newSteps[index + direction], newSteps[index]];
    setGeneratedSteps(newSteps);
  };

  const deleteStep = (index: number) => {
    const newSteps = generatedSteps.filter((_, i) => i !== index);
    setGeneratedSteps(newSteps);
  };

  if (stepMode) {
    return (
      <div className="flex flex-col h-full bg-slate-950 font-serif">
        <div className="p-4 border-b border-slate-800 flex justify-between items-center bg-slate-900">
          <input 
            value={title} 
            onChange={e => setTitle(e.target.value)}
            className="bg-transparent text-2xl font-bold italic text-white focus:outline-none w-full"
            placeholder="Name this Flow..."
          />
          <button onClick={() => onSave(title, input, generatedSteps)} className="bg-red-700 text-white px-4 py-2 rounded flex gap-2 font-sans text-sm font-bold">
            <Save size={18} /> Save
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-4 space-y-3 font-sans">
          {generatedSteps.map((step, idx) => (
            <div key={step.id} className="bg-slate-900 border border-slate-800 p-3 rounded flex items-center gap-3 group">
              <div className="text-slate-500 font-mono text-xs w-6">{idx + 1}</div>
              <div className="flex-1">
                <div className="text-xs uppercase tracking-wider text-red-400 font-bold mb-1">{step.type}</div>
                <input 
                  value={step.text}
                  onChange={(e) => {
                    const newSteps = [...generatedSteps];
                    newSteps[idx].text = e.target.value;
                    setGeneratedSteps(newSteps);
                  }}
                  className="bg-transparent text-slate-200 w-full focus:outline-none font-serif text-lg"
                />
              </div>
              <div className="flex flex-col gap-1 opacity-50 group-hover:opacity-100">
                <button onClick={() => moveStep(idx, -1)} disabled={idx === 0}><ArrowUp size={16} /></button>
                <button onClick={() => moveStep(idx, 1)} disabled={idx === generatedSteps.length - 1}><ArrowDown size={16} /></button>
              </div>
              <button onClick={() => deleteStep(idx)} className="text-red-500 opacity-50 hover:opacity-100 p-2"><X size={16} /></button>
            </div>
          ))}
          <button 
            onClick={() => setGeneratedSteps([...generatedSteps, { id: Math.random().toString(), type: 'speak', text: 'New Step', isCompleted: false }])}
            className="w-full py-3 border border-dashed border-slate-700 text-slate-500 rounded hover:border-slate-500 hover:text-slate-300 italic"
          >
            + Add Step Manually
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full bg-slate-950 p-6 font-serif">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-3xl font-bold italic text-slate-100">New Flow</h2>
        <button onClick={onCancel} className="text-slate-400 hover:text-white font-sans text-sm">Cancel</button>
      </div>
      
      <div className="flex-1 flex flex-col gap-4">
        <input 
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="Title (Optional)"
          className="bg-slate-900 border border-slate-800 rounded p-4 text-white text-xl italic focus:border-red-500 focus:outline-none placeholder-slate-600"
        />
        <textarea
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Dump your brain here..."
          className="flex-1 bg-slate-900 border border-slate-800 rounded p-4 text-white text-lg resize-none focus:border-red-500 focus:outline-none placeholder-slate-600 leading-relaxed"
        />
        <button 
          onClick={handleMagic}
          disabled={loading || !input.trim()}
          className="bg-gradient-to-r from-red-900 to-slate-800 hover:from-red-800 hover:to-slate-700 text-white py-4 rounded-lg font-bold text-lg flex items-center justify-center gap-2 shadow-lg transition-all font-sans"
        >
          {loading ? (
            <span className="animate-pulse">Consulting Llama 3...</span>
          ) : (
            <>
              <LayoutTemplate size={20} /> Generate Micro-Steps
            </>
          )}
        </button>
      </div>
    </div>
  );
};

// 3. FLOW RUNNER
const FlowRunner = ({ flow, onClose }: { flow: Flow, onClose: () => void }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isActive, setIsActive] = useState(false);

  const speak = useCallback((text: string) => {
    if (!window.speechSynthesis) return;
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
    const voices = window.speechSynthesis.getVoices();
    // Try to find a deep, calm voice if available
    const preferredVoice = voices.find(v => v.name.includes("Google US English") || v.name.includes("Samantha"));
    if (preferredVoice) utterance.voice = preferredVoice;
    utterance.rate = 0.95; 
    utterance.pitch = 0.9; // Slightly deeper/grounded
    window.speechSynthesis.speak(utterance);
  }, []);

  const currentStep = flow.steps[currentIndex];

  const handleTap = () => {
    if (!isActive) {
      setIsActive(true);
      if (flow.steps.length > 0) speak(flow.steps[0].text);
      return;
    }

    if (currentIndex >= flow.steps.length - 1) {
      onClose();
      return;
    }

    const nextIndex = currentIndex + 1;
    setCurrentIndex(nextIndex);
    speak(flow.steps[nextIndex].text);
  };

  useEffect(() => {
    window.speechSynthesis.getVoices();
  }, []);

  const getStepColor = (type: StepType) => {
    switch (type) {
      case 'breath': return 'text-blue-200';
      case 'affirmation': return 'text-red-200';
      case 'wait': return 'text-slate-400';
      default: return 'text-slate-100';
    }
  };

  return (
    <div 
      onClick={handleTap}
      className="fixed inset-0 bg-slate-950 z-50 flex flex-col items-center justify-center p-8 cursor-pointer select-none font-serif"
    >
      <div className={`absolute inset-0 bg-red-900/5 transition-opacity duration-1000 ${currentStep?.type === 'breath' ? 'opacity-30' : 'opacity-0'}`} />

      <div className="absolute top-0 left-0 right-0 h-1 bg-slate-900">
        <div 
          className="h-full bg-red-800 transition-all duration-500"
          style={{ width: `${((currentIndex + 1) / flow.steps.length) * 100}%` }}
        />
      </div>

      <div className="relative z-10 max-w-2xl w-full text-center space-y-12">
        {!isActive ? (
           <div className="animate-pulse flex flex-col items-center">
             <Play className="w-20 h-20 text-slate-700 mb-6" />
             <h1 className="text-4xl italic text-slate-400 font-light">Tap to begin.</h1>
             <p className="text-slate-600 mt-4 text-sm font-sans">I'm here when you're ready.</p>
           </div>
        ) : (
          <>
            <div className="text-xs font-sans font-bold text-red-500 uppercase tracking-[0.3em]">
              Step {currentIndex + 1} / {flow.steps.length}
            </div>
            
            <h1 className={`text-5xl md:text-6xl italic leading-tight transition-colors duration-500 ${getStepColor(currentStep?.type || 'speak')}`}>
              {currentStep?.text}
            </h1>

            {currentStep?.type === 'wait' && (
              <div className="animate-pulse text-slate-600 font-sans text-sm tracking-widest mt-8">
                TAP TO PROCEED
              </div>
            )}
          </>
        )}
      </div>

      <div className="absolute bottom-8 right-8 flex gap-4" onClick={e => e.stopPropagation()}>
         <button className="text-slate-700 hover:text-slate-500"><Cast size={24} /></button>
         <button onClick={onClose} className="text-slate-700 hover:text-red-500"><X size={24} /></button>
      </div>
    </div>
  );
};

// 4. MAIN APP
export default function App() {
  const [user, setUser] = useState<User | null>(null);
  const [view, setView] = useState<'dashboard' | 'create' | 'runner' | 'bin'>('dashboard');
  const [apiKey, setApiKey] = useState("");
  const [showSettings, setShowSettings] = useState(false);
  const [flows, setFlows] = useState<Flow[]>([]);
  const [activeFlow, setActiveFlow] = useState<Flow | null>(null);

  // Load Font
  useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }, []);

  useEffect(() => {
    const initAuth = async () => {
      await signInAnonymously(auth);
    };
    initAuth();
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u);
      if (u) {
        const savedKey = localStorage.getItem('shaambavi_groq_key');
        if (savedKey) setApiKey(savedKey);
      }
    });
    return () => unsub();
  }, []);

  useEffect(() => {
    if (!user) return;
    const q = query(
      collection(db, 'artifacts', appId, 'users', user.uid, 'flows'),
      orderBy('createdAt', 'desc')
    );
    const unsub = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map(d => ({ id: d.id, ...d.data() })) as Flow[];
      setFlows(data);
    });
    return () => unsub();
  }, [user]);

  const saveApiKey = (key: string) => {
    setApiKey(key);
    localStorage.setItem('shaambavi_groq_key', key);
  };

  const handleSaveFlow = async (title: string, input: string, steps: MicroStep[]) => {
    if (!user) return;
    await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'flows'), {
      title: title || "Untitled Flow",
      originalInput: input,
      steps,
      createdAt: serverTimestamp(),
      deletedAt: null
    });
    setView('dashboard');
  };

  const toggleBin = async (id: string, isDeleted: boolean) => {
    if (!user) return;
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'flows', id), {
      deletedAt: isDeleted ? serverTimestamp() : null
    });
  };

  const permDelete = async (id: string) => {
    if (!user) return;
    await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'flows', id));
  };

  const activeFlows = flows.filter(f => !f.deletedAt);
  const binFlows = flows.filter(f => f.deletedAt);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200" style={{ fontFamily: '"Cormorant Garamond", serif' }}>
      
      {/* HEADER */}
      <header className="bg-slate-900 border-b border-slate-800 p-6 sticky top-0 z-20 flex justify-between items-center shadow-lg">
        <div className="flex items-center gap-4">
          <div className="w-10 h-10 bg-red-900 rounded-full flex items-center justify-center text-red-200 font-bold text-xl font-sans">S</div>
          <h1 className="text-3xl text-slate-100">
            <span className="font-bold">My Own</span> <span className="italic font-light text-red-300">Shaambavi</span>
          </h1>
        </div>
        <div className="flex items-center gap-3">
           <button onClick={() => setView('dashboard')} className={`p-2 rounded hover:bg-slate-800 transition ${view === 'dashboard' ? 'text-red-400' : 'text-slate-500'}`}><LayoutTemplate size={22}/></button>
           <button onClick={() => setView('bin')} className={`p-2 rounded hover:bg-slate-800 transition ${view === 'bin' ? 'text-red-400' : 'text-slate-500'}`}><Trash2 size={22}/></button>
           <button onClick={() => setShowSettings(true)} className="p-2 rounded hover:bg-slate-800 text-slate-500"><Settings size={22}/></button>
        </div>
      </header>

      {/* MAIN */}
      <main className="max-w-3xl mx-auto p-6 md:p-8 pb-32">
        
        {view === 'dashboard' && (
          <div className="space-y-8">
            <button 
              onClick={() => setView('create')}
              className="w-full py-8 border border-dashed border-slate-800 rounded-xl flex items-center justify-center gap-4 text-slate-500 hover:text-red-300 hover:border-red-900/50 hover:bg-slate-900/50 transition-all group"
            >
              <div className="w-12 h-12 rounded-full bg-slate-900 group-hover:bg-red-900/20 flex items-center justify-center transition-colors">
                <Plus size={24} />
              </div>
              <span className="font-bold text-2xl italic">Create New Flow</span>
            </button>

            <div className="grid gap-6">
              {activeFlows.length === 0 && (
                <div className="text-center text-slate-600 py-12 italic text-xl">
                  Your mind is clear. Create a flow to begin.
                </div>
              )}
              {activeFlows.map(flow => (
                <div key={flow.id} className="bg-slate-900 border border-slate-800 rounded-lg p-6 hover:border-slate-700 transition-all shadow-md group">
                  <div className="flex justify-between items-start mb-4">
                    <h3 className="font-bold text-2xl text-slate-200 italic">{flow.title}</h3>
                    <button onClick={() => toggleBin(flow.id, true)} className="p-2 text-slate-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={20}/></button>
                  </div>
                  <div className="text-lg text-slate-500 mb-6 line-clamp-2 font-sans font-light leading-relaxed">{flow.originalInput}</div>
                  <div className="flex items-center justify-between">
                     <span className="text-xs font-sans font-bold text-slate-600 uppercase bg-slate-950 px-3 py-1 rounded-full tracking-wider">{flow.steps.length} Steps</span>
                     <button 
                       onClick={() => { setActiveFlow(flow); setView('runner'); }}
                       className="flex items-center gap-2 bg-red-900/20 text-red-300 px-6 py-2 rounded hover:bg-red-900/30 transition-colors border border-red-900/20 font-bold italic"
                     >
                       <Play size={18} fill="currentColor" /> Begin
                     </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {view === 'bin' && (
          <div className="space-y-4">
            <h2 className="text-2xl italic font-bold text-slate-500 mb-6 flex items-center gap-2">
              <Trash2 className="w-5 h-5"/> Recycle Bin
            </h2>
            {binFlows.map(flow => (
                <div key={flow.id} className="bg-slate-900/50 border border-slate-800 rounded-lg p-4 flex justify-between items-center opacity-60">
                  <div>
                    <h3 className="font-bold text-slate-400 italic text-lg">{flow.title}</h3>
                  </div>
                  <div className="flex gap-3">
                    <button onClick={() => toggleBin(flow.id, false)} className="p-2 text-slate-500 hover:text-green-500 transition-colors" title="Restore"><RotateCcw size={20}/></button>
                    <button onClick={() => permDelete(flow.id)} className="p-2 text-slate-500 hover:text-red-500 transition-colors" title="Delete Forever"><X size={20}/></button>
                  </div>
                </div>
              ))}
          </div>
        )}

        {view === 'create' && (
          <FlowCreator 
            apiKey={apiKey} 
            onSave={handleSaveFlow} 
            onCancel={() => setView('dashboard')} 
          />
        )}
      </main>

      {view === 'runner' && activeFlow && (
        <FlowRunner flow={activeFlow} onClose={() => { setActiveFlow(null); setView('dashboard'); }} />
      )}

      {showSettings && (
        <SettingsModal 
          apiKey={apiKey} 
          setApiKey={saveApiKey} 
          onClose={() => setShowSettings(false)} 
        />
      )}

    </div>
  );
}