"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { CurrencyToggle, MoodToggle } from "./currency-toggle";
import { apiFetch, clearAuth, getStoredUser } from "@/lib/api";

const navItems = [
  { href: "/app", label: "Dashboard" },
  { href: "/app/connect", label: "Accounts" },
  { href: "/transactions", label: "Transactions" },
  { href: "/rules", label: "Rules" },
  { href: "/exports", label: "Exports" },
  { href: "/tax", label: "Tax" },
  { href: "/settings", label: "Settings" },
];

type User = {
  id: string;
  email: string;
  fullName?: string | null;
  emailVerified?: boolean;
  twoFactorEnabled?: boolean;
};

type SubscriptionData = {
  plan?: string;
  status?: string;
};

type AppShellProps = {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
};

function initials(user: User): string {
  if (user.fullName) {
    const parts = user.fullName.trim().split(/\s+/);
    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    return parts[0].slice(0, 2).toUpperCase();
  }
  return user.email.slice(0, 2).toUpperCase();
}

function displayName(user: User): string {
  return user.fullName?.trim() || user.email;
}

export function AppShell({ title, subtitle, children }: AppShellProps) {
  const pathname = usePathname();
  const router = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [user, setUser] = useState<User | null>(getStoredUser<User>());
  const [planLabel, setPlanLabel] = useState("Free Plan");

  useEffect(() => {
    // Fetch latest user profile
    apiFetch<{ user: User }>("/api/auth/me")
      .then((res) => {
        if (!res.error && res.data?.user) {
          setUser(res.data.user);
        }
      })
      .catch(() => {});

    // Fetch subscription plan
    apiFetch<SubscriptionData>("/api/stripe/subscription")
      .then((res) => {
        if (!res.error && res.data?.plan) {
          const p = res.data.plan;
          setPlanLabel(p.charAt(0).toUpperCase() + p.slice(1) + " Plan");
        }
      })
      .catch(() => {});
  }, []);

  const onLogout = async () => {
    const refreshToken = localStorage.getItem("ledgerone_refresh_token") ?? "";
    try {
      await fetch("/api/auth/logout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ refreshToken }),
      });
    } catch {}
    clearAuth();
    router.push("/login");
  };

  const NavLinks = () => (
    <>
      {navItems.map((item) => {
        const isActive = pathname === item.href || (item.href !== "/app" && pathname.startsWith(item.href));
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={() => setMobileOpen(false)}
            className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
              isActive
                ? "bg-secondary text-foreground"
                : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
            }`}
          >
            <span>{item.label}</span>
          </Link>
        );
      })}
    </>
  );

  return (
    <div className="min-h-screen bg-background flex font-sans text-foreground">
      {/* Desktop Sidebar */}
      <aside className="w-64 bg-background border-r border-border flex-col hidden lg:flex">
        <div className="h-16 flex items-center px-6 border-b border-border">
          <div className="flex items-center gap-2">
            <div className="h-6 w-6 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold text-xs shadow-glow-teal">
              L1
            </div>
            <span className="font-semibold text-foreground tracking-tight">LedgerOne</span>
          </div>
        </div>

        <div className="p-4 space-y-1">
          <div className="px-2 py-2 mb-2">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Workspace</p>
          </div>
          <NavLinks />
        </div>

        <div className="mt-auto p-4 border-t border-border">
          <div className="flex items-center gap-3 px-2 py-2">
            <div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium flex-shrink-0">
              {user ? initials(user) : "?"}
            </div>
            <div className="overflow-hidden">
              <p className="text-sm font-medium text-foreground truncate">{user ? displayName(user) : "Loading..."}</p>
              <p className="text-xs text-muted-foreground truncate">{planLabel}</p>
            </div>
          </div>
        </div>
      </aside>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {/* Mobile Sidebar drawer */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-64 bg-background border-r border-border flex flex-col transform transition-transform duration-200 lg:hidden ${
          mobileOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="h-16 flex items-center justify-between px-6 border-b border-border">
          <div className="flex items-center gap-2">
            <div className="h-6 w-6 rounded bg-primary flex items-center justify-center text-primary-foreground font-bold text-xs shadow-glow-teal">
              L1
            </div>
            <span className="font-semibold text-foreground tracking-tight">LedgerOne</span>
          </div>
          <button onClick={() => setMobileOpen(false)} className="text-muted-foreground hover:text-foreground">
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="p-4 space-y-1 flex-1">
          <div className="px-2 py-2 mb-2">
            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Workspace</p>
          </div>
          <NavLinks />
        </div>

        <div className="p-4 border-t border-border">
          <div className="flex items-center gap-3 px-2 py-2">
            <div className="h-8 w-8 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium flex-shrink-0">
              {user ? initials(user) : "?"}
            </div>
            <div className="overflow-hidden">
              <p className="text-sm font-medium text-foreground truncate">{user ? displayName(user) : "Loading..."}</p>
              <p className="text-xs text-muted-foreground truncate">{planLabel}</p>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <div className="flex-1 flex flex-col min-w-0">
        <header className="h-16 bg-background border-b border-border flex items-center justify-between px-4 lg:px-8">
          <div className="flex items-center gap-3">
            {/* Hamburger — mobile only */}
            <button
              className="lg:hidden text-muted-foreground hover:text-foreground"
              onClick={() => setMobileOpen(true)}
            >
              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
            <div>
              <h1 className="text-lg font-semibold text-foreground">{title}</h1>
              {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
            </div>
          </div>

          <div className="flex items-center gap-3 lg:gap-4">
            <div className="relative hidden md:block">
              <input
                type="text"
                placeholder="Search..."
                className="w-48 lg:w-64 pl-9 pr-4 py-1.5 bg-secondary/30 border border-border rounded-md text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
              />
              <svg className="w-4 h-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
            <CurrencyToggle />
            <MoodToggle />
            <button
              onClick={onLogout}
              className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
            >
              Log out
            </button>
          </div>
        </header>

        <main className="flex-1 p-4 lg:p-8 overflow-y-auto">
          <div className="max-w-6xl mx-auto">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}