"use client";

import { useState, useEffect } from "react";

// Only 3 main agents show as dots
const MAIN_AGENTS = [
  { id: "horus", name: "Horus", icon: "👁️", color: "#3b82f6" },
  { id: "cleopatra", name: "Cleopatra", icon: "👸", color: "#a855f7" },
  { id: "amun", name: "Amun", icon: "👑", color: "#f59e0b" },
];

// All agents for tag detection
const ALL_AGENTS = [
  ...MAIN_AGENTS,
  { id: "anubis", name: "Anubis", icon: "🐕", color: "#22c55e" },
  { id: "thoth", name: "Thoth", icon: "📚", color: "#06b6d4" },
  { id: "ptah", name: "Ptah", icon: "🎨", color: "#f97316" },
  { id: "seshat", name: "Seshat", icon: "📝", color: "#ec4899" },
  { id: "hathor", name: "Hathor", icon: "💕", color: "#ef4444" },
  { id: "sekhmet", name: "Sekhmet", icon: "⚔️", color: "#94a3b8" },
  { id: "maat", name: "Maat", icon: "⚖️", color: "#64748b" },
];

const INACTIVE_COLOR = "#4b5563";

interface DayEntry {
  agent: string;
  agentIcon: string;
  agentColor: string;
  time: string;
  content: string;
  tags: string[];
  isMainAgent: boolean;
}

interface MemoryDay {
  date: string;
  entries: DayEntry[];
  hasBriefs: { morning: boolean; eod: boolean };
}

interface CalendarDay {
  date: string;
  day: number;
  isCurrentMonth: boolean;
  isToday: boolean;
  activeMainAgents: string[];
  entries: DayEntry[];
  hasBriefs: { morning: boolean; eod: boolean };
}

export default function MemoryPage() {
  const [memoryDays, setMemoryDays] = useState<MemoryDay[]>([]);
  const [selectedDay, setSelectedDay] = useState<MemoryDay | null>(null);
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [loading, setLoading] = useState(true);
  const [filterAgent, setFilterAgent] = useState<string | null>(null);
  const [filterTag, setFilterTag] = useState<string | null>(null);
  const [allTags, setAllTags] = useState<string[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [editingEntry, setEditingEntry] = useState<DayEntry | null>(null);
  const [editTags, setEditTags] = useState<string>("");

  useEffect(() => {
    fetchMemory();
  }, []);

  const fetchMemory = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/memory/list", {
        headers: { 'Authorization': 'Bearer horus-mc-secret-2026' }
      });
      const data = await res.json();
      setMemoryDays(data.days || []);
      setAllTags(data.allTags || []);
    } catch (e) {
      console.error("Failed to fetch memory:", e);
    }
    setLoading(false);
  };

  const getAgentInfo = (agentName: string) => {
    const lower = agentName.toLowerCase();
    const agent = ALL_AGENTS.find(a => lower.includes(a.id) || lower.includes(a.name.toLowerCase()));
    return agent || { name: agentName, icon: "🤖", color: INACTIVE_COLOR };
  };

  const isMainAgent = (agentName: string) => {
    const lower = agentName.toLowerCase();
    return MAIN_AGENTS.some(a => lower.includes(a.id) || lower.includes(a.name.toLowerCase()));
  };

  const getCalendarDays = (): CalendarDay[] => {
    const year = currentMonth.getFullYear();
    const month = currentMonth.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startPad = firstDay.getDay();
    const days: CalendarDay[] = [];
    const today = new Date().toISOString().split("T")[0];

    const monthDays = memoryDays.filter((d) => d.date.startsWith(`${year}-${String(month + 1).padStart(2, "0")}`));

    for (let i = startPad - 1; i >= 0; i--) {
      const d = new Date(year, month, -i);
      days.push({
        date: d.toISOString().split("T")[0],
        day: d.getDate(),
        isCurrentMonth: false,
        isToday: false,
        activeMainAgents: [],
        entries: [],
        hasBriefs: { morning: false, eod: false },
      });
    }

    for (let i = 1; i <= lastDay.getDate(); i++) {
      const date = `${year}-${String(month + 1).padStart(2, "0")}-${String(i).padStart(2, "0")}`;
      const memDay = monthDays.find((d) => d.date === date);
      const mainAgents = memDay?.entries
        .filter((e) => e.isMainAgent)
        .map((e) => e.agent.toLowerCase()) || [];
      days.push({
        date,
        day: i,
        isCurrentMonth: true,
        isToday: date === today,
        activeMainAgents: [...new Set(mainAgents)],
        entries: memDay?.entries || [],
        hasBriefs: memDay?.hasBriefs || { morning: false, eod: false },
      });
    }

    const remaining = 42 - days.length;
    for (let i = 1; i <= remaining; i++) {
      const d = new Date(year, month + 1, i);
      days.push({
        date: d.toISOString().split("T")[0],
        day: d.getDate(),
        isCurrentMonth: false,
        isToday: false,
        activeMainAgents: [],
        entries: [],
        hasBriefs: { morning: false, eod: false },
      });
    }

    return days;
  };

  const getFilteredEntries = () => {
    if (!selectedDay) return [];
    let entries = selectedDay.entries;

    if (filterAgent) {
      entries = entries.filter((e) => e.agent.toLowerCase() === filterAgent.toLowerCase());
    }
    if (filterTag) {
      entries = entries.filter((e) => e.tags.includes(filterTag));
    }
    if (searchQuery) {
      entries = entries.filter((e) =>
        e.content.toLowerCase().includes(searchQuery.toLowerCase())
      );
    }
    return entries;
  };

  const calendarDays = getCalendarDays();
  const filteredEntries = getFilteredEntries();

  const getMainAgentDots = (activeMainAgents: string[]) => {
    return MAIN_AGENTS.map((agent) => ({
      agent,
      active: activeMainAgents.some((a) => a.includes(agent.id) || a.includes(agent.name.toLowerCase())),
    }));
  };

  const handleEditTags = (entry: DayEntry) => {
    setEditingEntry(entry);
    setEditTags(entry.tags.join(", "));
  };

  const saveTags = async () => {
    if (!editingEntry || !selectedDay) return;
    
    // In a real app, this would POST to an API to update the file
    // For now, just update the local state
    const newTags = editTags.split(",").map((t) => t.trim().replace(/^#/, "")).filter(Boolean);
    
    setSelectedDay({
      ...selectedDay,
      entries: selectedDay.entries.map((e) =>
        e === editingEntry ? { ...e, tags: newTags } : e
      ),
    });
    
    setEditingEntry(null);
    setEditTags("");
    
    // TODO: POST to /api/memory/tags to save
  };

  return (
    <div className="min-h-screen bg-slate-950 flex">
      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <div className="bg-slate-900 border-b border-slate-800 px-6 py-4 flex-shrink-0">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-white">📅 Memory Calendar</h1>
              <p className="text-slate-400 text-sm">Our unified memory system</p>
            </div>
            <button
              onClick={fetchMemory}
              className="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded"
            >
              ↻ Refresh
            </button>
          </div>
        </div>

        {/* Calendar */}
        <div className="flex-1 overflow-auto p-6">
          {/* Month Navigation */}
          <div className="flex items-center justify-between mb-4">
            <button
              onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1))}
              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded"
            >
              ←
            </button>
            <h2 className="text-xl font-bold text-white">
              {currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" })}
            </h2>
            <button
              onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1))}
              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded"
            >
              →
            </button>
          </div>

          {/* Day Headers */}
          <div className="grid grid-cols-7 gap-1 mb-1">
            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => (
              <div key={d} className="text-center text-slate-500 text-sm py-2">
                {d}
              </div>
            ))}
          </div>

          {/* Calendar Grid */}
          <div className="grid grid-cols-7 gap-1">
            {calendarDays.map((day, idx) => {
              const dots = getMainAgentDots(day.activeMainAgents);
              const isSelected = selectedDay?.date === day.date;
              const hasEntries = day.entries.length > 0;

              return (
                <button
                  key={idx}
                  onClick={() => setSelectedDay(day)}
                  className={`
                    relative p-2 min-h-[80px] rounded-lg border transition-all
                    ${day.isCurrentMonth ? "bg-slate-800/50 border-slate-700 hover:bg-slate-800" : "bg-slate-900/30 border-slate-800 opacity-50"}
                    ${day.isToday ? "border-amber-500" : ""}
                    ${isSelected ? "border-brand-pink bg-slate-800" : ""}
                  `}
                >
                  <span className={`text-sm ${day.isCurrentMonth ? "text-white" : "text-slate-600"} ${day.isToday ? "font-bold text-amber-400" : ""}`}>
                    {day.day}
                  </span>

                  {/* Briefs Indicators */}
                  <div className="flex gap-1 mt-1">
                    {day.hasBriefs.morning && <span className="text-xs">☀️</span>}
                    {day.hasBriefs.eod && <span className="text-xs">🌙</span>}
                  </div>

                  {/* Main Agent Dots (only 3) */}
                  <div className="flex gap-1 mt-1 justify-center">
                    {dots.map(({ agent, active }) => (
                      <span
                        key={agent.id}
                        className="w-3 h-3 rounded-full"
                        style={{ backgroundColor: active ? agent.color : INACTIVE_COLOR }}
                        title={`${agent.name}: ${active ? "Active" : "Inactive"}`}
                      />
                    ))}
                  </div>

                  {/* Tag indicator if has entries */}
                  {hasEntries && !day.activeMainAgents.length && (
                    <div className="flex gap-1 mt-1 justify-center">
                      <span className="text-xs bg-slate-600 text-white px-1 rounded">📝</span>
                    </div>
                  )}
                </button>
              );
            })}
          </div>

          {/* Legend */}
          <div className="mt-4 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
            <h3 className="text-white font-medium mb-2">Dots = Active Agents</h3>
            <div className="flex flex-wrap gap-4">
              {MAIN_AGENTS.map((agent) => (
                <div key={agent.id} className="flex items-center gap-1">
                  <span className="w-3 h-3 rounded-full" style={{ backgroundColor: agent.color }} />
                  <span className="text-slate-400 text-xs">{agent.icon} {agent.name}</span>
                </div>
              ))}
              <div className="flex items-center gap-1">
                <span className="w-3 h-3 rounded-full" style={{ backgroundColor: INACTIVE_COLOR }} />
                <span className="text-slate-400 text-xs">Inactive</span>
              </div>
              <div className="flex items-center gap-1">
                <span className="text-slate-400 text-xs">📝 = Has entries (other agents)</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Right Sidebar - Day Detail */}
      <div className="w-[28rem] bg-slate-900 border-l border-slate-800 flex flex-col overflow-hidden">
        {selectedDay ? (
          <>
            {/* Day Header */}
            <div className="p-4 border-b border-slate-800 flex-shrink-0">
              <h2 className="text-xl font-bold text-white">
                {new Date(selectedDay.date).toLocaleDateString("en-US", {
                  weekday: "long",
                  month: "long",
                  day: "numeric",
                })}
              </h2>
              <div className="flex gap-2 mt-2">
                {selectedDay.hasBriefs.morning && (
                  <a
                    href={`/api/briefs/morning/${selectedDay.date}`}
                    target="_blank"
                    className="text-xs bg-amber-500/20 text-amber-400 px-2 py-1 rounded hover:bg-amber-500/30"
                  >
                    ☀️ Morning Brief
                  </a>
                )}
                {selectedDay.hasBriefs.eod && (
                  <a
                    href={`/api/briefs/eod/${selectedDay.date}`}
                    target="_blank"
                    className="text-xs bg-purple-500/20 text-purple-400 px-2 py-1 rounded hover:bg-purple-500/30"
                  >
                    🌙 EOD Brief
                  </a>
                )}
              </div>
            </div>

            {/* Filters */}
            <div className="p-4 border-b border-slate-800 flex-shrink-0">
              <input
                type="text"
                placeholder="Search entries..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white text-sm placeholder-slate-500"
              />
              <div className="flex gap-2 mt-2 flex-wrap">
                <button
                  onClick={() => setFilterAgent(null)}
                  className={`px-2 py-1 text-xs rounded ${!filterAgent ? "bg-brand-pink text-white" : "bg-slate-800 text-slate-400"}`}
                >
                  All
                </button>
                {MAIN_AGENTS.map((agent) => (
                  <button
                    key={agent.id}
                    onClick={() => setFilterAgent(filterAgent === agent.name ? null : agent.name)}
                    className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${
                      filterAgent === agent.name ? "bg-brand-pink text-white" : "bg-slate-800 text-slate-400"
                    }`}
                  >
                    <span className="w-2 h-2 rounded-full" style={{ backgroundColor: agent.color }} />
                    {agent.icon}
                  </button>
                ))}
              </div>
              {allTags.length > 0 && (
                <div className="flex gap-1 mt-2 flex-wrap">
                  {allTags.slice(0, 8).map((tag) => (
                    <button
                      key={tag}
                      onClick={() => setFilterTag(filterTag === tag ? null : tag)}
                      className={`px-2 py-0.5 text-xs rounded ${
                        filterTag === tag ? "bg-amber-500 text-black" : "bg-slate-700 text-slate-400 hover:bg-slate-600"
                      }`}
                    >
                      #{tag}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Entries */}
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              {loading ? (
                <div className="text-slate-500 text-center">Loading...</div>
              ) : filteredEntries.length === 0 ? (
                <div className="text-slate-500 text-center">No entries for this day</div>
              ) : (
                filteredEntries.map((entry, idx) => (
                  <div key={idx} className="bg-slate-800/50 rounded-lg p-3 border border-slate-700">
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-2">
                        <span
                          className="w-6 h-6 rounded-full flex items-center justify-center text-sm"
                          style={{ backgroundColor: entry.agentColor + "33" }}
                        >
                          {entry.agentIcon}
                        </span>
                        <span className="text-white font-medium text-sm">{entry.agent}</span>
                        <span className="text-slate-500 text-xs">{entry.time}</span>
                      </div>
                      <button
                        onClick={() => handleEditTags(entry)}
                        className="text-slate-500 hover:text-white text-xs"
                        title="Edit tags"
                      >
                        🏷️
                      </button>
                    </div>
                    
                    <pre className="text-slate-300 text-xs whitespace-pre-wrap font-mono">
                      {entry.content.length > 250
                        ? entry.content.slice(0, 250) + "..."
                        : entry.content}
                    </pre>
                    
                    {/* Tags */}
                    <div className="flex gap-1 mt-2 flex-wrap">
                      {entry.tags.map((tag) => (
                        <span key={tag} className="px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs rounded">
                          #{tag}
                        </span>
                      ))}
                    </div>
                  </div>
                ))
              )}
            </div>
          </>
        ) : (
          <div className="flex-1 flex items-center justify-center">
            <div className="text-center">
              <div className="text-5xl mb-4">📅</div>
              <p className="text-slate-500">Select a day to view entries</p>
            </div>
          </div>
        )}

        {/* Who's Active */}
        <div className="p-4 border-t border-slate-800 flex-shrink-0">
          <h3 className="text-slate-400 text-xs uppercase mb-2">Today</h3>
          <div className="flex gap-2">
            {MAIN_AGENTS.map((agent) => {
              const isActive = memoryDays[0]?.entries.some((e) =>
                e.agent.toLowerCase().includes(agent.id)
              );
              return (
                <div key={agent.id} className="flex items-center gap-1">
                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: isActive ? agent.color : INACTIVE_COLOR }} />
                  <span className="text-slate-400 text-xs">{agent.icon}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Edit Tags Modal */}
      {editingEntry && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
          <div className="bg-slate-800 rounded-xl p-6 w-96 border border-slate-600">
            <h3 className="text-white font-bold mb-4">Edit Tags</h3>
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">{editingEntry.agentIcon}</span>
              <span className="text-white">{editingEntry.agent}</span>
            </div>
            <input
              type="text"
              value={editTags}
              onChange={(e) => setEditTags(e.target.value)}
              placeholder="tag1, tag2, tag3"
              className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded text-white text-sm placeholder-slate-400 mb-4"
            />
            <div className="flex gap-2 justify-end">
              <button
                onClick={() => setEditingEntry(null)}
                className="px-4 py-2 bg-slate-700 text-white rounded hover:bg-slate-600"
              >
                Cancel
              </button>
              <button
                onClick={saveTags}
                className="px-4 py-2 bg-brand-pink text-white rounded hover:bg-[#ff7bc0]"
              >
                Save
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}