// TypeScript prevents common Shopify development errors
interface Product {
  id: string
  title: string
  handle: string
  priceRange: {
    minVariantPrice: {
      amount: string
      currencyCode: string
    }
  }
  featuredImage?: {
    url: string
    altText?: string
  }
}

// ✅ TypeScript prevents these errors at compile time:

function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <h3>{product.title}</h3>
      {/* TypeScript error: Property 'price' does not exist on type 'Product' */}
      {/* <p>{product.price}</p> */}

      {/* ✅ Correct: TypeScript guides you to the right property */}
      <p>{product.priceRange.minVariantPrice.amount}</p>

      {/* TypeScript error: Object is possibly 'undefined' */}
      {/* <img src={product.featuredImage.url} /> */}

      {/* ✅ Correct: TypeScript enforces null checks */}
      {product.featuredImage && (
        <img
          src={product.featuredImage.url}
          alt={product.featuredImage.altText || product.title}
        />
      )}
    </div>
  )
}

// Compare with Liquid - no error checking:
// {{ product.price }} <!-- Works until Shopify changes API -->
// {{ product.featured_image.url }} <!-- Breaks if no image -->
// {{ product.featured_image.alt }} <!-- Silent failure -->

// ProductShowcase.tsx - Type-safe component with visual controls
import { forwardRef } from 'react'
import type { Product } from '@shopify/hydrogen/storefront-api-types'
import { createSchema } from '@weaverse/hydrogen'

// TypeScript interface for component props
interface ProductShowcaseProps {
  products: Product[]
  layout: 'grid' | 'carousel' | 'masonry'
  columns: 2 | 3 | 4 | 5
  showVendor: boolean
  showDescription: boolean
  priceDisplay: 'range' | 'from' | 'exact'
  imageAspectRatio: 'square' | 'portrait' | 'landscape'
  enableQuickView: boolean
  sortBy: 'featured' | 'price-low' | 'price-high' | 'newest'
}

// Type-safe component implementation
export let ProductShowcase = forwardRef<HTMLDivElement, ProductShowcaseProps>(
  ({
    products,
    layout = 'grid',
    columns = 3,
    showVendor = false,
    showDescription = true,
    priceDisplay = 'exact',
    imageAspectRatio = 'square',
    enableQuickView = false,
    sortBy = 'featured'
  }, ref) => {
    // Type-safe product sorting
    let sortedProducts = [...products].sort((a, b) => {
      switch (sortBy) {
        case 'price-low':
          return parseFloat(a.priceRange.minVariantPrice.amount) -
                 parseFloat(b.priceRange.minVariantPrice.amount)
        case 'price-high':
          return parseFloat(b.priceRange.minVariantPrice.amount) -
                 parseFloat(a.priceRange.minVariantPrice.amount)
        case 'newest':
          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        default:
          return 0
      }
    })

    // Type-safe price formatting
    let formatPrice = (product: Product): string => {
      let { minVariantPrice, maxVariantPrice } = product.priceRange

      switch (priceDisplay) {
        case 'range':
          return minVariantPrice.amount === maxVariantPrice.amount
            ? `$${minVariantPrice.amount}`
            : `$${minVariantPrice.amount} - $${maxVariantPrice.amount}`
        case 'from':
          return `From $${minVariantPrice.amount}`
        case 'exact':
        default:
          return `$${minVariantPrice.amount}`
      }
    }

    return (
      <div
        ref={ref}
        className={`product-showcase product-showcase--${layout}`}
        data-columns={columns}
      >
        {layout === 'grid' && (
          <div className={`grid gap-6 grid-cols-1 md:grid-cols-${columns}`}>
            {sortedProducts.map((product) => (
              <ProductCard
                key={product.id}
                product={product}
                showVendor={showVendor}
                showDescription={showDescription}
                priceFormatter={formatPrice}
                imageAspectRatio={imageAspectRatio}
                enableQuickView={enableQuickView}
              />
            ))}
          </div>
        )}

        {layout === 'carousel' && (
          <ProductCarousel
            products={sortedProducts}
            showVendor={showVendor}
            showDescription={showDescription}
            priceFormatter={formatPrice}
          />
        )}

        {layout === 'masonry' && (
          <ProductMasonry
            products={sortedProducts}
            columns={columns}
            showVendor={showVendor}
            showDescription={showDescription}
          />
        )}
      </div>
    )
  }
)

// Type-safe Weaverse schema - makes TypeScript component visually editable
export let schema = createSchema({
  type: 'product-showcase',
  title: 'Product Showcase',
  settings: [
    {
      group: 'Layout & Display',
      inputs: [
        {
          type: 'select',
          name: 'layout',
          label: 'Layout Style',
          options: [
            { value: 'grid', label: 'Grid Layout' },
            { value: 'carousel', label: 'Carousel Slider' },
            { value: 'masonry', label: 'Masonry Grid' },
          ] as const, // TypeScript ensures type safety
          defaultValue: 'grid',
        },
        {
          type: 'range',
          name: 'columns',
          label: 'Columns (Grid & Masonry)',
          min: 2,
          max: 5,
          step: 1,
          defaultValue: 3,
          condition: 'layout.value !== "carousel"', // Conditional display
        },
        {
          type: 'select',
          name: 'imageAspectRatio',
          label: 'Image Aspect Ratio',
          options: [
            { value: 'square', label: 'Square (1:1)' },
            { value: 'portrait', label: 'Portrait (3:4)' },
            { value: 'landscape', label: 'Landscape (4:3)' },
          ] as const,
          defaultValue: 'square',
        },
      ],
    },
    {
      group: 'Product Information',
      inputs: [
        {
          type: 'toggle',
          name: 'showVendor',
          label: 'Show Product Vendor',
          defaultValue: false,
        },
        {
          type: 'toggle',
          name: 'showDescription',
          label: 'Show Product Description',
          defaultValue: true,
        },
        {
          type: 'select',
          name: 'priceDisplay',
          label: 'Price Display Format',
          options: [
            { value: 'exact', label: 'Exact Price' },
            { value: 'from', label: 'From $X.XX' },
            { value: 'range', label: 'Price Range' },
          ] as const,
          defaultValue: 'exact',
        },
      ],
    },
    {
      group: 'Behavior & Sorting',
      inputs: [
        {
          type: 'toggle',
          name: 'enableQuickView',
          label: 'Enable Quick View',
          defaultValue: false,
        },
        {
          type: 'select',
          name: 'sortBy',
          label: 'Sort Products By',
          options: [
            { value: 'featured', label: 'Featured' },
            { value: 'price-low', label: 'Price: Low to High' },
            { value: 'price-high', label: 'Price: High to Low' },
            { value: 'newest', label: 'Newest First' },
          ] as const,
          defaultValue: 'featured',
        },
      ],
    },
    {
      group: 'Product Selection',
      inputs: [
        {
          type: 'collection',
          name: 'collection',
          label: 'Select Collection',
          // Weaverse automatically provides type-safe collection data
        },
        {
          type: 'range',
          name: 'productLimit',
          label: 'Maximum Products to Show',
          min: 1,
          max: 50,
          step: 1,
          defaultValue: 12,
        },
      ],
    },
  ],
})

// TypeScript ensures schema matches component props
type SchemaSettings = typeof schema.settings
type InferredProps = /* Complex type inference logic */

// Union types for precise layout control
type LayoutType = 'hero' | 'split' | 'centered' | 'full-width'
type ContentAlignment = 'left' | 'center' | 'right'
type ButtonStyle = 'primary' | 'secondary' | 'outline' | 'ghost'

interface HeroBannerProps {
  layout: LayoutType
  backgroundType: 'image' | 'video' | 'gradient'
  contentAlignment: ContentAlignment
  showCTA: boolean
  ctaStyle?: ButtonStyle // Optional when showCTA is false
  overlayOpacity: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 // Specific values
}

// TypeScript ensures only valid combinations
function HeroBanner({
  layout,
  backgroundType,
  contentAlignment,
  showCTA,
  ctaStyle = 'primary',
  overlayOpacity = 0.3
}: HeroBannerProps) {
  // TypeScript provides intelligent autocomplete and error checking
  return (
    <section className={`hero hero--${layout} content-${contentAlignment}`}>
      {backgroundType === 'video' && (
        <video autoPlay loop muted>
          <source src={videoUrl} type="video/mp4" />
        </video>
      )}

      {showCTA && (
        <button className={`btn btn--${ctaStyle}`}>
          Shop Now
        </button>
      )}

      <div
        className="hero__overlay"
        style={{ opacity: overlayOpacity }}
      />
    </section>
  )
}

// Generic component that works with any Shopify resource
interface ResourceGridProps<T> {
  items: T[]
  renderItem: (item: T) => React.ReactNode
  columns: 2 | 3 | 4
  gap: 'small' | 'medium' | 'large'
  loading?: boolean
}

function ResourceGrid<T extends { id: string }>({
  items,
  renderItem,
  columns,
  gap,
  loading = false
}: ResourceGridProps<T>) {
  if (loading) {
    return <GridSkeleton columns={columns} />
  }

  return (
    <div className={`grid grid-cols-${columns} gap-${gap}`}>
      {items.map((item) => (
        <div key={item.id}>
          {renderItem(item)}
        </div>
      ))}
    </div>
  )
}

// Type-safe usage with Products
<ResourceGrid<Product>
  items={products}
  renderItem={(product) => <ProductCard product={product} />}
  columns={3}
  gap="medium"
/>

// Type-safe usage with Collections
<ResourceGrid<Collection>
  items={collections}
  renderItem={(collection) => <CollectionCard collection={collection} />}
  columns={2}
  gap="large"
/>

// Conditional props based on component configuration
type BaseButtonProps = {
  text: string
  style: 'primary' | 'secondary' | 'outline'
}

type ButtonWithIcon = BaseButtonProps & {
  showIcon: true
  iconName: string
  iconPosition: 'left' | 'right'
}

type ButtonWithoutIcon = BaseButtonProps & {
  showIcon: false
  iconName?: never // TypeScript prevents setting iconName
  iconPosition?: never // TypeScript prevents setting iconPosition
}

type SmartButtonProps = ButtonWithIcon | ButtonWithoutIcon

function SmartButton(props: SmartButtonProps) {
  return (
    <button className={`btn btn--${props.style}`}>
      {props.showIcon && props.iconPosition === 'left' && (
        <Icon name={props.iconName} />
      )}
      {props.text}
      {props.showIcon && props.iconPosition === 'right' && (
        <Icon name={props.iconName} />
      )}
    </button>
  )
}

// Weaverse schema with conditional fields
export let schema = createSchema({
  type: 'smart-button',
  title: 'Smart Button',
  settings: [
    {
      group: 'Button Content',
      inputs: [
        {
          type: 'text',
          name: 'text',
          label: 'Button Text',
          defaultValue: 'Click Me',
        },
        {
          type: 'select',
          name: 'style',
          label: 'Button Style',
          options: [
            { value: 'primary', label: 'Primary' },
            { value: 'secondary', label: 'Secondary' },
            { value: 'outline', label: 'Outline' },
          ],
          defaultValue: 'primary',
        },
      ],
    },
    {
      group: 'Icon Settings',
      inputs: [
        {
          type: 'toggle',
          name: 'showIcon',
          label: 'Show Icon',
          defaultValue: false,
        },
        {
          type: 'icon-picker',
          name: 'iconName',
          label: 'Choose Icon',
          condition: 'showIcon.value === true', // Only show when icon is enabled
        },
        {
          type: 'select',
          name: 'iconPosition',
          label: 'Icon Position',
          options: [
            { value: 'left', label: 'Left of Text' },
            { value: 'right', label: 'Right of Text' },
          ],
          defaultValue: 'left',
          condition: 'showIcon.value === true',
        },
      ],
    },
  ],
})

// Automatically infer TypeScript types from Weaverse schema
import { InferSchemaProps } from '@weaverse/hydrogen'

let schema = createSchema({
  // ... schema definition
})

// TypeScript automatically creates the correct prop types
type MyComponentProps = InferSchemaProps<typeof schema>

export function MyComponent(props: MyComponentProps) {
  // TypeScript knows exactly what props are available
}

// Type-safe error boundaries for visual components
interface ErrorBoundaryState {
  hasError: boolean
  error?: Error
}

class ComponentErrorBoundary extends React.Component<
  React.PropsWithChildren<Record<string, never>>,
  ErrorBoundaryState
> {
  constructor(props: React.PropsWithChildren<Record<string, never>>) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="component-error">
          <p>Component failed to render</p>
          {process.env.NODE_ENV === 'development' && (
            <pre>{this.state.error?.message}</pre>
          )}
        </div>
      )
    }

    return this.props.children
  }
}

// Optimized TypeScript components for Weaverse
import { memo, forwardRef } from 'react'

// Memoized for performance, with proper TypeScript types
export let OptimizedComponent = memo(
  forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
    // Component implementation
    return <div ref={ref}>{/* content */}</div>
  })
)

OptimizedComponent.displayName = 'OptimizedComponent'