import { ExclamationCircleOutlined } from '@ant-design/icons'
import { loggerService } from '@logger'
import { DeleteIcon, EditIcon, LoadingIcon, RefreshIcon } from '@renderer/components/Icons'
import { HStack } from '@renderer/components/Layout'
import Scrollbar from '@renderer/components/Scrollbar'
import TextBadge from '@renderer/components/TextBadge'
import { useTheme } from '@renderer/context/ThemeProvider'
import { useModel } from '@renderer/hooks/useModel'
import MemoryService from '@renderer/services/MemoryService'
import {
  selectCurrentUserId,
  selectGlobalMemoryEnabled,
  selectMemoryConfig,
  setCurrentUserId,
  setGlobalMemoryEnabled
} from '@renderer/store/memory'
import type { MemoryItem } from '@types'
import { Button, Dropdown, Empty, Flex, Form, Input, Modal, Space, Spin, Switch } from 'antd'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { Brain, Calendar, MenuIcon, PlusIcon, Settings2, UserRound, UserRoundMinus, UserRoundPlus } from 'lucide-react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import styled from 'styled-components'

import {
  SettingContainer,
  SettingDivider,
  SettingGroup,
  SettingHelpText,
  SettingRow,
  SettingRowTitle,
  SettingTitle
} from '../index'
import { DEFAULT_USER_ID } from './constants'
import MemorySettingsModal from './MemorySettingsModal'
import UserSelector from './UserSelector'

const logger = loggerService.withContext('MemorySettings')

dayjs.extend(relativeTime)

const { TextArea } = Input

interface AddMemoryModalProps {
  visible: boolean
  onCancel: () => void
  onAdd: (memory: string) => Promise<void>
}

interface EditMemoryModalProps {
  visible: boolean
  memory: MemoryItem | null
  onCancel: () => void
  onUpdate: (id: string, memory: string, metadata?: Record<string, any>) => Promise<void>
}

interface AddUserModalProps {
  visible: boolean
  onCancel: () => void
  onAdd: (userId: string) => void
  existingUsers: string[]
}

const AddMemoryModal: React.FC<AddMemoryModalProps> = ({ visible, onCancel, onAdd }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const { t } = useTranslation()

  const handleSubmit = async (values: { memory: string }) => {
    setLoading(true)
    try {
      await onAdd(values.memory)
      form.resetFields()
      onCancel()
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      width={600}
      centered
      transitionName="animation-move-down"
      onOk={() => form.submit()}
      okButtonProps={{ loading: loading }}
      title={
        <Flex align="center" gap={8}>
          <PlusIcon size={16} color="var(--color-primary)" />
          <span>{t('memory.add_memory')}</span>
        </Flex>
      }
      styles={{
        header: {
          borderBottom: '0.5px solid var(--color-border)',
          paddingBottom: 16,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0
        },
        body: {
          paddingTop: 20
        }
      }}>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item name="memory" rules={[{ required: true, message: t('memory.please_enter_memory') }]}>
          <TextArea
            rows={5}
            placeholder={t('memory.memory_placeholder')}
            style={{ fontSize: '15px', lineHeight: '1.6' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
}

const EditMemoryModal: React.FC<EditMemoryModalProps> = ({ visible, memory, onCancel, onUpdate }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const { t } = useTranslation()

  useEffect(() => {
    if (memory && visible) {
      form.setFieldsValue({
        memory: memory.memory
      })
    }
  }, [memory, visible, form])

  const handleSubmit = async (values: { memory: string }) => {
    if (!memory) return

    setLoading(true)
    try {
      await onUpdate(memory.id, values.memory)
      form.resetFields()
      onCancel()
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal
      title={
        <Flex align="center" gap={8}>
          <EditIcon size={16} color="var(--color-primary)" />
          <span>{t('memory.edit_memory')}</span>
        </Flex>
      }
      open={visible}
      onCancel={onCancel}
      width={600}
      centered
      transitionName="animation-move-down"
      okButtonProps={{ loading: loading, title: t('common.save'), onClick: () => form.submit() }}
      styles={{
        header: {
          borderBottom: '0.5px solid var(--color-border)',
          paddingBottom: 16,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0
        }
      }}>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          label={t('memory.memory_content')}
          name="memory"
          rules={[{ required: true, message: t('memory.please_enter_memory') }]}>
          <TextArea
            rows={5}
            placeholder={t('memory.memory_placeholder')}
            style={{ fontSize: '15px', lineHeight: '1.6' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
}

const AddUserModal: React.FC<AddUserModalProps> = ({ visible, onCancel, onAdd, existingUsers }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const { t } = useTranslation()

  const handleSubmit = async (values: { userId: string }) => {
    setLoading(true)
    try {
      onAdd(values.userId.trim())
      form.resetFields()
      onCancel()
    } finally {
      setLoading(false)
    }
  }

  const validateUserId = (_: any, value: string) => {
    if (!value || !value.trim()) {
      return Promise.reject(new Error(t('memory.user_id_required')))
    }
    const trimmedValue = value.trim()
    if (trimmedValue === DEFAULT_USER_ID) {
      return Promise.reject(new Error(t('memory.user_id_reserved')))
    }
    if (existingUsers.includes(trimmedValue)) {
      return Promise.reject(new Error(t('memory.user_id_exists')))
    }
    if (trimmedValue.length > 50) {
      return Promise.reject(new Error(t('memory.user_id_too_long')))
    }
    if (!/^[a-zA-Z0-9_-]+$/.test(trimmedValue)) {
      return Promise.reject(new Error(t('memory.user_id_invalid_chars')))
    }
    return Promise.resolve()
  }

  return (
    <Modal
      open={visible}
      onCancel={onCancel}
      width={500}
      centered
      transitionName="animation-move-down"
      onOk={() => form.submit()}
      okButtonProps={{ loading: loading }}
      styles={{
        header: {
          borderBottom: '0.5px solid var(--color-border)',
          paddingBottom: 16,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0
        },
        body: {
          paddingTop: 24
        }
      }}
      title={
        <Flex align="center" gap={8}>
          <UserRoundPlus size={16} color="var(--color-primary)" />
          <span>{t('memory.add_user')}</span>
        </Flex>
      }>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item label={t('memory.new_user_id')} name="userId" rules={[{ validator: validateUserId }]}>
          <Input
            placeholder={t('memory.new_user_id_placeholder')}
            maxLength={50}
            size="large"
            prefix={<UserRound size={16} />}
          />
        </Form.Item>
        <div
          style={{
            marginBottom: 16,
            fontSize: '13px',
            color: 'var(--color-text-secondary)',
            background: 'var(--color-background-soft)',
            padding: '12px',
            borderRadius: '8px',
            border: '1px solid var(--color-border)'
          }}>
          {t('memory.user_id_rules')}
        </div>
      </Form>
    </Modal>
  )
}

const MemorySettings = () => {
  const { t } = useTranslation()
  const dispatch = useDispatch()
  const currentUser = useSelector(selectCurrentUserId)
  const globalMemoryEnabled = useSelector(selectGlobalMemoryEnabled)

  const [allMemories, setAllMemories] = useState<MemoryItem[]>([])
  const [loading, setLoading] = useState(false)
  const [searchText, setSearchText] = useState('')
  const [debouncedSearchText, setDebouncedSearchText] = useState('')
  const [settingsModalVisible, setSettingsModalVisible] = useState(false)
  const [addMemoryModalVisible, setAddMemoryModalVisible] = useState(false)
  const [editingMemory, setEditingMemory] = useState<MemoryItem | null>(null)
  const [addUserModalVisible, setAddUserModalVisible] = useState(false)
  const [form] = Form.useForm()
  const [uniqueUsers, setUniqueUsers] = useState<string[]>([])
  const [displayCount, setDisplayCount] = useState(50)
  const loadMoreRef = useRef<HTMLDivElement>(null)
  const memoryService = MemoryService.getInstance()

  // Utility functions
  const getUserDisplayName = (user: string) => {
    return user === DEFAULT_USER_ID ? t('memory.default_user') : user
  }

  // Load unique users from database
  const loadUniqueUsers = useCallback(async () => {
    try {
      const usersList = await memoryService.getUsersList()
      const users = usersList.map((user) => user.userId)
      setUniqueUsers(users)
    } catch (error) {
      logger.error('Failed to load users list:', error as Error)
    }
  }, [memoryService])

  // Load memories function
  const loadMemories = useCallback(
    async (userId?: string) => {
      const targetUser = userId || currentUser
      logger.debug(`Loading all memories for user: ${targetUser}`)
      setLoading(true)
      try {
        // First, ensure the memory service is using the correct user
        memoryService.setCurrentUser(targetUser)

        // Load unique users efficiently from database
        await loadUniqueUsers()

        // Get all memories for current user context (load up to 10000)
        const result = await memoryService.list({ limit: 10000, offset: 0 })
        logger.verbose(`Loaded memories for user: ${targetUser}, count: ${result.results?.length || 0}`)
        setAllMemories(result.results || [])
      } catch (error) {
        logger.error('Failed to load memories:', error as Error)
        window.toast.error(t('memory.load_failed'))
      } finally {
        setLoading(false)
      }
    },
    [currentUser, memoryService, t, loadUniqueUsers]
  )

  // Sync memoryService with Redux store on mount and when currentUser changes
  useEffect(() => {
    logger.verbose(`useEffect triggered for currentUser: ${currentUser}`)
    // Reset display count when user changes
    setDisplayCount(50)
    void loadMemories(currentUser)
  }, [currentUser, loadMemories])

  // Debounce search text
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearchText(searchText)
    }, 300)

    return () => clearTimeout(timer)
  }, [searchText])

  // Filter memories based on search criteria with debounced search
  const filteredMemories = useMemo(() => {
    return allMemories.filter((memory) => {
      // Search text filter
      return !(debouncedSearchText && !memory.memory.toLowerCase().includes(debouncedSearchText.toLowerCase()))
    })
  }, [allMemories, debouncedSearchText])

  // Calculate displayed memories based on displayCount
  const displayedMemories = filteredMemories.slice(0, displayCount)
  const hasMore = displayCount < filteredMemories.length

  const handleSearch = (value: string) => {
    setSearchText(value)
    // Reset display count when searching
    setDisplayCount(50)
  }

  // Reset display count when debounced search changes
  useEffect(() => {
    setDisplayCount(50)
  }, [debouncedSearchText])

  // Infinite scroll using IntersectionObserver
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasMore && !loading) {
          setDisplayCount((prev) => prev + 50)
        }
      },
      { threshold: 0.1 }
    )

    const currentRef = loadMoreRef.current
    if (currentRef) {
      observer.observe(currentRef)
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [hasMore, loading])

  const handleAddMemory = async (memory: string) => {
    try {
      // The memory service will automatically use the current user from its state
      await memoryService.add(memory, {})
      window.toast.success(t('memory.add_success'))
      // Reset display count to see the newly added memory at the top
      setDisplayCount(50)
      await loadMemories(currentUser)
    } catch (error) {
      logger.error('Failed to add memory:', error as Error)
      window.toast.error(t('memory.add_failed'))
    }
  }

  const handleDeleteMemory = async (id: string) => {
    try {
      await memoryService.delete(id)
      window.toast.success(t('memory.delete_success'))
      // Reload all memories
      await loadMemories(currentUser)
    } catch (error) {
      logger.error('Failed to delete memory:', error as Error)
      window.toast.error(t('memory.delete_failed'))
    }
  }

  const handleEditMemory = (memory: MemoryItem) => {
    setEditingMemory(memory)
  }

  const handleUpdateMemory = async (id: string, memory: string, metadata?: Record<string, any>) => {
    try {
      await memoryService.update(id, memory, metadata)
      window.toast.success(t('memory.update_success'))
      setEditingMemory(null)
      // Reload all memories
      await loadMemories(currentUser)
    } catch (error) {
      logger.error('Failed to update memory:', error as Error)
      window.toast.error(t('memory.update_failed'))
    }
  }

  const handleUserSwitch = async (userId: string) => {
    logger.verbose(`Switching to user: ${userId}`)

    // First update Redux state
    dispatch(setCurrentUserId(userId))

    // Clear current memories to show loading state immediately
    setAllMemories([])

    // Reset display count
    setDisplayCount(50)

    try {
      // Explicitly load memories for the new user
      await loadMemories(userId)

      window.toast.success(
        t('memory.user_switched', { user: userId === DEFAULT_USER_ID ? t('memory.default_user') : userId })
      )
    } catch (error) {
      logger.error('Failed to switch user:', error as Error)
      window.toast.error(t('memory.user_switch_failed'))
    }
  }

  const handleAddUser = async (userId: string) => {
    try {
      // Create the user by adding an initial memory with the userId
      // This implicitly creates the user in the system
      memoryService.setCurrentUser(userId)
      await memoryService.add(t('memory.initial_memory_content'), { userId })

      // Refresh the users list from the database to persist the new user
      await loadUniqueUsers()

      // Switch to the newly created user
      await handleUserSwitch(userId)
      window.toast.success(t('memory.user_created', { user: userId }))
      setAddUserModalVisible(false)
    } catch (error) {
      logger.error('Failed to add user:', error as Error)
      window.toast.error(t('memory.add_user_failed'))
    }
  }

  const handleSettingsSubmit = async () => {
    setSettingsModalVisible(false)
    await memoryService.updateConfig()
    if (window.keyv.get('memory.wait.settings')) {
      window.keyv.remove('memory.wait.settings')
      dispatch(setGlobalMemoryEnabled(true))
    }
  }

  const handleSettingsCancel = () => {
    setSettingsModalVisible(false)
    form.resetFields()
    window.keyv.remove('memory.wait.settings')
  }

  const handleResetMemories = async (userId: string) => {
    window.modal.confirm({
      centered: true,
      title: t('memory.reset_memories_confirm_title'),
      content: t('memory.reset_memories_confirm_content', { user: getUserDisplayName(userId) }),
      icon: <ExclamationCircleOutlined />,
      okText: t('common.confirm'),
      cancelText: t('common.cancel'),
      okType: 'danger',
      onOk: async () => {
        try {
          await memoryService.deleteAllMemoriesForUser(userId)
          window.toast.success(t('memory.memories_reset_success', { user: getUserDisplayName(userId) }))

          // Reload memories to show the empty state
          await loadMemories(currentUser)
        } catch (error) {
          logger.error('Failed to reset memories:', error as Error)
          window.toast.error(t('memory.reset_memories_failed'))
        }
      }
    })
  }

  const handleDeleteUser = async (userId: string) => {
    if (userId === DEFAULT_USER_ID) {
      window.toast.error(t('memory.cannot_delete_default_user'))
      return
    }

    window.modal.confirm({
      centered: true,
      title: t('memory.delete_user_confirm_title'),
      content: t('memory.delete_user_confirm_content', { user: userId }),
      icon: <ExclamationCircleOutlined />,
      okType: 'danger',
      onOk: async () => {
        try {
          await memoryService.deleteUser(userId)
          window.toast.success(t('memory.user_deleted', { user: userId }))

          // Refresh the users list from database after deletion
          await loadUniqueUsers()

          // Switch to default user if current user was deleted
          if (currentUser === userId) {
            await handleUserSwitch(DEFAULT_USER_ID)
          } else {
            await loadMemories(currentUser)
          }
        } catch (error) {
          logger.error('Failed to delete user:', error as Error)
          window.toast.error(t('memory.delete_user_failed'))
        }
      }
    })
  }

  const memoryConfig = useSelector(selectMemoryConfig)
  const embeddingModel = useModel(memoryConfig.embeddingModel?.id, memoryConfig.embeddingModel?.provider)

  const handleGlobalMemoryToggle = async (enabled: boolean) => {
    if (enabled && !embeddingModel) {
      window.keyv.set('memory.wait.settings', true)
      return setSettingsModalVisible(true)
    }

    dispatch(setGlobalMemoryEnabled(enabled))

    if (enabled) {
      return window.modal.confirm({
        centered: true,
        title: t('memory.global_memory_enabled'),
        content: t('memory.global_memory_description'),
        okText: t('common.i_know'),
        cancelButtonProps: {
          style: {
            display: 'none'
          }
        }
      })
    }

    window.toast.success(t('memory.global_memory_disabled_title'))
  }

  const { theme } = useTheme()

  return (
    <SettingContainer theme={theme}>
      {/* Memory Settings */}
      <SettingGroup style={{ justifyContent: 'space-between', alignItems: 'center' }} theme={theme}>
        <HStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
          <HStack style={{ alignItems: 'center', gap: '2px' }}>
            <SettingRowTitle>{t('memory.global_memory')}</SettingRowTitle>
            <TextBadge text="Beta" />
          </HStack>
          <HStack style={{ alignItems: 'center', gap: 10 }}>
            <Switch checked={globalMemoryEnabled} onChange={handleGlobalMemoryToggle} />
            <Button type="text" icon={<Settings2 size={16} />} onClick={() => setSettingsModalVisible(true)} />
          </HStack>
        </HStack>
      </SettingGroup>

      {/* User Management */}
      <SettingGroup theme={theme}>
        <SettingRow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
            <SettingRowTitle>{t('memory.user_management')}</SettingRowTitle>
            <SettingHelpText style={{ fontSize: '13px', lineHeight: '1.5', color: 'var(--color-text-secondary)' }}>
              {allMemories.length} {t('memory.total_memories')}
            </SettingHelpText>
          </div>
          <UserSelector
            currentUser={currentUser}
            uniqueUsers={uniqueUsers}
            onUserSwitch={handleUserSwitch}
            onAddUser={() => setAddUserModalVisible(true)}
          />
        </SettingRow>
      </SettingGroup>

      {/* Memory List */}
      <SettingGroup theme={theme} style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <SettingTitle>{t('memory.title')}</SettingTitle>
          <Space>
            <Input.Search
              placeholder={t('memory.search_placeholder')}
              value={searchText}
              onChange={(e) => handleSearch(e.target.value)}
              allowClear
              style={{ width: 240 }}
            />
            <Button type="primary" icon={<PlusIcon size={18} />} onClick={() => setAddMemoryModalVisible(true)}>
              {t('memory.add_memory')}
            </Button>
            <Dropdown
              menu={{
                items: [
                  {
                    key: 'refresh',
                    label: t('common.refresh'),
                    icon: <RefreshIcon size={14} />,
                    onClick: () => loadMemories(currentUser)
                  },
                  {
                    key: 'divider-reset',
                    type: 'divider' as const
                  },
                  {
                    key: 'reset',
                    label: t('memory.reset_memories'),
                    icon: <DeleteIcon size={14} className="lucide-custom" />,
                    danger: true,
                    onClick: () => handleResetMemories(currentUser)
                  },
                  ...(currentUser !== DEFAULT_USER_ID
                    ? [
                        {
                          key: 'divider-1',
                          type: 'divider' as const
                        },
                        {
                          key: 'deleteUser',
                          label: t('memory.delete_user'),
                          icon: <UserRoundMinus size={14} className="lucide-custom" />,
                          danger: true,
                          onClick: () => handleDeleteUser(currentUser)
                        }
                      ]
                    : [])
                ]
              }}
              trigger={['click']}
              placement="bottomRight">
              <Button icon={<MenuIcon size={16} />}>{t('common.more')}</Button>
            </Dropdown>
          </Space>
        </div>

        <SettingDivider style={{ marginBottom: 15 }} />

        {/* Memory Content Area */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {allMemories.length === 0 && !loading ? (
            <Empty
              image={<Brain size={48} style={{ opacity: 0.3 }} />}
              description={
                <div>
                  <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>{t('memory.no_memories')}</div>
                  <div style={{ color: 'var(--color-text-secondary)', marginBottom: 16 }}>
                    {t('memory.no_memories_description')}
                  </div>
                  <Button
                    type="primary"
                    icon={<PlusIcon size={18} />}
                    onClick={() => setAddMemoryModalVisible(true)}
                    size="large">
                    {t('memory.add_first_memory')}
                  </Button>
                </div>
              }
            />
          ) : (
            <>
              {loading && (
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
                  <Spin indicator={<LoadingIcon color="var(--color-text-2)" />} />
                </div>
              )}

              {!loading && filteredMemories.length === 0 && allMemories.length > 0 && (
                <Empty description={t('memory.no_matching_memories')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}

              {!loading && filteredMemories.length > 0 && (
                <MemoryListContainer>
                  {displayedMemories.map((memory) => (
                    <MemoryItem key={memory.id}>
                      <div className="memory-header">
                        <div className="memory-meta">
                          <Calendar size={14} style={{ marginRight: 4 }} />
                          <span>{memory.createdAt ? dayjs(memory.createdAt).fromNow() : '-'}</span>
                        </div>
                        <Space size="small" className="memory-actions">
                          <Button
                            type="text"
                            size="small"
                            icon={<EditIcon size={14} />}
                            onClick={() => handleEditMemory(memory)}
                          />
                          <Button
                            type="text"
                            size="small"
                            danger
                            icon={<DeleteIcon size={14} className="lucide-custom" />}
                            onClick={() => {
                              window.modal.confirm({
                                centered: true,
                                title: t('memory.delete_confirm'),
                                content: t('memory.delete_confirm_single'),
                                onOk: () => handleDeleteMemory(memory.id),
                                okText: t('common.confirm'),
                                cancelText: t('common.cancel')
                              })
                            }}
                          />
                        </Space>
                      </div>
                      <div className="memory-content">{memory.memory}</div>
                    </MemoryItem>
                  ))}
                  {hasMore && (
                    <LoadMoreTrigger ref={loadMoreRef}>
                      <Spin indicator={<LoadingIcon color="var(--color-text-2)" />} size="small" />
                    </LoadMoreTrigger>
                  )}
                </MemoryListContainer>
              )}
            </>
          )}
        </div>
      </SettingGroup>

      {/* Modals */}
      <AddMemoryModal
        visible={addMemoryModalVisible}
        onCancel={() => setAddMemoryModalVisible(false)}
        onAdd={handleAddMemory}
      />

      <EditMemoryModal
        visible={!!editingMemory}
        memory={editingMemory}
        onCancel={() => setEditingMemory(null)}
        onUpdate={handleUpdateMemory}
      />

      <AddUserModal
        visible={addUserModalVisible}
        onCancel={() => setAddUserModalVisible(false)}
        onAdd={handleAddUser}
        existingUsers={[...uniqueUsers, DEFAULT_USER_ID]}
      />

      <MemorySettingsModal
        visible={settingsModalVisible}
        onSubmit={async () => await handleSettingsSubmit()}
        onCancel={handleSettingsCancel}
        form={form}
      />
    </SettingContainer>
  )
}

// Styled Components
const MemoryListContainer = styled(Scrollbar)`
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  overflow-y: auto;
`

const LoadMoreTrigger = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
`

const MemoryItem = styled.div`
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: all 0.2s ease;

  .memory-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  &:hover {
    border-color: var(--color-primary);
    background: var(--color-background);

    .memory-actions {
      opacity: 1;
    }
  }

  .memory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .memory-meta {
    display: flex;
    align-items: center;
    color: var(--color-text-tertiary);
    font-size: 12px;
  }

  .memory-content {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
  }
`

export default MemorySettings
