'use client';

import React, { useState } from 'react';
import { MobileLayout, MobileBottomNav, useBottomNav } from './index';
import { MessageCircle, User, Settings, Home, Search, ChevronLeft, MoreHorizontal } from 'lucide-react';
import { Button } from '@/ui';

/**
 * EN: Mobile App Demo - Showcases native app-style mobile layout
 * VI: Mobile App Demo - Trình diễn mobile layout theo phong cách native app
 *
 * Demonstrates:
 * - Native-style bottom navigation
 * - Pull-to-refresh functionality
 * - App-like header with back button
 * - Touch-optimized interactions
 *
 * @example
 * ```tsx
 * <MobileAppDemo />
 * ```
 */
export function MobileAppDemo() {
  const { activeItem, handleNavPress } = useBottomNav('home');
  const [refreshCount, setRefreshCount] = useState(0);

  // Simulate async refresh
  const handleRefresh = async () => {
    await new Promise(resolve => setTimeout(resolve, 2000));
    setRefreshCount(prev => prev + 1);
  };

  // Render different content based on active nav item
  const renderContent = () => {
    switch (activeItem) {
      case 'home':
        return <HomeScreen refreshCount={refreshCount} />;
      case 'search':
        return <SearchScreen />;
      case 'chat':
        return <ChatScreen />;
      case 'profile':
        return <ProfileScreen />;
      case 'settings':
        return <SettingsScreen />;
      default:
        return <HomeScreen refreshCount={refreshCount} />;
    }
  };

  // Header content based on active screen
  const getHeader = () => {
    const screenTitles = {
      home: 'Home',
      search: 'Search',
      chat: 'Messages',
      profile: 'Profile',
      settings: 'Settings',
    };

    return (
      <div className="flex items-center justify-between w-full px-4">
        <div className="flex items-center space-x-3">
          <Button variant="ghost" size="sm" className="p-2">
            <ChevronLeft className="w-5 h-5 text-white" />
          </Button>
          <h1 className="text-lg font-semibold text-white">
            {screenTitles[activeItem as keyof typeof screenTitles]}
          </h1>
        </div>
        <Button variant="ghost" size="sm" className="p-2">
          <MoreHorizontal className="w-5 h-5 text-white" />
        </Button>
      </div>
    );
  };

  return (
    <MobileLayout
      showBottomNav
      bottomNavItems={[
        {
          id: 'home',
          label: 'Home',
          icon: <Home className="w-6 h-6" />,
        },
        {
          id: 'search',
          label: 'Search',
          icon: <Search className="w-6 h-6" />,
        },
        {
          id: 'chat',
          label: 'Chat',
          icon: <MessageCircle className="w-6 h-6" />,
          badge: 3,
        },
        {
          id: 'profile',
          label: 'Profile',
          icon: <User className="w-6 h-6" />,
        },
        {
          id: 'settings',
          label: 'Settings',
          icon: <Settings className="w-6 h-6" />,
        },
      ]}
      activeNavItem={activeItem}
      onNavItemPress={handleNavPress}
      header={getHeader()}
      enablePullToRefresh
      onRefresh={handleRefresh}
      className="max-w-sm mx-auto border border-white/20 rounded-2xl overflow-hidden"
    >
      {renderContent()}
    </MobileLayout>
  );
}

// Screen Components
function HomeScreen({ refreshCount }: { refreshCount: number }) {
  return (
    <div className="p-6 space-y-6">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-white mb-2">Welcome Home</h2>
        <p className="text-white/70">
          Refreshed {refreshCount} time{refreshCount !== 1 ? 's' : ''}
        </p>
      </div>

      <div className="space-y-4">
        {[1, 2, 3, 4, 5].map((item) => (
          <div key={item} className="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10">
            <h3 className="text-white font-medium mb-2">Card {item}</h3>
            <p className="text-white/60 text-sm">
              This is a sample card with some content. Pull down to refresh!
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

function SearchScreen() {
  return (
    <div className="p-6">
      <div className="mb-6">
        <div className="bg-white/10 backdrop-blur-sm rounded-xl px-4 py-3 border border-white/20">
          <div className="flex items-center space-x-3">
            <Search className="w-5 h-5 text-white/50" />
            <input
              type="text"
              placeholder="Search..."
              className="bg-transparent text-white placeholder-white/50 flex-1 outline-none"
            />
          </div>
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="text-white font-medium">Recent Searches</h3>
        {['React', 'TypeScript', 'Mobile UI', 'Design Systems'].map((search) => (
          <div key={search} className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
            <span className="text-white/80">{search}</span>
            <ChevronLeft className="w-4 h-4 text-white/50 rotate-180" />
          </div>
        ))}
      </div>
    </div>
  );
}

function ChatScreen() {
  return (
    <div className="p-6">
      <div className="space-y-4">
        {[
          { name: 'Alice', message: 'Hey! How are you?', time: '2m ago' },
          { name: 'Bob', message: 'Meeting at 3 PM?', time: '1h ago' },
          { name: 'Charlie', message: 'Thanks for the help!', time: '2h ago' },
        ].map((chat, index) => (
          <div key={index} className="flex items-center space-x-3 p-3 bg-white/5 rounded-xl border border-white/10">
            <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
              <span className="text-white font-medium text-sm">
                {chat.name[0]}
              </span>
            </div>
            <div className="flex-1">
              <div className="flex items-center justify-between">
                <span className="text-white font-medium">{chat.name}</span>
                <span className="text-white/50 text-xs">{chat.time}</span>
              </div>
              <p className="text-white/70 text-sm">{chat.message}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProfileScreen() {
  return (
    <div className="p-6">
      <div className="text-center mb-8">
        <div className="w-20 h-20 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center">
          <User className="w-10 h-10 text-white" />
        </div>
        <h3 className="text-white text-xl font-bold">John Doe</h3>
        <p className="text-white/60">john@example.com</p>
      </div>

      <div className="space-y-4">
        {[
          { label: 'Edit Profile', icon: User },
          { label: 'Notifications', icon: Settings },
          { label: 'Privacy', icon: Settings },
        ].map((item, index) => (
          <div key={index} className="flex items-center justify-between p-4 bg-white/5 rounded-xl border border-white/10">
            <div className="flex items-center space-x-3">
              <item.icon className="w-5 h-5 text-white/60" />
              <span className="text-white">{item.label}</span>
            </div>
            <ChevronLeft className="w-4 h-4 text-white/50 rotate-180" />
          </div>
        ))}
      </div>
    </div>
  );
}

function SettingsScreen() {
  return (
    <div className="p-6">
      <div className="space-y-6">
        <h3 className="text-white text-lg font-bold">Settings</h3>

        <div className="space-y-4">
          {[
            { label: 'Account', description: 'Manage your account settings' },
            { label: 'Notifications', description: 'Configure notification preferences' },
            { label: 'Privacy', description: 'Control your privacy settings' },
            { label: 'Appearance', description: 'Customize app appearance' },
          ].map((setting, index) => (
            <div key={index} className="p-4 bg-white/5 rounded-xl border border-white/10">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="text-white font-medium">{setting.label}</h4>
                  <p className="text-white/60 text-sm">{setting.description}</p>
                </div>
                <ChevronLeft className="w-4 h-4 text-white/50 rotate-180" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}