"use client"

import { useState } from "react"
import { Menu, Search, Bell, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface MobileHeaderProps {
  onMenuToggle: () => void
  title?: string
}

export default function MobileHeader({ onMenuToggle, title = "数据资产中台" }: MobileHeaderProps) {
  const [showSearch, setShowSearch] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

  return (
    <header className="glass-nav safe-area-top sticky top-0 z-50 mx-2 mt-2 mb-4">
      <div className="flex items-center justify-between px-4 py-3">
        {!showSearch ? (
          <>
            <div className="flex items-center space-x-3">
              <Button variant="ghost" size="icon" onClick={onMenuToggle} className="glass-light rounded-xl">
                <Menu className="h-5 w-5" />
              </Button>
              <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate">
                {title}
              </h1>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setShowSearch(true)}
                className="glass-light rounded-xl"
              >
                <Search className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="glass-light rounded-xl">
                <Bell className="h-5 w-5" />
              </Button>
            </div>
          </>
        ) : (
          <div className="flex items-center space-x-3 w-full">
            <div className="flex-1">
              <Input
                type="text"
                placeholder="搜索用户、标签、活动..."
                className="glass-input border-none focus-visible:ring-0 focus-visible:ring-offset-0"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                autoFocus
              />
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => {
                setShowSearch(false)
                setSearchQuery("")
              }}
              className="glass-light rounded-xl"
            >
              <X className="h-5 w-5" />
            </Button>
          </div>
        )}
      </div>
    </header>
  )
}