import { Link, useLocation } from "react-router";
import { Shield, User, LogOut, Settings } from "lucide-react";
import { Button } from "./ui/button/button";
import { useAuth } from "~/hooks/use-auth";
import styles from "./header.module.css";

export function Header() {
  const location = useLocation();
  const { logout } = useAuth();

  const isActive = (path: string) => location.pathname === path;

  const handleLogout = () => {
    logout();
    window.location.href = "/login";
  };

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <Link to="/" className={styles.logo}>
          <Shield className={styles.logoIcon} />
          <h1 className={styles.logoText}>VPN Admin</h1>
        </Link>

        <nav className={styles.nav}>
          <ul className={styles.navLinks}>
            <li>
              <Link to="/" className={`${styles.navLink} ${isActive("/") ? styles.active : ""}`}>
                داشبورد
              </Link>
            </li>
            <li>
              <Link to="/users" className={`${styles.navLink} ${isActive("/users") ? styles.active : ""}`}>
                کاربران
              </Link>
            </li>
            <li>
              <Link to="/servers" className={`${styles.navLink} ${isActive("/servers") ? styles.active : ""}`}>
                سرورها
              </Link>
            </li>
            <li>
              <Link to="/subscriptions" className={`${styles.navLink} ${isActive("/subscriptions") ? styles.active : ""}`}>
                اشتراک‌ها
              </Link>
            </li>
            <li>
              <Link to="/coupons" className={`${styles.navLink} ${isActive("/coupons") ? styles.active : ""}`}>
                تخفیف‌ها
              </Link>
            </li>
            <li>
              <Link to="/financial" className={`${styles.navLink} ${isActive("/financial") ? styles.active : ""}`}>
                مالی
              </Link>
            </li>
            <li>
              <Link to="/analytics" className={`${styles.navLink} ${isActive("/analytics") ? styles.active : ""}`}>
                آنالیتیکس
              </Link>
            </li>
            <li>
              <Link to="/tickets" className={`${styles.navLink} ${isActive("/tickets") ? styles.active : ""}`}>
                تیکت‌ها
              </Link>
            </li>
            <li>
              <Link to="/notifications" className={`${styles.navLink} ${isActive("/notifications") ? styles.active : ""}`}>
                اعلان‌ها
              </Link>
            </li>
            <li>
              <Link to="/admin-settings" className={`${styles.navLink} ${isActive("/admin-settings") ? styles.active : ""}`}>
                تنظیمات
              </Link>
            </li>
          </ul>

          <div className={styles.actions}>
            <div className={styles.userInfo}>
              <User className={styles.userIcon} />
              <span>مدیر</span>
            </div>
            <Button variant="outline" size="sm" onClick={handleLogout}>
              <LogOut style={{ width: "16px", height: "16px", marginRight: "var(--space-2)" }} />
              خروج
            </Button>
          </div>
        </nav>
      </div>
    </header>
  );
}