import { Button, Dropdown, Layout, Space, Typography } from 'antd'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import { UserOutlined } from '@ant-design/icons'

import { BrandLogo } from '@/components/BrandLogo'
import { useSessionStore } from '@/stores/session'

const { Header, Content, Footer } = Layout

export function StorefrontLayout() {
  const navigate = useNavigate()
  const user = useSessionStore(state => state.user)
  const logout = useSessionStore(state => state.logout)

  return (
    <Layout className="site-shell">
      <Header className="site-header">
        <div className="site-header__inner">
          <Link to="/" className="site-brand" aria-label="解忧商行首页">
            <BrandLogo height={42} />
          </Link>

          <nav className="site-nav" aria-label="主导航">
            <Link to="/">首页</Link>
            <a href="#listings">商品</a>
            <a href="#process">流程</a>
            <a href="#rules">规则</a>
          </nav>

          <Space size={12}>
            {user ? (
              <Dropdown
                menu={{
                  items: [
                    { key: 'phone', label: `已登录：${user.phone}`, disabled: true },
                    {
                      key: 'logout',
                      label: '退出登录',
                      onClick: async () => {
                        await logout()
                        navigate('/')
                      },
                    },
                  ],
                }}
              >
                <Button icon={<UserOutlined />}>{user.nickname || '我的商行'}</Button>
              </Dropdown>
            ) : (
              <Button type="primary" onClick={() => navigate('/login')}>
                登录 / 注册
              </Button>
            )}
          </Space>
        </div>
      </Header>

      <Content className="site-content">
        <Outlet />
      </Content>

      <Footer className="site-footer">
        <div className="site-footer__inner">
          <div>
            <Typography.Text strong>解忧商行</Typography.Text>
            <Typography.Text type="secondary"> · JIEYOU TRADING HOUSE</Typography.Text>
            <div className="site-footer__muted">租得明白，还得安心。</div>
          </div>
          <div className="site-footer__muted">
            © 2026 解忧商行 · 备案信息与客服信息待配置
          </div>
        </div>
      </Footer>
    </Layout>
  )
}