"use client";

import { useEffect, useState, useCallback } from "react";
import { useAuth, type AuthUser } from "@/lib/auth-context";

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";

interface MemoryItem {
  id: string;
  memory: string;
  created_at?: string;
  updated_at?: string;
}

interface GroupedMemories {
  label: string;
  items: MemoryItem[];
}

function groupByTime(memories: MemoryItem[]): GroupedMemories[] {
  const now = new Date();
  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const weekAgo = new Date(todayStart.getTime() - 7 * 24 * 60 * 60 * 1000);

  const today: MemoryItem[] = [];
  const week: MemoryItem[] = [];
  const older: MemoryItem[] = [];

  for (const m of memories) {
    const d = m.created_at ? new Date(m.created_at) : null;
    if (!d || isNaN(d.getTime())) {
      older.push(m);
    } else if (d >= todayStart) {
      today.push(m);
    } else if (d >= weekAgo) {
      week.push(m);
    } else {
      older.push(m);
    }
  }

  const groups: GroupedMemories[] = [];
  if (today.length > 0) groups.push({ label: "今天", items: today });
  if (week.length > 0) groups.push({ label: "最近 7 天", items: week });
  if (older.length > 0) groups.push({ label: "更早", items: older });
  return groups;
}

function formatDate(dateStr?: string): string {
  if (!dateStr) return "";
  const d = new Date(dateStr);
  if (isNaN(d.getTime())) return "";
  const now = new Date();
  const isThisYear = d.getFullYear() === now.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  const hour = String(d.getHours()).padStart(2, "0");
  const min = String(d.getMinutes()).padStart(2, "0");
  if (isThisYear) return `${month}-${day} ${hour}:${min}`;
  return `${d.getFullYear()}-${month}-${day} ${hour}:${min}`;
}

export function ProfileModal({ onClose }: { onClose: () => void }) {
  const { user, token } = useAuth();
  const [memories, setMemories] = useState<MemoryItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchMemories = useCallback(async () => {
    if (!token) return;
    setLoading(true);
    setError(null);
    try {
      const resp = await fetch(`${API_URL}/api/memory/list`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const data = await resp.json();
      setMemories(data.memories || []);
      if (data.error) setError(data.error);
    } catch (e) {
      setError(e instanceof Error ? e.message : "加载记忆失败");
    } finally {
      setLoading(false);
    }
  }, [token]);

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

  useEffect(() => {
    function handleKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
    }
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [onClose]);

  if (!user) return null;

  const groups = groupByTime(memories);

  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center"
      onClick={onClose}
    >
      {/* 遮罩层 */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />

      {/* 弹窗主体 */}
      <div
        className="relative w-[90vw] max-w-[560px] max-h-[80vh] rounded-2xl glass-panel
                    shadow-[0_0_40px_rgba(77,184,164,0.1)] border-[var(--border-glow)]
                    flex flex-col overflow-hidden"
        style={{ animation: "slideUp 200ms ease-out" }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* 关闭按钮 */}
        <button
          onClick={onClose}
          className="absolute top-3 right-3 p-1.5 rounded-lg text-[var(--text-secondary)]
                     hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]
                     transition-colors cursor-pointer z-10"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>

        {/* 用户信息区 */}
        <div className="px-6 pt-6 pb-4 flex items-center gap-4 flex-shrink-0">
          <div className="w-14 h-14 rounded-full bg-[var(--accent)]/15 border-2 border-[var(--accent)]/40
                          flex items-center justify-center text-[var(--accent)] text-xl font-bold
                          shadow-[0_0_20px_rgba(77,184,164,0.12)]">
            {(user.display_name || user.username).charAt(0).toUpperCase()}
          </div>
          <div className="flex-1 min-w-0">
            <h2 className="text-lg font-semibold text-[var(--text-primary)] truncate">
              {user.display_name || user.username}
            </h2>
            <div className="flex items-center gap-2 mt-0.5">
              <span className="text-sm text-[var(--text-secondary)]">@{user.username}</span>
              {user.is_admin && (
                <span className="text-xs px-1.5 py-0.5 rounded-md bg-[var(--accent)]/10
                               text-[var(--accent)] border border-[var(--accent)]/30">
                  管理员
                </span>
              )}
            </div>
          </div>
        </div>

        {/* 分割线 */}
        <div className="mx-6 h-px bg-[var(--border)]" />

        {/* 记忆区标题 */}
        <div className="px-6 pt-4 pb-2 flex items-center gap-2 flex-shrink-0">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
            <path d="M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 01-2 2h-4a2 2 0 01-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z" />
            <path d="M10 21h4" />
          </svg>
          <span className="text-sm font-medium text-[var(--text-primary)]">记忆系统</span>
          {!loading && (
            <span className="text-xs text-[var(--text-secondary)]">
              {memories.length} 条记录
            </span>
          )}
        </div>

        {/* 记忆列表 */}
        <div className="flex-1 overflow-y-auto px-6 pb-6 min-h-0">
          {loading && (
            <div className="flex items-center justify-center py-12">
              <div className="w-5 h-5 border-2 border-[var(--accent)]/30 border-t-[var(--accent)]
                              rounded-full animate-spin" />
              <span className="ml-3 text-sm text-[var(--text-secondary)]">加载中...</span>
            </div>
          )}

          {!loading && error && memories.length === 0 && (
            <div className="text-center py-12">
              <p className="text-sm text-[var(--hot)]">{error}</p>
            </div>
          )}

          {!loading && !error && memories.length === 0 && (
            <div className="text-center py-12">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)"
                   strokeWidth="1.5" className="mx-auto mb-3 opacity-50">
                <path d="M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 01-2 2h-4a2 2 0 01-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z" />
                <path d="M10 21h4" />
              </svg>
              <p className="text-sm text-[var(--text-secondary)]">暂无记忆记录</p>
              <p className="text-xs text-[var(--text-secondary)] mt-1 opacity-60">
                与助手对话时，系统会自动记录关键信息
              </p>
            </div>
          )}

          {!loading && groups.map((group) => (
            <div key={group.label} className="mb-4 last:mb-0">
              <div className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider mb-2">
                {group.label}
              </div>
              <div className="space-y-1.5">
                {group.items.map((item) => (
                  <div
                    key={item.id}
                    className="px-3 py-2.5 rounded-lg bg-[var(--bg-tertiary)]/50
                               border border-[var(--border)] hover:border-[var(--border-glow)]
                               transition-colors group"
                  >
                    <p className="text-sm text-[var(--text-primary)] leading-relaxed">
                      {item.memory}
                    </p>
                    {item.created_at && (
                      <p className="text-xs text-[var(--text-secondary)] mt-1 opacity-0
                                    group-hover:opacity-60 transition-opacity">
                        {formatDate(item.created_at)}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}