titipin/src/components/Header.tsx

'use client'

import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import {
  Menu,
  Calendar,
  Store,
  ClipboardList,
  Package,
  User,
  FileText,
  BarChart2,
  Settings,
} from 'lucide-react'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from 'next/link'
import { format } from 'date-fns'
import { id as idLocale } from 'date-fns/locale'

export function Header({ onMenuClick }: { onMenuClick: () => void }) {
  const pathname = usePathname()
  const [todayStr, setTodayStr] = useState('')

  useEffect(() => {
    setTodayStr(format(new Date(), 'EEEE, dd MMMM yyyy', { locale: idLocale }))
  }, [])

  const getPageInfo = () => {
    switch (pathname) {
      case '/':
        return {
          title: 'Open Order Hari Ini',
          subtitle: 'Daftar pesanan aktif yang siap kamu titip.',
          badge: 'Live PO',
          Icon: Store,
        }
      case '/my-orders':
        return {
          title: 'Jasa Order Saya',
          subtitle: 'Kelola PO yang Anda buka untuk teman-teman.',
          badge: 'Manajemen PO',
          Icon: ClipboardList,
        }
      case '/my-purchases':
        return {
          title: 'Pesanan Saya',
          subtitle: 'Pantau barang yang Anda titip beserta status tagihannya.',
          badge: 'Riwayat Titipan',
          Icon: Package,
        }
      case '/profile':
        return {
          title: 'Pengaturan Profil',
          subtitle: 'Kelola identitas dan preferensi akun Anda.',
          badge: 'Akun',
          Icon: User,
        }
      case '/reports':
        return {
          title: 'Laporan Keuangan',
          subtitle: 'Pantau omzet, pengeluaran, dan hutang piutang Anda.',
          badge: 'Laporan',
          Icon: BarChart2,
        }
      case '/settings/users':
      case '/settings/integrations':
        return {
          title: 'Pengaturan Aplikasi',
          subtitle: 'Konfigurasi integrasi, role, dan sistem.',
          badge: 'Superadmin',
          Icon: Settings,
        }
      default:
        if (pathname.startsWith('/my-orders/')) {
          return {
            title: 'Detail & Rekap Order',
            subtitle: 'Rincian pesanan, tagihan pemesan, dan ringkasan belanja.',
            badge: 'Detail PO',
            Icon: FileText,
          }
        }
        return {
          title: 'TitipIn',
          subtitle: 'Sistem Titip Pesanan Bersama',
          badge: 'App',
          Icon: Store,
        }
    }
  }

  const { title, subtitle, badge, Icon } = getPageInfo()

  return (
    <header className="sticky top-0 z-30 border-b border-slate-200/80 bg-white/90 px-6 py-4 backdrop-blur-md dark:border-slate-800 dark:bg-slate-900/90">
      <div className="flex items-center justify-between gap-4">
        {/* Left: Mobile hamburger & Page Title */}
        <div className="flex items-center gap-3">
          <button
            onClick={onMenuClick}
            className="rounded-xl border border-slate-200 p-2 text-slate-600 transition-colors hover:bg-slate-100 lg:hidden dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800"
          >
            <Menu className="h-5 w-5" />
          </button>

          <div className="flex items-center gap-3 sm:gap-4">
            <div className="hidden h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-blue-100 bg-gradient-to-br from-blue-50 to-[#1B2CC1]/10 shadow-inner sm:flex md:h-12 md:w-12 dark:border-blue-900/50 dark:from-[#1B2CC1]/20 dark:to-[#121E85]/20">
              <Icon
                className="h-5 w-5 text-[#1B2CC1] md:h-6 md:w-6 dark:text-blue-400"
                strokeWidth={2.5}
              />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-black tracking-tight text-slate-900 sm:text-2xl dark:text-white">
                  {title}
                </h1>
                <span className="hidden items-center rounded-full bg-[#1B2CC1]/10 px-2 py-0.5 text-[11px] font-bold text-[#1B2CC1] sm:inline-flex dark:bg-blue-900/40 dark:text-blue-300">
                  {badge}
                </span>
              </div>
              <p className="mt-0.5 hidden text-xs text-slate-500 sm:block dark:text-slate-400">
                {subtitle}
              </p>
            </div>
          </div>
        </div>

        {/* Right: Date info & Quick Action */}
        <div className="flex items-center gap-3">
          {todayStr && (
            <div className="animate-in fade-in flex items-center gap-2 rounded-xl border border-slate-200/60 bg-slate-100/70 px-3 py-1.5 text-[10px] font-bold font-medium text-slate-600 sm:text-xs dark:border-slate-800 dark:bg-slate-800/60 dark:text-slate-300">
              <Calendar className="h-3.5 w-3.5 shrink-0 text-[#1B2CC1]" />
              <span className="font-bold whitespace-nowrap">{todayStr}</span>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}