"use client";
import React, { useState } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";

interface NavItem {
  href: string;
  label: string;
  icon: React.ReactNode;
  badge?: string;
}

const NAV_ITEMS: NavItem[] = [
  { href: "/", label: "Dashboard", icon: <><rect x="3" y="3" width="7" height="9" rx="1.5" /><rect x="14" y="3" width="7" height="5" rx="1.5" /><rect x="14" y="12" width="7" height="9" rx="1.5" /><rect x="3" y="16" width="7" height="5" rx="1.5" /></> },
  { href: "/leads", label: "My Leads", badge: "2", icon: <><path d="M8 6h13M8 12h13M8 18h13" /><path d="M3 6h.01M3 12h.01M3 18h.01" /></> },
  { href: "/customers", label: "My Customers", icon: <><circle cx="12" cy="8" r="3.5" /><path d="M4.5 20c1-4.2 4-6.5 7.5-6.5s6.5 2.3 7.5 6.5" /></> },
  { href: "/submit", label: "Submit Policy", icon: <><path d="M12 19V5M5 12l7-7 7 7" /></> },
  { href: "/policies", label: "My Policies", icon: <><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" /></> },
  { href: "/claims", label: "My Claims", icon: <><circle cx="12" cy="12" r="9" /><path d="M12 8v4l3 2" /></> },
  { href: "/commission", label: "My Commission", icon: <><circle cx="12" cy="12" r="9" /><path d="M9 9h3.5a1.8 1.8 0 010 3.6H9m0-3.6v6.4m0-6.4h6M9 12.6h5.5" /></> },
  { href: "/reports", label: "Reports", icon: <><path d="M4 19V5a1 1 0 011-1h11l4 4v11a1 1 0 01-1 1H5a1 1 0 01-1-1z" /><path d="M9 17v-5M13 17v-8M17 17v-3" /></> },
];

export default function AgentShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const [avatarOpen, setAvatarOpen] = useState(false);

  const isActive = (href: string) => (href === "/" ? pathname === "/" : pathname.startsWith(href));

  return (
    <div className="shell" style={{ display: "flex" }}>
      <div className="sidebar">
        <div className="brand">
          <div className="mark">RB</div>
          <div>
            <div className="name">ReadyBroker</div>
            <div className="sub">Agent</div>
          </div>
        </div>
        <div className="nav">
          {NAV_ITEMS.map((item) => (
            <Link key={item.href} href={item.href} className={"nav-item" + (isActive(item.href) ? " active" : "")}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                {item.icon}
              </svg>
              {item.label}
              {item.badge && <span className="count">{item.badge}</span>}
            </Link>
          ))}
        </div>
        <div className="sidebar-foot">
          ReadyBroker Agent · Web
          <br />
          <Link href="/login" style={{ color: "var(--navy)", fontWeight: 700 }}>View Login Flow →</Link>
        </div>
      </div>

      <div className="main">
        <div className="topbar">
          <div className="avatar-wrap">
            <button className="avatar-btn" onClick={() => setAvatarOpen((v) => !v)}>
              <div className="avatar">RS</div>
              <div className="avatar-name">
                <div className="n">Rohit Sharma</div>
                <div className="r">POSP-8041</div>
              </div>
            </button>
            {avatarOpen && (
              <div className="dropdown open">
                <button onClick={() => { setAvatarOpen(false); router.push("/profile"); }}>My Profile</button>
                <button onClick={() => { setAvatarOpen(false); router.push("/documents"); }}>My Documents</button>
                <button onClick={() => { setAvatarOpen(false); router.push("/settings"); }}>Settings</button>
                <div className="div"></div>
                <button style={{ color: "var(--bad)" }} onClick={() => router.push("/login")}>Log Out</button>
              </div>
            )}
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}