import React from "react";
import { ROLE_LABELS } from "../constants/roles";
import { Badge } from "../components/UI/Badge";
import { Button } from "../components/UI/Button";
import { Panel } from "../components/UI/Panel";
import { ThemeToggle } from "../components/UI/ThemeToggle";

export const AppShell = ({
  user,
  onSignOut,
  navItems,
  activeSection,
  onSectionChange,
  sectionMeta,
  children,
}) => {
  return (
    <div className="min-h-screen px-4 py-5 md:px-6 md:py-8">
      <div className="mx-auto grid max-w-[1540px] gap-5 xl:grid-cols-[220px_1fr] xl:gap-8">
        <Panel className="flex h-fit flex-col gap-5 p-4">
          <div>
            <p className="text-xs uppercase tracking-[0.24em] text-[var(--color-text-muted)]">
              Панель
            </p>
            <h1 className="mt-2 text-lg font-semibold leading-tight">Управление доставкой</h1>
          </div>

          <div className="space-y-1">
            {navItems.map((item) => (
              <button
                key={item.key}
                className={[
                  "flex w-full items-center justify-between rounded-[18px] px-3 py-3 text-left text-sm transition",
                  activeSection === item.key
                    ? "bg-[var(--color-accent-soft)] text-[var(--color-text)]"
                    : "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-text)]",
                ].join(" ")}
                onClick={() => onSectionChange(item.key)}
                type="button"
              >
                <span className="font-medium">{item.label}</span>
                {item.badge ? <Badge tone="accent">{item.badge}</Badge> : null}
              </button>
            ))}
          </div>

          <div className="mt-auto">
            <Button variant="ghost" className="w-full justify-start" onClick={onSignOut}>
              Выйти
            </Button>
          </div>
        </Panel>

        <div className="space-y-6 xl:space-y-8">
          <Panel className="p-4 md:p-5">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <p className="text-sm uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
                  Рабочая область
                </p>
                <h2 className="mt-2 text-2xl font-semibold">{sectionMeta?.label || "Панель"}</h2>
                {sectionMeta?.description ? (
                  <p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--color-text-muted)]">
                    {sectionMeta.description}
                  </p>
                ) : null}
              </div>
              <div className="flex flex-wrap items-center gap-3">
                <div className="text-right">
                  <div className="text-sm font-medium">{user.name}</div>
                  <div className="text-sm text-[var(--color-text-muted)]">{ROLE_LABELS[user.role]}</div>
                </div>
                <ThemeToggle />
              </div>
            </div>
          </Panel>

          {children}
        </div>
      </div>
    </div>
  );
};