import React from 'react';
import { Hexagon } from 'lucide-react';
import BottomNav from './BottomNav';
import HardwareStatus from './HardwareStatus';
import { UserTab, DeviceStatus } from '../types';

interface LayoutProps {
  children: React.ReactNode;
  currentTab: UserTab;
  onTabChange: (tab: UserTab) => void;
  title: string;
  subtitle?: string;
  deviceStatus: DeviceStatus;
  onDeviceClick: () => void;
}

const Layout: React.FC<LayoutProps> = ({ 
    children, 
    currentTab, 
    onTabChange, 
    title, 
    subtitle, 
    deviceStatus, 
    onDeviceClick 
}) => {
  return (
    <div className="h-screen w-screen bg-transparent text-[#F8FAFC] overflow-hidden flex flex-col relative">
      
      {/* 1. Top Template Header (Super Clean) */}
      <div className="shrink-0 pt-safe-top z-20">
        <div className="px-5 py-4 flex items-end justify-between">
            {/* Left: Branding & Title */}
            <div className="flex flex-col justify-end">
                <div className="flex items-center gap-1.5 mb-1">
                    <Hexagon size={12} className="text-white fill-white/20" strokeWidth={2.5} />
                    <span className="text-[10px] font-bold tracking-[0.2em] text-white/80 uppercase shadow-sm">Wei AI</span>
                </div>
                <h1 className="text-2xl font-bold text-white leading-none tracking-tight drop-shadow-md">{title}</h1>
            </div>
            
            {/* Right: Embedded Hardware Status */}
            <div className="pb-0.5">
                <HardwareStatus status={deviceStatus} onClick={onDeviceClick} />
            </div>
        </div>
      </div>

      {/* 2. Middle Content (Scrollable) */}
      <main className="flex-1 overflow-y-auto no-scrollbar relative z-10 w-full">
        {/* Top fade mask for content scrolling under header */}
        <div className="absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-[#2e1065]/20 to-transparent pointer-events-none z-10"></div>
        {children}
      </main>

      {/* 3. Bottom Tab (Fixed) */}
      <BottomNav currentTab={currentTab} onTabChange={onTabChange} />
    </div>
  );
};

export default Layout;