'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { Search, Bell, ChevronDown, Store, LogOut, User, Settings, Wifi, Clock,  } from 'lucide-react';
import Icon from '@/components/ui/AppIcon';


const breadcrumbMap: Record<string, string> = {
  '/': 'Dashboard',
  '/dashboard': 'Dashboard',
  '/pos-terminal': 'POS Terminal',
  '/sign-up-login-screen': 'Login',
};

interface TopbarProps {
  sidebarCollapsed?: boolean;
}

export default function Topbar({ sidebarCollapsed }: TopbarProps) {
  const pathname = usePathname();
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const [notifOpen, setNotifOpen] = useState(false);

  const currentPage = breadcrumbMap[pathname] ?? 'CloudCorePOS';

  const notifications = [
    { id: 'notif-001', type: 'warning', message: 'Maize Flour 2kg below reorder level (12 units)', time: '5m ago' },
    { id: 'notif-002', type: 'success', message: 'M-Pesa payment KES 3,450 confirmed — TXN #S-20847', time: '12m ago' },
    { id: 'notif-003', type: 'danger', message: 'Cooking Oil 5L out of stock at Westlands Branch', time: '28m ago' },
    { id: 'notif-004', type: 'info', message: 'Daily sales report ready for Aug 5, 2026', time: '1h ago' },
  ];

  const typeColors: Record<string, string> = {
    warning: 'bg-warning-bg text-warning',
    success: 'bg-success-bg text-success',
    danger: 'bg-danger-bg text-danger',
    info: 'bg-info-bg text-info',
  };

  return (
    <header className="h-16 bg-card border-b border-border flex items-center px-4 gap-4 sticky top-0 z-20">
      {/* Page title */}
      <div className="flex-1 min-w-0">
        <h1 className="text-base font-600 text-foreground truncate">{currentPage}</h1>
        <p className="text-xs text-muted-foreground">Thu, 6 Aug 2026 · Westlands Branch</p>
      </div>

      {/* Search */}
      <div className="hidden md:flex items-center gap-2 bg-muted border border-border rounded-md px-3 h-9 w-56">
        <Search size={14} className="text-muted-foreground flex-shrink-0" />
        <input
          type="text"
          placeholder="Search… (Ctrl+K)"
          className="bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none w-full"
        />
      </div>

      {/* Connection status */}
      <div className="hidden lg:flex items-center gap-1.5 text-xs text-success">
        <Wifi size={14} />
        <span className="font-500">Online</span>
      </div>

      {/* Time */}
      <div className="hidden lg:flex items-center gap-1.5 text-xs text-muted-foreground font-mono">
        <Clock size={13} />
        <span>09:19 AM</span>
      </div>

      {/* Branch selector */}
      <div className="hidden md:flex items-center gap-1.5 bg-primary/5 border border-primary/20 rounded-md px-2.5 h-8 cursor-pointer hover:bg-primary/10 transition-colors">
        <Store size={14} className="text-primary" />
        <span className="text-xs font-600 text-primary">Westlands</span>
        <ChevronDown size={12} className="text-primary" />
      </div>

      {/* Notifications */}
      <div className="relative">
        <button
          onClick={() => { setNotifOpen(!notifOpen); setUserMenuOpen(false); }}
          className="relative p-2 rounded-md hover:bg-muted transition-colors"
        >
          <Bell size={18} className="text-muted-foreground" />
          <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-danger" />
        </button>
        {notifOpen && (
          <div className="absolute right-0 top-full mt-2 w-80 card-elevated rounded-lg shadow-modal z-50 fade-in">
            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
              <span className="text-sm font-600 text-foreground">Notifications</span>
              <span className="badge-danger text-xs px-2 py-0.5 rounded-full font-600">4 new</span>
            </div>
            <ul className="divide-y divide-border max-h-72 overflow-y-auto scrollbar-thin">
              {notifications.map((n) => (
                <li key={n.id} className="px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors">
                  <div className="flex items-start gap-2.5">
                    <span className={`mt-0.5 w-2 h-2 rounded-full flex-shrink-0 ${n.type === 'warning' ? 'bg-warning' : n.type === 'success' ? 'bg-success' : n.type === 'danger' ? 'bg-danger' : 'bg-info'}`} />
                    <div className="flex-1 min-w-0">
                      <p className="text-xs text-foreground leading-snug">{n.message}</p>
                      <p className="text-xs text-muted-foreground mt-0.5">{n.time}</p>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
            <div className="px-4 py-2 border-t border-border">
              <button className="text-xs text-primary font-600 hover:underline">View all notifications</button>
            </div>
          </div>
        )}
      </div>

      {/* User menu */}
      <div className="relative">
        <button
          onClick={() => { setUserMenuOpen(!userMenuOpen); setNotifOpen(false); }}
          className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted transition-colors"
        >
          <div className="w-7 h-7 rounded-full bg-primary flex items-center justify-center">
            <span className="text-xs font-700 text-white">AM</span>
          </div>
          <div className="hidden md:flex flex-col items-start">
            <span className="text-xs font-600 text-foreground leading-tight">Amara Mwangi</span>
            <span className="text-xs text-muted-foreground leading-tight">Manager</span>
          </div>
          <ChevronDown size={12} className="text-muted-foreground hidden md:block" />
        </button>
        {userMenuOpen && (
          <div className="absolute right-0 top-full mt-2 w-48 card-elevated rounded-lg shadow-modal z-50 fade-in overflow-hidden">
            <div className="px-3 py-2.5 border-b border-border">
              <p className="text-xs font-600 text-foreground">Amara Mwangi</p>
              <p className="text-xs text-muted-foreground">amara@cloudcorepos.co.ke</p>
            </div>
            <div className="py-1">
              {[
                { id: 'menu-profile', icon: User, label: 'My Profile' },
                { id: 'menu-settings', icon: Settings, label: 'Settings' },
              ].map((item) => {
                const Icon = item.icon;
                return (
                  <button key={item.id} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-foreground hover:bg-muted transition-colors">
                    <Icon size={14} className="text-muted-foreground" />
                    {item.label}
                  </button>
                );
              })}
            </div>
            <div className="border-t border-border py-1">
              <Link href="/" className="w-full flex items-center gap-2 px-3 py-2 text-xs text-danger hover:bg-danger-bg transition-colors">
                <LogOut size={14} />
                Sign Out
              </Link>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}