import { Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';

function LogoutIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4">
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 8.25 19.5 12m0 0-3.75 3.75M19.5 12H9.75" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 4.5h-3A1.5 1.5 0 0 0 6 6v12a1.5 1.5 0 0 0 1.5 1.5h3" />
    </svg>
  );
}

export default function Navbar() {
  const { user, logout } = useAuthStore();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <header className="sticky top-0 z-40 px-3 pt-3 lg:px-6 lg:pt-6">
      <div className="mx-auto max-w-[1600px]">
        <div className="overflow-hidden rounded-[28px] border border-white/55 bg-white/75 shadow-[0_24px_70px_rgba(15,23,42,0.12)] backdrop-blur-xl">
          <div className="flex items-center justify-between gap-4 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.22),transparent_38%),linear-gradient(135deg,rgba(255,255,255,0.95),rgba(241,245,249,0.92))] px-4 py-4 lg:px-6">
            <div className="flex items-center gap-3">
              <Link
                to="/"
                className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,#0891b2,#0f172a)] text-lg font-bold text-white shadow-[0_12px_25px_rgba(14,116,144,0.28)]"
              >
                A
              </Link>
              <div>
                <Link to="/" className="text-lg font-semibold tracking-tight text-slate-900 lg:text-xl">
                  AWTF Member Portal
                </Link>
                <p className="text-xs text-slate-500 lg:text-sm">Advocates Welfare Trust Fund</p>
              </div>
            </div>

            {user && (
              <div className="flex items-center gap-3">
                <div className="hidden rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-2.5 text-right shadow-sm sm:block">
                  <p className="text-sm font-semibold text-slate-900">{user.full_name || user.name}</p>
                  <p className="text-xs uppercase tracking-[0.18em] text-slate-500">{user.role}</p>
                </div>

                <button
                  onClick={handleLogout}
                  className="inline-flex items-center gap-2 rounded-2xl bg-slate-900 px-4 py-3 text-sm font-medium text-white shadow-[0_14px_24px_rgba(15,23,42,0.18)] transition-transform hover:-translate-y-0.5 hover:bg-slate-800"
                >
                  <LogoutIcon />
                  <span className="hidden sm:inline">Logout</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}
