import { KeyRound, MessageCircle, ShieldCheck } from 'lucide-react';
import { cn } from '@/lib/utils';

export type MobileTab = 'chats' | 'totp' | 'security';

const tabs: Array<{ id: MobileTab; label: string; icon: React.ComponentType<{ className?: string }> }> = [
  { id: 'chats', label: 'Чаты', icon: MessageCircle },
  { id: 'totp', label: 'Коды', icon: KeyRound },
  { id: 'security', label: 'Защита', icon: ShieldCheck }
];

export function MobileShell({
  activeTab,
  onTabChange,
  children
}: {
  activeTab: MobileTab;
  onTabChange: (tab: MobileTab) => void;
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-[#eef1f6] text-[#1f2430]">
      <div className="mx-auto flex min-h-screen max-w-6xl">
        <aside className="hidden w-72 border-r border-[#dce3ec] bg-white/80 p-4 backdrop-blur lg:block">
          <div className="mb-8 rounded-[24px] bg-[#20212b] p-5 text-white shadow-xl">
            <p className="text-sm text-white/70">Super App</p>
            <h1 className="mt-1 text-2xl font-semibold">Lendry ID</h1>
          </div>
          <nav className="space-y-2">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  type="button"
                  className={cn(
                    'flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-medium transition',
                    activeTab === tab.id ? 'bg-[#20212b] text-white' : 'text-[#667085] hover:bg-[#f4f5f8] hover:text-[#1f2430]'
                  )}
                  onClick={() => onTabChange(tab.id)}
                >
                  <Icon className="h-5 w-5" />
                  {tab.label}
                </button>
              );
            })}
          </nav>
        </aside>

        <main className="min-w-0 flex-1 pb-[88px] lg:pb-0">{children}</main>
      </div>

      <nav className="safe-bottom fixed inset-x-0 bottom-0 z-50 border-t border-[#dce3ec] bg-white/95 px-4 py-2 shadow-[0_-12px_28px_rgba(31,36,48,0.12)] backdrop-blur lg:hidden">
        <div className="mx-auto grid max-w-md grid-cols-3 gap-2">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                type="button"
                className={cn(
                  'flex flex-col items-center gap-1 rounded-2xl px-2 py-2 text-xs font-medium transition',
                  activeTab === tab.id ? 'bg-[#20212b] text-white' : 'text-[#667085]'
                )}
                onClick={() => onTabChange(tab.id)}
              >
                <Icon className="h-5 w-5" />
                {tab.label}
              </button>
            );
          })}
        </div>
      </nav>
    </div>
  );
}
