import React from 'react';
import { useNavigate } from 'react-router-dom';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { ArrowRight } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

const mockups = [
  { id: '1', title: 'Capture Orbit', description: 'Full-screen capture hub with orbiting actions.' },
  { id: '2', title: 'Gallery Mosaic', description: 'Image-first grid with filters and fast scan.' },
  { id: '3', title: 'Prompt Quest', description: 'Prompt hero with progress and task ladder.' },
  { id: '4', title: 'Timeline Stream', description: 'Chronological feed with time markers.' },
  { id: '5', title: 'Compass Hub', description: 'Quadrant navigation around a central action.' },
  { id: '6', title: 'Split Capture', description: 'Camera preview plus quick tools and queue.' },
  { id: '7', title: 'Swipe Deck', description: 'Stacked cards for rapid review.' },
  { id: '8', title: 'Daybook', description: 'Morning/afternoon/night memory sections.' },
  { id: '9', title: 'Checklist Flow', description: 'Tasks checklist paired with gallery progress.' },
  { id: '10', title: 'Spotlight Reel', description: 'Live highlight reel with action strip.' },
];

export default function MockupsIndexScreen() {
  const navigate = useNavigate();

  return (
    <MockupFrame
      title="Guest PWA mockups"
      subtitle="10 layout concepts for the new event experience"
    >
      <MockupCard gap="$2">
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
              Home concepts
            </Text>
            <MockupLabel>Explore 10 start screen ideas.</MockupLabel>
          </YStack>
          <Button
            size="$3"
            backgroundColor="$primary"
            borderRadius="$pill"
            onPress={() => navigate('/mockups/home')}
          >
            <XStack alignItems="center" gap="$2">
              <Text fontSize="$3" color="white">
                Open
              </Text>
              <ArrowRight size={16} color="white" />
            </XStack>
          </Button>
        </XStack>
      </MockupCard>

      <YStack gap="$3">
        {mockups.map((mockup) => (
          <MockupCard key={mockup.id} gap="$2">
            <XStack alignItems="center" justifyContent="space-between">
              <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
                {mockup.title}
              </Text>
              <Button
                size="$3"
                backgroundColor="$primary"
                borderRadius="$pill"
                onPress={() => navigate(`/mockups/${mockup.id}`)}
              >
                <XStack alignItems="center" gap="$2">
                  <Text fontSize="$3" color="white">
                    View
                  </Text>
                  <ArrowRight size={16} color="white" />
                </XStack>
              </Button>
            </XStack>
            <MockupLabel>{mockup.description}</MockupLabel>
          </MockupCard>
        ))}
      </YStack>
    </MockupFrame>
  );
}