import { NavLink, Route, Routes } from "react-router-dom";
import { LayoutDashboard, FilePlus2, Settings as SettingsIcon, Landmark } from "lucide-react";
import Dashboard from "./pages/Dashboard";
import NewClosing from "./pages/NewClosing";
import Closing from "./pages/Closing";
import Settings from "./pages/Settings";

function SideLink({ to, icon: Icon, children, end }: {
  to: string; icon: typeof LayoutDashboard; children: string; end?: boolean;
}) {
  return (
    <NavLink
      to={to}
      end={end}
      className={({ isActive }) =>
        `flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
          isActive
            ? "bg-primary-soft text-primary"
            : "text-subink hover:bg-neutralbg hover:text-ink"
        }`
      }
    >
      <Icon size={18} />
      {children}
    </NavLink>
  );
}

export default function App() {
  return (
    <div className="h-full bg-canvas p-3 sm:p-4">
      <div className="flex h-full min-h-0 bg-panel rounded-3xl shadow-pop overflow-hidden border border-line">
        <aside className="w-60 shrink-0 bg-sidebar flex flex-col border-r border-line">
          <div className="px-5 py-5 flex items-center gap-2.5">
            <span className="inline-flex items-center justify-center w-8 h-8 rounded-xl bg-primary text-white">
              <Landmark size={17} />
            </span>
            <div>
              <div className="text-sm font-semibold leading-tight text-ink">Amazon A/R Aging</div>
              <div className="text-[11px] text-muted">Month-End Closing</div>
            </div>
          </div>
          <nav className="px-3 py-2 space-y-1 flex-1">
            <SideLink to="/" icon={LayoutDashboard} end>Dashboard</SideLink>
            <SideLink to="/new" icon={FilePlus2}>New Closing</SideLink>
            <SideLink to="/settings" icon={SettingsIcon}>Settings</SideLink>
          </nav>
          <div className="m-3 p-3.5 rounded-2xl bg-canvas/70 text-[11px] text-muted leading-relaxed">
            Amazon‑only · processed locally on your server · no third‑party egress.
          </div>
        </aside>

        <main className="flex-1 min-w-0 overflow-y-auto">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/new" element={<NewClosing />} />
            <Route path="/closing/:id/*" element={<Closing />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </main>
      </div>
    </div>
  );
}