"use client"

import { useEffect, useState } from 'react'
import Link from '../LocalizedLink'
import { ChevronLeft, ChevronRight, Globe, X } from 'lucide-react'
import type { MegaMenuPayload, MenuColumn, MenuLink } from './menuTypes'
import { getLocalizedMenuText } from './menuTypes'

type MenuNode =
  | { type: 'root'; data: MegaMenuPayload[]; title: string | Record<string, string> }
  | { type: 'mega'; data: MenuColumn[]; title: string | Record<string, string> }
  | { type: 'links'; data: MenuLink[]; title: string | Record<string, string> }

interface MobileDrawerProps {
  isOpen: boolean
  items: MegaMenuPayload[]
  lang: string
  customerName?: string | null
  onClose: () => void
  onOpenLang: () => void
  onLogin: () => void
  onLogout: () => void
}

export function MobileDrawer({
  isOpen,
  items,
  lang,
  customerName,
  onClose,
  onOpenLang,
  onLogin,
  onLogout,
}: MobileDrawerProps) {
  const [stack, setStack] = useState<MenuNode[]>([{ type: 'root', data: items, title: 'Menu' }])

  useEffect(() => {
    if (!isOpen) {
      const timer = setTimeout(() => {
        setStack([{ type: 'root', data: items, title: 'Menu' }])
      }, 300)
      return () => clearTimeout(timer)
    }

    const timer = setTimeout(() => {
      setStack((current) => {
        if (current.length === 1 && current[0].data !== items) {
          return [{ type: 'root', data: items, title: 'Menu' }]
        }
        return current
      })
    }, 0)

    return () => clearTimeout(timer)
  }, [isOpen, items])

  const pushView = (node: MenuNode) => setStack((prev) => [...prev, node])
  const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev))

  const linkClass = 'ui-menu-link py-4'
  const nestedLinkClass = 'ui-menu-link-compact py-2'

  const renderView = (view: MenuNode) => {
    if (view.type === 'root') {
      return (
        <div className="space-y-1 px-6 py-2">
          {view.data.map((item, index) => (
            <div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-text-main/10 last:border-0">
              {item.columns?.length ? (
                <button
                  onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })}
                  className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary"
                >
                  <span>{getLocalizedMenuText(item.label, lang)}</span>
                  <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
                </button>
              ) : (
                <Link href={item.url || '#'} onClick={onClose} className={linkClass}>
                  {getLocalizedMenuText(item.label, lang)}
                </Link>
              )}
            </div>
          ))}
          {customerName && (
            <div className="border-b border-text-main/10">
              <Link href="/profile" onClick={onClose} className={linkClass}>
                My Profile
              </Link>
            </div>
          )}
        </div>
      )
    }

    if (view.type === 'mega') {
      return (
        <div className="px-6 py-4">
          {view.data.map((column, columnIndex) => (
            <div key={columnIndex} className="mb-8 last:mb-0">
              <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/45">
                {getLocalizedMenuText(column.title, lang)}
              </h4>
              <div className="space-y-2">
                {column.links.map((link, linkIndex) => (
                  <div key={linkIndex}>
                    {link.links?.length ? (
                      <button
                        onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
                        className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
                      >
                        <span>{getLocalizedMenuText(link.label, lang)}</span>
                        <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
                      </button>
                    ) : (
                      <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
                        {getLocalizedMenuText(link.label, lang)}
                      </Link>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )
    }

    return (
      <div className="space-y-2 px-6 py-4">
        {view.data.map((link, linkIndex) => (
          <div key={linkIndex}>
            {link.links?.length ? (
              <button
                onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
                className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
              >
                <span>{getLocalizedMenuText(link.label, lang)}</span>
                <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
              </button>
            ) : (
              <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
                {getLocalizedMenuText(link.label, lang)}
              </Link>
            )}
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
      <div
        className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
        onClick={onClose}
      />
      <div
        className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-surface-card shadow-2xl transition-transform duration-300 ${
          isOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        <div className="z-10 flex shrink-0 items-center justify-between border-b border-text-main/10 bg-surface-card px-6 py-5">
          <span className="text-sm font-bold uppercase tracking-widest text-text-main">Menu</span>
          <div className="flex items-center gap-3">
            <button
              onClick={onOpenLang}
              className="flex shrink-0 items-center gap-1 rounded-md border border-brand-primary/30 bg-surface-page px-2.5 py-1 text-[10px] font-bold uppercase text-brand-primary"
            >
              <Globe className="h-3 w-3" />
              {lang.toUpperCase()}
            </button>
            <button onClick={onClose} className="rounded-full p-1.5 text-text-main/65 transition hover:bg-surface-page hover:text-brand-primary">
              <X className="h-5 w-5" />
            </button>
          </div>
        </div>

        <div className="relative flex-1 overflow-hidden bg-surface-card">
          {stack.map((view, index) => {
            const isCurrent = index === stack.length - 1
            const isPast = index < stack.length - 1

            return (
              <div
                key={index}
                className={`absolute inset-0 flex flex-col bg-surface-card transition-transform duration-300 ease-in-out ${
                  isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full'
                }`}
              >
                {index > 0 && (
                  <button
                    onClick={popView}
                    className="flex shrink-0 items-center border-b border-text-main/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page"
                  >
                    <ChevronLeft className="mr-2 h-4 w-4" />
                    Back to {getLocalizedMenuText(stack[index - 1].title, lang)}
                  </button>
                )}

                {index > 0 && (
                  <div className="shrink-0 px-6 py-5">
                    <h3 className="text-lg font-bold uppercase tracking-widest text-text-main">{getLocalizedMenuText(view.title, lang)}</h3>
                  </div>
                )}

                <div className="flex-1 overflow-y-auto pb-6">{renderView(view)}</div>
              </div>
            )
          })}
        </div>

        <div className="z-10 shrink-0 space-y-3 border-t border-text-main/10 bg-surface-card px-6 pb-8 pt-6">
          <Link
            href="/shop"
            onClick={onClose}
            className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-surface-card shadow-sm transition-colors hover:bg-brand-primary"
          >
            Shop Now
          </Link>
          {customerName ? (
            <button
              onClick={() => {
                onLogout()
                onClose()
              }}
              className="block w-full rounded-xl border border-rose-500/20 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-rose-500 transition-colors hover:bg-rose-50"
            >
              Logout
            </button>
          ) : (
            <button
              onClick={() => {
                onLogin()
                onClose()
              }}
              className="block w-full rounded-xl border border-line-primary/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-line-primary transition-colors hover:bg-line-primary/10"
            >
              Login with LINE
            </button>
          )}
        </div>
      </div>
    </div>
  )
}