import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
import { useAuth } from '../lib/auth-context'
import { p, MyButton, ProfileImage } from 'web-components'
import { AppLayout } from '../components/AppLayout'
import {
  Package,
  MapPin,
  Ticket,
  MessageSquare,
  User,
  Info,
  FileText,
  LogOut,
  ShoppingCart,
} from 'lucide-react'

export const Route = createFileRoute('/me')({ component: MePage })

function MePage() {
  const navigate = useNavigate()
  const location = useLocation()
  const { user, logout } = useAuth()

  // Check if we're on the exact /me path (not a child route like /me/orders)
  const isExactMePath = location.pathname === '/me'

  if (!user) {
    return (
      <AppLayout>
      <div className="flex flex-col items-center gap-4 py-20">
        <p>Please sign in</p>
        <MyButton
          textContent="Sign In"
          onClick={() => navigate({ to: '/login' })}
        />
      </div>
      </AppLayout>
    )
  }

  const menuItems = [
    {
      section: 'Shopping & Activity',
      items: [
        { icon: Package, label: 'My Orders', to: '/me/orders' },
        { icon: ShoppingCart, label: 'My Cart', to: '/cart' },
        { icon: Ticket, label: 'Coupons', to: '/me/coupons' },
      ],
    },
    {
      section: 'Saved Information',
      items: [
        { icon: MapPin, label: 'Addresses', to: '/me/addresses' },
        { icon: User, label: 'Profile Settings', to: '/me/edit-profile' },
      ],
    },
    {
      section: 'Support',
      items: [
        { icon: MessageSquare, label: 'Help & Complaints', to: '/me/complaints' },
        { icon: FileText, label: 'Terms & Conditions', to: '/me/terms' },
      ],
    },
    {
      section: 'About',
      items: [
        { icon: Info, label: 'About Us', to: '/me/about' },
      ],
    },
  ]

  return (
    <AppLayout>
      {isExactMePath ? (
        <div className="p-4">
          {/* Profile Header */}
          <div className="mb-6 flex items-center gap-4 rounded-xl bg-brand-50 p-4">
            <ProfileImage uri={user.profileImage} size={64} />
            <div>
              <p className="text-lg font-bold">
                {user.name || 'User'}
              </p>
              <p className="text-sm text-gray-500">{user.mobile}</p>
            </div>
          </div>

          {/* Menu */}
          {menuItems.map((section) => (
            <div key={section.section} className="mb-6">
              <p className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
                {section.section}
              </p>
              <div className="rounded-xl border border-gray-100 bg-white shadow-sm">
                {section.items.map((item) => (
                  <div
                    key={item.label}
                    onClick={() => navigate({ to: item.to as any })}
                    className="flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0"
                  >
                    <item.icon className="h-5 w-5 text-gray-400" />
                    <p className="flex-1 text-left text-sm">{item.label}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Logout */}
          <MyButton
            fullWidth
            onClick={logout}
            variant="red"
            className="mb-8"
            textContent="Logout"
          />

          <p className="mb-8 text-center text-xs text-gray-400">
            Version 1.0.0
          </p>
        </div>
      ) : (
        /* Render child routes when not on exact /me path */
        <Outlet />
      )}
    </AppLayout>
  )
}
