// Shared authentication pattern via @reptidex/core
import { useAuth, withAuth } from '@reptidex/core'

export default function BreederDashboard() {
  const { user, organization, permissions } = useAuth()
  
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Welcome, {user.name}</h1>
      {permissions.canManageAnimals && <AnimalManagement />}
    </div>
  )
}

// Route protection
export default withAuth(BreederDashboard, {
  requireAuth: true,
  requiredPermissions: ['animals:read']
})

// Zustand store with React Query integration
import { create } from 'zustand'
import { useQuery } from '@tanstack/react-query'
import { reptidexApi } from '@reptidex/core'

// Global UI state
export const useUIStore = create((set) => ({
  sidebarOpen: false,
  currentOrganization: null,
  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen }))
}))

// Server state with React Query
export function useAnimals(organizationId: string) {
  return useQuery({
    queryKey: ['animals', organizationId],
    queryFn: () => reptidexApi.business.getAnimals({ organizationId }),
    staleTime: 5 * 60 * 1000 // 5 minutes
  })
}

// Global error boundary with user-friendly messaging
import { ErrorBoundary } from '@reptidex/ui'
import { BrowserRouter as Router } from 'react-router-dom'

export default function App() {
  return (
    <div className="min-h-screen bg-background">
      <ErrorBoundary
        fallback={<ErrorFallback />}
        onError={(error, errorInfo) => {
          // Log to monitoring service
          console.error('Application error:', error, errorInfo)
        }}
      >
        <Router>
          <Routes />
        </Router>
      </ErrorBoundary>
    </div>
  )
}

// API error handling in @reptidex/core
export const reptidexApi = {
  business: {
    getAnimals: async (params) => {
      try {
        const response = await fetch('/api/animals', { ... })
        if (!response.ok) throw new ApiError(response)
        return response.json()
      } catch (error) {
        throw new ApiError('Failed to fetch animals', error)
      }
    }
  }
}

// Dynamic imports for large components
const PedigreeVisualization = lazy(() => import('./PedigreeVisualization'))
const AdvancedAnalytics = lazy(() => import('./AdvancedAnalytics'))

// Import only needed functions
import { formatDate, validateEmail } from '@reptidex/core/utils'
// Instead of importing entire utils package

frontend/
├── apps/
│   ├── web-public/          # Marketing and discovery app
│   ├── web-breeder/         # Breeder workspace app  
│   ├── web-admin/           # Administrative interface
│   └── web-embed/           # Embeddable widgets
├── packages/
│   ├── ui/                  # @reptidex/ui components
│   ├── core/                # @reptidex/core business logic
│   └── embed/               # @reptidex/embed (optional)
├── tools/
│   ├── eslint-config/       # Shared linting rules
│   ├── typescript-config/   # Shared TS configuration
│   └── build-tools/         # Build and deployment scripts
└── docs/
    ├── storybook/           # Component documentation
    └── api-docs/            # API integration guides

# Start all applications in development
pnpm dev

# Start specific application
pnpm dev:public
pnpm dev:breeder
pnpm dev:admin

# Build shared packages
pnpm build:packages

# Run tests across all applications
pnpm test

# Build for production
pnpm build:all