"use client";

import React from "react";
import { motion } from "framer-motion";
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  IconButton,
  Paper,
  Stack,
  TextField,
  Tooltip,
  Typography,
  alpha,
  useTheme,
} from "@mui/material";
import CheckRounded from "@mui/icons-material/CheckRounded";
import CloseRounded from "@mui/icons-material/CloseRounded";
import EditRounded from "@mui/icons-material/EditRounded";
import EditNoteRounded from "@mui/icons-material/EditNoteRounded";
import DeleteOutlineRounded from "@mui/icons-material/DeleteOutlineRounded";
import ChatBubbleOutlineRounded from "@mui/icons-material/ChatBubbleOutlineRounded";
import SearchRounded from "@mui/icons-material/SearchRounded";
import WarningRounded from "@mui/icons-material/WarningRounded";
import type { ChatSessionSummary } from "./GlobalChatbox.types";

type AgentHistoryPanelProps = {
  sessions: ChatSessionSummary[];
  activeSessionId?: string;
  isHydrating?: boolean;
  onNewSession: () => void;
  onRenameSession: (sessionId: string, title: string) => void;
  onSelectSession: (sessionId: string) => void;
  onDeleteSession: (sessionId: string) => void;
};

const formatRelativeDate = (timestamp: number) => {
  const date = new Date(timestamp);
  const now = new Date();
  const isSameDay = date.toDateString() === now.toDateString();
  if (isSameDay) {
    return date.toLocaleTimeString("zh-CN", {
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  return date.toLocaleDateString("zh-CN", {
    month: "numeric",
    day: "numeric",
  });
};

const getDayStart = (date: Date) =>
  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();

const getSessionGroupLabel = (timestamp: number) => {
  const now = new Date();
  const todayStart = getDayStart(now);
  const yesterdayStart = todayStart - 24 * 60 * 60 * 1000;
  const lastWeekStart = todayStart - 7 * 24 * 60 * 60 * 1000;

  if (timestamp >= todayStart) return "今天";
  if (timestamp >= yesterdayStart) return "昨天";
  if (timestamp >= lastWeekStart) return "过去 7 天";
  return "更早";
};

export const AgentHistoryPanel = ({
  sessions,
  activeSessionId,
  isHydrating = false,
  onNewSession,
  onRenameSession,
  onSelectSession,
  onDeleteSession,
}: AgentHistoryPanelProps) => {
  const theme = useTheme();
  const [keyword, setKeyword] = React.useState("");
  const [editingSessionId, setEditingSessionId] = React.useState<string | null>(null);
  const [draftTitle, setDraftTitle] = React.useState("");
  const [pendingDeleteSessionId, setPendingDeleteSessionId] = React.useState<string | null>(null);

  const filteredSessions = React.useMemo(() => {
    const normalizedKeyword = keyword.trim().toLowerCase();
    if (!normalizedKeyword) return sessions;
    return sessions.filter((session) => session.title.toLowerCase().includes(normalizedKeyword));
  }, [keyword, sessions]);

  const sortedFilteredSessions = React.useMemo(
    () =>
      [...filteredSessions].sort((left, right) => {
        const createdAtDiff = right.createdAt - left.createdAt;
        if (createdAtDiff !== 0) return createdAtDiff;

        const updatedAtDiff = right.updatedAt - left.updatedAt;
        if (updatedAtDiff !== 0) return updatedAtDiff;

        return right.id.localeCompare(left.id);
      }),
    [filteredSessions],
  );

  const groupedSessions = React.useMemo(() => {
    const groups = new Map<string, ChatSessionSummary[]>();

    sortedFilteredSessions.forEach((session) => {
      const label = getSessionGroupLabel(session.createdAt);
      const existing = groups.get(label);
      if (existing) {
        existing.push(session);
      } else {
        groups.set(label, [session]);
      }
    });

    return Array.from(groups.entries());
  }, [sortedFilteredSessions]);

  const pendingDeleteSession = filteredSessions.find(
    (session) => session.id === pendingDeleteSessionId,
  );

  const handleStartRename = (sessionId: string, title: string) => {
    setEditingSessionId(sessionId);
    setDraftTitle(title);
  };

  const handleCancelRename = () => {
    setEditingSessionId(null);
    setDraftTitle("");
  };

  const handleConfirmRename = (sessionId: string) => {
    const normalizedTitle = draftTitle.trim();
    if (!normalizedTitle) return;
    onRenameSession(sessionId, normalizedTitle);
    handleCancelRename();
  };

  return (
    <>
      <Paper
        elevation={0}
        sx={{
          width: 268,
          minWidth: 268,
          height: "100%",
          display: "flex",
          flexDirection: "column",
          bgcolor: alpha("#ffffff", 0.54),
          borderRight: `1px solid ${alpha("#fff", 0.75)}`,
          backdropFilter: "blur(28px)",
          boxShadow: `inset -1px 0 0 ${alpha("#fff", 0.35)}`,
        }}
      >
        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.5 }}>
          <Box>
            <Typography variant="subtitle2" fontWeight={800} color="text.primary">
              历史会话
            </Typography>
          </Box>
          <Tooltip title="新建对话">
            <motion.div whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.92 }} style={{ display: "flex" }}>
              <IconButton
                disabled={isHydrating}
                onClick={onNewSession}
                aria-label="新建对话"
                sx={{
                  width: 36,
                  height: 36,
                  color: "text.primary",
                  bgcolor: alpha("#fff", 0.65),
                  border: `1px solid ${alpha("#fff", 0.5)}`,
                  boxShadow: `0 2px 8px ${alpha("#000", 0.02)}`,
                  "&:hover": {
                    bgcolor: "#fff",
                    color: "#00acc1",
                    borderColor: alpha("#fff", 0.9),
                    boxShadow: `0 4px 12px ${alpha("#000", 0.05)}`,
                  },
                }}
              >
                <EditNoteRounded sx={{ fontSize: 22 }} />
              </IconButton>
            </motion.div>
          </Tooltip>
        </Stack>

        <Box sx={{ px: 1.5, pb: 1.5 }}>
          <TextField
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
            placeholder="搜索历史会话"
            size="small"
            fullWidth
            disabled={isHydrating}
            InputProps={{
              startAdornment: <SearchRounded sx={{ fontSize: 16, color: "text.secondary", mr: 0.75 }} />,
              sx: {
                borderRadius: 3,
                bgcolor: alpha("#fff", 0.62),
                fontSize: "0.85rem",
              },
            }}
          />
        </Box>

        <Divider sx={{ borderColor: alpha("#fff", 0.6) }} />

        <Box sx={{ flex: 1, overflowY: "auto", px: 1.25, py: 1.25 }}>
          {sessions.length === 0 ? (
            <Stack
              alignItems="center"
              justifyContent="center"
              spacing={1}
              sx={{
                height: "100%",
                textAlign: "center",
                color: "text.secondary",
                px: 2,
              }}
            >
              <ChatBubbleOutlineRounded sx={{ fontSize: 24, opacity: 0.7 }} />
              <Typography variant="body2" fontWeight={700}>
                暂无历史会话
              </Typography>
              <Typography variant="caption">
                新建对话后会自动出现在这里
              </Typography>
            </Stack>
          ) : filteredSessions.length === 0 ? (
            <Stack
              alignItems="center"
              justifyContent="center"
              spacing={1}
              sx={{
                height: "100%",
                textAlign: "center",
                color: "text.secondary",
                px: 2,
              }}
            >
              <SearchRounded sx={{ fontSize: 24, opacity: 0.7 }} />
              <Typography variant="body2" fontWeight={700}>
                未找到匹配会话
              </Typography>
              <Typography variant="caption">
                试试其他关键词
              </Typography>
            </Stack>
          ) : (
            <Stack spacing={1.5}>
              {groupedSessions.map(([groupLabel, groupSessions]) => (
                <Box key={groupLabel}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    fontWeight={800}
                    sx={{ px: 0.5, mb: 0.75, display: "block", letterSpacing: 0.3 }}
                  >
                    {groupLabel}
                  </Typography>

                  <Stack spacing={1}>
                    {groupSessions.map((session) => {
                      const isActive = session.id === activeSessionId;

                      return (
                        <Paper
                          key={session.id}
                          elevation={0}
                          onClick={() => {
                            if (editingSessionId === session.id) return;
                            onSelectSession(session.id);
                          }}
                          sx={{
                            px: 1.25,
                            py: 1,
                            borderRadius: 3,
                            cursor: isHydrating ? "default" : "pointer",
                            bgcolor: isActive ? alpha("#00acc1", 0.12) : alpha("#fff", 0.56),
                            border: `1px solid ${isActive ? alpha("#00acc1", 0.25) : alpha("#fff", 0.72)}`,
                            boxShadow: isActive ? `0 8px 20px ${alpha("#00acc1", 0.12)}` : `0 4px 12px ${alpha("#000", 0.03)}`,
                            transition: "all 0.2s ease",
                            pointerEvents: isHydrating ? "none" : "auto",
                            "&:hover": {
                              bgcolor: isActive ? alpha("#00acc1", 0.14) : alpha("#fff", 0.86),
                              borderColor: alpha("#00acc1", 0.2),
                            },
                          }}
                        >
                          <Stack direction="row" spacing={1} alignItems="center">
                            <Box sx={{ flex: 1, minWidth: 0 }}>
                              {editingSessionId === session.id ? (
                                <Stack direction="row" spacing={0.5} alignItems="center" sx={{ minHeight: 46 }}>
                                  <TextField
                                    value={draftTitle}
                                    onChange={(event) => setDraftTitle(event.target.value)}
                                    size="small"
                                    autoFocus
                                    placeholder="请输入会话标题"
                                    onClick={(event) => event.stopPropagation()}
                                    onKeyDown={(event) => {
                                      if (event.key === "Enter") {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        handleConfirmRename(session.id);
                                      } else if (event.key === "Escape") {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        handleCancelRename();
                                      }
                                    }}
                                    sx={{
                                      flex: 1,
                                      minWidth: 0,
                                      "& .MuiOutlinedInput-root": {
                                        height: 32,
                                        bgcolor: alpha("#fff", 0.75),
                                        borderRadius: 1.5,
                                        transition: "all 0.2s ease-in-out",
                                        "& fieldset": {
                                          borderColor: alpha("#000", 0.08),
                                        },
                                        "&:hover fieldset": {
                                          borderColor: alpha(theme.palette.primary.main, 0.4),
                                        },
                                        "&.Mui-focused fieldset": {
                                          borderColor: theme.palette.primary.main,
                                          borderWidth: "1.5px",
                                          boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.1)}`,
                                        },
                                      },
                                      "& .MuiInputBase-input": {
                                        padding: "4px 10px",
                                        fontSize: "0.85rem",
                                        fontWeight: 700,
                                        color: theme.palette.text.primary,
                                      }
                                    }}
                                  />
                                  <IconButton
                                    size="small"
                                    aria-label="确认"
                                    onClick={(event) => {
                                      event.stopPropagation();
                                      handleConfirmRename(session.id);
                                    }}
                                    disabled={!draftTitle.trim()}
                                    sx={{
                                      width: 28,
                                      height: 28,
                                      color: "success.main",
                                      bgcolor: alpha(theme.palette.success.main, 0.1),
                                      "&:hover": { bgcolor: alpha(theme.palette.success.main, 0.2) },
                                    }}
                                  >
                                    <CheckRounded sx={{ fontSize: 16 }} />
                                  </IconButton>
                                  <IconButton
                                    size="small"
                                    aria-label="取消"
                                    onClick={(event) => {
                                      event.stopPropagation();
                                      handleCancelRename();
                                    }}
                                    sx={{
                                      width: 28,
                                      height: 28,
                                      color: "text.secondary",
                                      bgcolor: alpha("#000", 0.05),
                                      "&:hover": { bgcolor: alpha("#000", 0.1) },
                                    }}
                                  >
                                    <CloseRounded sx={{ fontSize: 16 }} />
                                  </IconButton>
                                </Stack>
                              ) : pendingDeleteSessionId === session.id ? (
                                <Stack direction="row" spacing={0.75} alignItems="center" sx={{ minHeight: 46 }}>
                                  <Box
                                    sx={{
                                      display: "flex",
                                      alignItems: "center",
                                      justifyContent: "center",
                                      width: 20,
                                      height: 20,
                                      borderRadius: "50%",
                                      bgcolor: alpha("#ef5350", 0.15),
                                      color: "#ef5350",
                                      flexShrink: 0
                                    }}
                                  >
                                    <WarningRounded sx={{ fontSize: 13 }} />
                                  </Box>
                                  <Typography
                                    variant="body2"
                                    fontWeight={800}
                                    color="error.main"
                                    sx={{
                                      flex: 1,
                                      minWidth: 0,
                                      overflow: "hidden",
                                      textOverflow: "ellipsis",
                                      whiteSpace: "nowrap",
                                    }}
                                  >
                                    确认删除此会话？
                                  </Typography>
                                </Stack>
                              ) : (
                                <Box sx={{ minHeight: 46, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                                  <Typography
                                    variant="body2"
                                    fontWeight={isActive ? 800 : 700}
                                    color="text.primary"
                                    sx={{
                                      overflow: "hidden",
                                      textOverflow: "ellipsis",
                                      display: "-webkit-box",
                                      WebkitLineClamp: 2,
                                      WebkitBoxOrient: "vertical",
                                    }}
                                  >
                                    {session.title}
                                  </Typography>
                                  <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: "block" }}>
                                    {formatRelativeDate(session.createdAt)}
                                  </Typography>
                                </Box>
                              )}
                            </Box>

                            {!(editingSessionId === session.id || pendingDeleteSessionId === session.id) && (
                              <Stack direction="row" spacing={0.25}>
                                <Tooltip title="修改会话标题">
                                <span>
                                  <IconButton
                                    size="small"
                                    aria-label="修改会话标题"
                                    onClick={(event) => {
                                      event.stopPropagation();
                                      handleStartRename(session.id, session.title);
                                    }}
                                    disabled={isHydrating || editingSessionId === session.id}
                                    sx={{
                                      width: 28,
                                      height: 28,
                                      color: "text.secondary",
                                      "&:hover": {
                                        color: "primary.main",
                                        bgcolor: alpha("#00acc1", 0.08),
                                      },
                                    }}
                                  >
                                    <EditRounded sx={{ fontSize: 16 }} />
                                  </IconButton>
                                </span>
                              </Tooltip>
                              <Tooltip title="删除会话">
                                <span>
                                  <IconButton
                                    size="small"
                                    aria-label="删除会话"
                                    onClick={(event) => {
                                      event.stopPropagation();
                                      setPendingDeleteSessionId(session.id);
                                    }}
                                    disabled={isHydrating}
                                    sx={{
                                      width: 28,
                                      height: 28,
                                      color: "text.secondary",
                                      "&:hover": {
                                        color: "error.main",
                                        bgcolor: alpha("#ef5350", 0.08),
                                      },
                                    }}
                                  >
                                    <DeleteOutlineRounded sx={{ fontSize: 16 }} />
                                  </IconButton>
                                </span>
                              </Tooltip>
                            </Stack>
                            )}

                            {pendingDeleteSessionId === session.id && (
                              <Stack direction="row" spacing={0.5} alignItems="center">
                                <IconButton
                                  size="small"
                                  aria-label="确认删除"
                                  onClick={(event) => {
                                    event.stopPropagation();
                                    onDeleteSession(session.id);
                                    setPendingDeleteSessionId(null);
                                  }}
                                  sx={{
                                    width: 28,
                                    height: 28,
                                    color: "error.main",
                                    bgcolor: alpha("#ef5350", 0.1),
                                    "&:hover": { bgcolor: alpha("#ef5350", 0.2) },
                                  }}
                                >
                                  <CheckRounded sx={{ fontSize: 16 }} />
                                </IconButton>
                                <IconButton
                                  size="small"
                                  aria-label="取消删除"
                                  onClick={(event) => {
                                    event.stopPropagation();
                                    setPendingDeleteSessionId(null);
                                  }}
                                  sx={{
                                    width: 28,
                                    height: 28,
                                    color: "text.secondary",
                                    bgcolor: alpha("#000", 0.05),
                                    "&:hover": { bgcolor: alpha("#000", 0.1) },
                                  }}
                                >
                                  <CloseRounded sx={{ fontSize: 16 }} />
                                </IconButton>
                              </Stack>
                            )}

                          </Stack>
                        </Paper>
                      );
                    })}
                  </Stack>
                </Box>
              ))}
            </Stack>
          )}
        </Box>
      </Paper>
    </>
  );
};