"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { useTheme } from "./ThemeProvider";
import { useFamily } from "./FamilyProvider";

const OFFLINE_QUEUE_KEY = "tia_offline_queue";

interface AIChat {
  id: string;
  role: "user" | "assistant";
  content: string;
  createdAt: string;
}

interface ChatSession {
  id: string;
  title: string;
  messages: AIChat[];
  createdAt: string;
  updatedAt: string;
}

export interface OfflineEntry {
  id: string;
  type: "feed" | "diaper" | "sleep";
  data: any;
  timestamp: number;
}

export function getOfflineQueue(): OfflineEntry[] {
  if (typeof window === "undefined") return [];
  try {
    const data = localStorage.getItem(OFFLINE_QUEUE_KEY);
    return data ? JSON.parse(data) : [];
  } catch { return []; }
}

export function addToOfflineQueue(entry: Omit<OfflineEntry, "id" | "timestamp">) {
  const queue = getOfflineQueue();
  queue.push({ ...entry, id: crypto.randomUUID(), timestamp: Date.now() });
  localStorage.setItem(OFFLINE_QUEUE_KEY, JSON.stringify(queue));
}

export async function processOfflineQueue() {
  const queue = getOfflineQueue();
  if (queue.length === 0) return;
  const failed: OfflineEntry[] = [];
  for (const entry of queue) {
    try {
      await fetch("/api/logs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(entry.data) });
    } catch { failed.push(entry); }
  }
  localStorage.setItem(OFFLINE_QUEUE_KEY, JSON.stringify(failed));
}

// --- AI Session Functions (using database) ---
async function getSessions(cid: string): Promise<ChatSession[]> {
  try {
    const res = await fetch(`/api/chat?childId=${cid}`);
    const data = await res.json();
    return data.sessions || [];
  } catch { return []; }
}

async function createSession(cid: string): Promise<ChatSession | null> {
  try {
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ childId: cid, title: "New conversation" }),
    });
    const data = await res.json();
    return data.session || null;
  } catch { return null; }
}

function LogModal({ type, childId, onClose }: { type: "feed" | "diaper" | "sleep" | null; childId: string; onClose: () => void }) {
  const [loading, setLoading] = useState(false);
  const [subType, setSubType] = useState("breast_milk");
  const [amountMl, setAmountMl] = useState("");
  const [notes, setNotes] = useState("");
  if (!type) return null;

  const handleSubmit = async () => {
    setLoading(true);
    const data = { type, childId, subType, amountMl: amountMl ? Number(amountMl) : undefined, notes: notes || undefined };
    try {
      const res = await fetch("/api/logs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
      if (!res.ok && !navigator.onLine) addToOfflineQueue({ type: type as any, data });
      onClose();
    } catch { addToOfflineQueue({ type: type as any, data }); onClose(); }
    setLoading(false);
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-2xl p-6 w-full max-w-sm mx-4">
        <h2 className="text-xl font-bold mb-4">{type === "feed" && "Log Feed"}{type === "diaper" && "Log Diaper"}{type === "sleep" && "Log Sleep"}</h2>
        {type === "feed" && (<><select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border rounded-xl mb-3"><option value="breast_milk">Breast Milk</option><option value="formula">Formula</option><option value="solid">Solid Food</option><option value="water">Water</option></select><input type="number" placeholder="Amount (ml)" value={amountMl} onChange={e => setAmountMl(e.target.value)} className="w-full p-3 border rounded-xl mb-3" /></>)}
        {type === "diaper" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border rounded-xl mb-3"><option value="wet">Wet</option><option value="dirty">Dirty</option><option value="both">Both</option></select>)}
        {type === "sleep" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border rounded-xl mb-3"><option value="nap">Nap</option><option value="night">Night Sleep</option></select>)}
        <input type="text" placeholder="Notes (optional)" value={notes} onChange={e => setNotes(e.target.value)} className="w-full p-3 border rounded-xl mb-4" />
        <div className="flex gap-3"><button onClick={onClose} className="flex-1 p-3 border rounded-xl">Cancel</button><button onClick={handleSubmit} disabled={loading} className="flex-1 p-3 bg-rose-400 text-white rounded-xl">{loading ? "Saving..." : "Save"}</button></div>
      </div>
    </div>
  );
}

function calculateAge(birthDate: string) {
  const birth = new Date(birthDate);
  const now = new Date();
  const days = Math.floor((now.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24));
  const months = Math.floor(days / 30);
  const years = Math.floor(months / 12);
  if (years > 0) return `${years} year${years > 1 ? "s" : ""} old`;
  if (months > 0) return `${months} month${months > 1 ? "s" : ""} old`;
  return `${days} day${days > 1 ? "s" : ""} old`;
}

function getGreeting() {
  const hour = new Date().getHours();
  if (hour < 12) return "Good morning";
  if (hour < 18) return "Good afternoon";
  return "Good evening";
}

const QUICK_QUESTIONS = ["How much should my baby eat?", "When should baby sleep?", "Is fever normal?", "How to increase milk supply?", "Baby won't sleep", "Starting solids?"];

export default function HomePage() {
  const [modalType, setModalType] = useState<"feed" | "diaper" | "sleep" | null>(null);
  const [aiOpen, setAiOpen] = useState(false);
  const [aiInput, setAiInput] = useState("");
  const [aiChats, setAiChats] = useState<AIChat[]>([]);
  const [aiLoading, setAiLoading] = useState(false);
  const [pendingCount, setPendingCount] = useState(0);
  const [lastLogs, setLastLogs] = useState<any[]>([]);
  const { theme, toggle: toggleTheme } = useTheme();
  const { childId, child, loading } = useFamily();

  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }

  if (!childId) {
    return <div className="min-h-screen flex items-center justify-center">No child found. Add a child in Family settings.</div>;
  }
  useEffect(() => {
    getSessions(childId).then(sessions => {
      if (sessions.length > 0) {
        setAiChats(sessions[0].messages);
      }
    });
  }, []);

  useEffect(() => {
    const queue = getOfflineQueue();
    setPendingCount(queue.length);
    const handleOnline = () => processOfflineQueue();
    window.addEventListener("online", handleOnline);
    if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(console.error);
    return () => window.removeEventListener("online", handleOnline);
  }, []);

  useEffect(() => {
    Promise.all([
      fetch(`/api/logs?type=feed&childId=${childId}&limit=1`).then(r => r.json()),
      fetch(`/api/logs?type=sleep&childId=${childId}&limit=1`).then(r => r.json()),
      fetch(`/api/logs?type=diaper&childId=${childId}&limit=1`).then(r => r.json()),
    ]).then(([feed, sleep, diaper]) => setLastLogs([feed.entries?.[0], sleep.entries?.[0], diaper.entries?.[0]].filter(Boolean)));
  }, [childId]);

  const toggleDarkMode = () => {
    toggleTheme();
  };

  // Unified AI chat that saves to sessions (database)
  const handleAiChat = async (question?: string) => {
    const q = question || aiInput;
    if (!q.trim() || aiLoading) return;
    setAiLoading(true);
    setAiOpen(true);

    const sessions = await getSessions(childId);
    let currentSession: ChatSession | null = sessions[0] || null;

    // Create new session if none exists
    if (!currentSession) {
      currentSession = await createSession(childId);
      if (currentSession) {
        sessions.unshift(currentSession);
      }
    }

    if (!currentSession) {
      setAiLoading(false);
      return;
    }

    const userMsg: AIChat = { id: crypto.randomUUID(), role: "user", content: q, createdAt: new Date().toISOString() };
    const inputVal = q.trim();
    if (!question) setAiInput("");

    try {
      // Save user message to DB
      await fetch("/api/chat", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sessionId: currentSession.id, role: "user", content: inputVal }),
      });

      // Get AI response
      const res = await fetch("/api/ai", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [{ role: "user", content: inputVal }] }) });
      const data = await res.json();
      const reply = data.reply || "Sorry, I couldn't help with that.";

      // Save AI response to DB
      await fetch("/api/chat", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sessionId: currentSession.id, role: "assistant", content: reply }),
      });

      // Refresh sessions
      const updatedSessions = await getSessions(childId);
      setAiChats(updatedSessions[0]?.messages || []);
    } catch (err) {
      console.error("AI chat error:", err);
    }
    setAiLoading(false);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
      <div className="p-4 flex justify-between items-center">
        <button className="p-2"><Link href="/menu"><svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg></Link></button>
        <button onClick={toggleDarkMode} className="p-2">{theme === "dark" ? "☀️" : "🌙"}</button>
      </div>

      <div className="px-6 pb-4">
        <h1 className="text-2xl font-bold">{getGreeting()} 👋</h1>
        <p className="text-gray-600">How is {child?.name || "your baby"} doing today?</p>
      </div>

      <div className="mx-4 mb-4 p-4 bg-white rounded-2xl shadow-md">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 bg-rose-100 rounded-full flex items-center justify-center text-2xl">👶</div>
          <div><div className="text-lg font-semibold">{child?.name || "Baby"}</div><div className="text-gray-500">{calculateAge(child?.birthDate || "")}</div></div>
        </div>
      </div>

      {pendingCount > 0 && <div className="mx-4 mb-4 bg-amber-100 text-amber-800 px-4 py-2 rounded-xl text-center">{pendingCount} pending log{pendingCount > 1 ? "s" : ""}</div>}

      <div className="px-4 mb-4">
        <h2 className="font-semibold mb-3 ml-1">Quick Log</h2>
        <div className="grid grid-cols-4 gap-2">
          <button onClick={() => setModalType("feed")} className="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
          <button onClick={() => setModalType("sleep")} className="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
          <button onClick={() => setModalType("diaper")} className="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm"><span className="text-3xl">👶</span><span className="text-sm mt-1">Diaper</span></button>
          <Link href="/medical" className="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
        </div>
      </div>

      <div className="px-4">
        <div className="flex justify-between items-center mb-3">
          <h2 className="font-semibold ml-1">Ask AI</h2>
          <Link href="/ai" className="text-rose-500 text-sm">View all chats →</Link>
        </div>
        <div className="p-4 bg-white rounded-2xl shadow-md">
          <div className="flex gap-2 mb-3">
            <input type="text" value={aiInput} onChange={e => setAiInput(e.target.value)} onKeyDown={e => e.key === "Enter" && handleAiChat()} placeholder="Ask anything..." className="flex-1 p-2 border rounded-xl text-sm" disabled={aiLoading} />
            <button onClick={() => handleAiChat()} disabled={aiLoading || !aiInput.trim()} className="px-4 bg-rose-400 text-white rounded-xl text-sm">{aiLoading ? "..." : "Ask"}</button>
          </div>
          <div className="flex flex-wrap gap-2">
            {QUICK_QUESTIONS.map((q, i) => <button key={i} onClick={() => handleAiChat(q)} className="px-3 py-1 bg-rose-50 text-rose-600 rounded-full text-sm">{q}</button>)}
          </div>
        </div>
      </div>

      <div className="px-4 mt-4">
        <h2 className="font-semibold mb-3 ml-1">Recent Activity</h2>
        <div className="space-y-2">
          {lastLogs.length === 0 ? <p className="text-gray-400 text-sm">No logs yet today</p> : lastLogs.filter(Boolean).map((log: any, i: number) => (
            <div key={i} className="flex items-center justify-between p-3 bg-white rounded-xl">
              <div className="flex items-center gap-3">
                <span className="text-xl">{log.type === "feed" && "🍼"}{log.type === "sleep" && "😴"}{log.type === "diaper" && "👶"}</span>
                <div><div className="font-medium capitalize">{log.type}</div><div className="text-xs text-gray-500">{new Date(log.logged_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</div></div>
              </div>
              {log.amount_ml && <span className="text-sm text-gray-500">{log.amount_ml}ml</span>}
            </div>
          ))}
        </div>
      </div>

      <LogModal type={modalType} childId={childId} onClose={() => setModalType(null)} />

      {aiOpen && aiChats.length > 0 && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setAiOpen(false)}>
          <div className="bg-white dark:bg-gray-800 rounded-2xl p-4 w-full max-w-sm mx-4 max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
            <div className="flex justify-between items-center mb-3"><h2 className="font-bold">Ask AI</h2><button onClick={() => setAiOpen(false)}>✕</button></div>
            <div className="flex-1 overflow-y-auto space-y-3 mb-3 min-h-[250px]">
              {aiChats.map((chat) => (<div key={chat.id} className={`max-w-[85%] p-3 rounded-xl text-sm ${chat.role === "user" ? "ml-auto bg-rose-400 text-white" : "bg-rose-50 dark:bg-gray-700"}`}>{chat.content}</div>))}
              {aiLoading && <div className="bg-rose-50 dark:bg-gray-700 p-3 rounded-xl text-sm animate-pulse">Thinking...</div>}
            </div>
            <div className="flex gap-2">
              <input type="text" value={aiInput} onChange={e => setAiInput(e.target.value)} onKeyDown={e => e.key === "Enter" && handleAiChat()} placeholder="Ask a question..." className="flex-1 p-2 border rounded-xl text-sm" disabled={aiLoading} />
              <button onClick={() => handleAiChat()} disabled={aiLoading || !aiInput.trim()} className="px-3 bg-rose-400 text-white rounded-xl">➤</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}