import { useState } from 'react'
import { Heading, Text, Box, Flex, LoadingButton } from '@orchard9ai/design-system'

export { Page }

function Page() {
  // Example loading state pattern for async operations
  const [isLoading, setIsLoading] = useState(false)

  const handleAsyncAction = async () => {
    setIsLoading(true)
    try {
      // Example: Replace with your actual async operation
      await new Promise(resolve => setTimeout(resolve, 2000))
      // Handle success
    } catch (error) {
      // Handle error
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="relative h-full overflow-hidden bg-base-100">
      {/* Subtle Background Pattern */}
      <div className="absolute inset-0 opacity-[0.02]">
        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern
              id="subtle-grid"
              width="32"
              height="32"
              patternUnits="userSpaceOnUse"
            >
              <circle cx="16" cy="16" r="1" fill="currentColor" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#subtle-grid)" />
        </svg>
      </div>

      {/* Content */}
      <div className="relative z-10 h-full overflow-y-auto">
        <div className="max-w-4xl mx-auto p-6 space-y-8">
          {/* Hero Section */}
          <div className="text-center py-12">
            <Heading as="h1" size="4xl" gradient className="mb-6">
              Welcome to {{PROJECT_NAME}}
            </Heading>
            <Text size="xl" variant="body" className="mb-8 max-w-2xl mx-auto opacity-80">
              Your modern Vite + Vike + Tauri application with a beautiful three-column layout. 
              Navigate using the sidebar and experience responsive design.
            </Text>
          </div>

          {/* Feature Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-base-200 rounded-xl p-6 border border-base-300 hover:border-primary/50 transition-colors">
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <Text size="2xl">⚡</Text>
              </div>
              <Heading as="h3" size="xl" className="mb-2">Lightning Fast</Heading>
              <Text variant="body" className="text-sm opacity-60">
                Powered by Vite for instant development and lightning-fast builds with hot module replacement.
              </Text>
            </div>

            <div className="bg-base-200 rounded-xl p-6 border border-base-300 hover:border-secondary/50 transition-colors">
              <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
                <Text size="2xl">🌐</Text>
              </div>
              <Heading as="h3" size="xl" className="mb-2">Universal Rendering</Heading>
              <Text variant="body" className="text-sm opacity-60">
                SSR-ready with Vike framework for optimal performance, SEO, and user experience.
              </Text>
            </div>

            <div className="bg-base-200 rounded-xl p-6 border border-base-300 hover:border-accent/50 transition-colors">
              <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
                <Text size="2xl">🖥️</Text>
              </div>
              <Heading as="h3" size="xl" className="mb-2">Native Desktop</Heading>
              <Text variant="body" className="text-sm opacity-60">
                Cross-platform desktop applications with Tauri's secure Rust backend.
              </Text>
            </div>

            <div className="bg-base-200 rounded-xl p-6 border border-base-300 hover:border-info/50 transition-colors">
              <div className="w-12 h-12 bg-info/10 rounded-lg flex items-center justify-center mb-4">
                <Text size="2xl">🎨</Text>
              </div>
              <Heading as="h3" size="xl" className="mb-2">Modern Layout</Heading>
              <Text variant="body" className="text-sm opacity-60">
                Beautiful three-column responsive layout with sidebar navigation and theme switching.
              </Text>
            </div>
          </div>

          {/* Coming Soon Features */}
          <div className="mt-8">
            <Heading as="h2" size="2xl" className="text-center mb-6">More Features Coming Soon</Heading>
            <div className="text-center">
              <Text variant="body" className="text-sm opacity-60">
                This template is designed to be extended with additional features like notifications, 
                real-time updates, and more. Check the documentation for available add-ons.
              </Text>
            </div>
          </div>

          {/* Action Section */}
          <div className="bg-base-200 rounded-2xl p-8 border border-base-300 text-center">
            <Heading as="h2" size="2xl" className="mb-4">Ready to Build?</Heading>
            <Text variant="body" className="mb-6 opacity-70">
              Explore the layout, check out the About page, or try the interactive features.
            </Text>
            
            <Flex direction="row" wrap="wrap" gap={4} className="justify-center mb-6">
              <a href="/about" className="btn btn-primary btn-lg focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
                Learn More
              </a>
              <a href="/layout-demo" className="btn btn-outline btn-lg focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
                Layout Demo
              </a>
            </Flex>
            
            {/* Example: Loading state pattern for async operations */}
            <div className="border-t border-base-300 pt-6 mt-6">
              <Text size="sm" className="mb-4 opacity-60">Try an async operation:</Text>
              <LoadingButton
                onClick={handleAsyncAction}
                loading={isLoading}
                variant="secondary"
                size="lg"
              >
                {isLoading ? 'Processing...' : 'Test Async Action'}
              </LoadingButton>
            </div>
          </div>

          {/* Tips Section */}
          <div className="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-xl p-6 border border-primary/20">
            <Heading as="h3" size="lg" className="mb-3">💡 Pro Tips</Heading>
            <ul className="space-y-2 text-sm opacity-70">
              <li>• Use the sidebar to navigate between pages</li>
              <li>• Switch themes using the theme selector in the right panel</li>
              <li>• On mobile, tap the menu icon to access navigation</li>
              <li>• The layout automatically adapts to different screen sizes</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}