/**
 * Puck component and configuration types
 */

// Theme token types
export interface ThemeColors {
  primary: string;
  secondary: string;
  accent: string;
  background: string;
  surface: string;
  text: string;
  textMuted: string;
}

export interface ThemeTypography {
  fontFamily?: string;
  headingFamily?: string;
  baseFontSize?: string;
  scale?: number;
}

export interface ThemeButtons {
  borderRadius?: string;
  paddingX?: string;
  paddingY?: string;
  primaryStyle?: 'solid' | 'outline' | 'ghost';
  secondaryStyle?: 'solid' | 'outline' | 'ghost';
}

export interface ThemeSections {
  maxWidth?: string;
  defaultPadding?: string;
  containerPadding?: string;
}

export interface Theme {
  colors?: Partial<ThemeColors>;
  typography?: ThemeTypography;
  buttons?: ThemeButtons;
  sections?: ThemeSections;
}

// Header/Footer chrome types
export interface NavigationItem {
  label: string;
  href: string;
  style?: 'link' | 'button';
}

export interface HeaderConfig {
  enabled?: boolean;
  style?: 'default' | 'transparent' | 'minimal' | 'none';
  logoUrl?: string;
  businessName?: string;
  showNavigation?: boolean;
  navigation?: NavigationItem[];
  sticky?: boolean;
  ctaText?: string;
  ctaLink?: string;
}

export interface FooterColumn {
  title: string;
  links: Array<{ label: string; href: string }>;
}

export interface SocialLinks {
  facebook?: string;
  instagram?: string;
  twitter?: string;
  linkedin?: string;
  youtube?: string;
}

export interface FooterConfig {
  enabled?: boolean;
  style?: 'default' | 'minimal' | 'none';
  columns?: FooterColumn[];
  copyrightText?: string;
  socialLinks?: SocialLinks;
}

export interface SiteConfig {
  theme: Theme;
  header: HeaderConfig;
  footer: FooterConfig;
}

// Component prop types
export interface SectionProps {
  background: {
    type: 'none' | 'color' | 'image' | 'gradient';
    value?: string;
    imageUrl?: string;
    gradientStops?: string[];
  };
  overlay?: {
    color: string;
    opacity: number;
  };
  padding: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
  containerWidth: 'narrow' | 'default' | 'wide' | 'full';
  anchorId?: string;
  hideOnMobile?: boolean;
  hideOnTablet?: boolean;
  hideOnDesktop?: boolean;
}

export interface ColumnsProps {
  columns: '2' | '3' | '4' | '2-1' | '1-2';
  gap: 'none' | 'small' | 'medium' | 'large';
  verticalAlign: 'top' | 'center' | 'bottom' | 'stretch';
  stackOnMobile: boolean;
}

export interface CardProps {
  background: string;
  borderRadius: 'none' | 'small' | 'medium' | 'large';
  shadow: 'none' | 'small' | 'medium' | 'large';
  padding: 'none' | 'small' | 'medium' | 'large';
}

export interface SpacerProps {
  size: 'small' | 'medium' | 'large' | 'xlarge';
}

export interface DividerProps {
  style: 'solid' | 'dashed' | 'dotted';
  color?: string;
  thickness: 'thin' | 'medium' | 'thick';
}

export interface HeadingProps {
  text: string;
  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  align: 'left' | 'center' | 'right';
}

export interface RichTextProps {
  content: string; // Stored as structured JSON, rendered safely
}

export interface ImageProps {
  src: string;
  alt: string;
  caption?: string;
  aspectRatio?: '16:9' | '4:3' | '1:1' | 'auto';
  borderRadius?: 'none' | 'small' | 'medium' | 'large';
}

export interface ButtonProps {
  text: string;
  href: string;
  variant: 'primary' | 'secondary' | 'outline' | 'ghost';
  size: 'small' | 'medium' | 'large';
  fullWidth?: boolean;
}

export interface IconListItem {
  icon: string;
  title: string;
  description: string;
}

export interface IconListProps {
  items: IconListItem[];
  columns: 1 | 2 | 3 | 4;
}

export interface TestimonialProps {
  quote: string;
  author: string;
  title?: string;
  avatar?: string;
  rating?: 1 | 2 | 3 | 4 | 5;
}


export interface FullBookingFlowProps {
  headline?: string;
  subheadline?: string;
  showPrices: boolean;
  showDuration: boolean;
  showDeposits: boolean;
  allowGuestCheckout: boolean;
  successMessage?: string;
  successRedirectUrl?: string;
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface BookingWidgetProps {
  serviceMode: 'all' | 'category' | 'specific';
  categoryId?: string;
  serviceIds?: string[];
  headline?: string;
  subheading?: string;
  showDuration: boolean;
  showPrice: boolean;
  showDeposits: boolean;
  requireLogin: boolean;
  ctaAfterBooking?: string;
}

export interface ServiceCatalogProps {
  layout: 'cards' | 'list';
  showCategoryFilter: boolean;
  categoryId?: string;
  bookButtonText: string;
}

export interface ServicesProps {
  title: string;
  subtitle: string;
  layout: '1-column' | '2-columns' | '3-columns';
  cardStyle: 'horizontal' | 'vertical';
  padding: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
  showDuration: boolean;
  showPrice: boolean;
  showDescription: boolean;
  showDeposit: boolean;
  buttonText: string;
  buttonStyle: 'primary' | 'secondary' | 'outline' | 'link';
  categoryFilter: string;
  maxServices: number;
}

export interface ContactFormProps {
  heading?: string;
  subheading?: string;
  submitButtonText: string;
  successMessage: string;
  showPhone: boolean;
  showSubject: boolean;
  subjectOptions?: string[];
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface BusinessHoursProps {
  showCurrent: boolean;
  title?: string;
}

export interface AddressBlockProps {
  businessName?: string;
  address?: string;
  address2?: string;
  city?: string;
  state?: string;
  zip?: string;
  phone?: string;
  email?: string;
  showIcons: boolean;
  layout: 'vertical' | 'horizontal';
  alignment: 'left' | 'center' | 'right';
}

export interface MapProps {
  embedUrl: string;
  height: number;
}

// Marketing component prop types (generic, business-agnostic)
export interface HeaderMarketingProps {
  brandText: string;
  brandLogo?: string;
  links: Array<{ label: string; href: string }>;
  ctaButton?: { text: string; href: string };
  variant: 'transparent-on-dark' | 'light' | 'dark';
  showMobileMenu: boolean;
  sticky?: boolean;
}

export interface HeroMarketingProps {
  headline: string;
  subheadline: string;
  primaryCta: { text: string; href: string };
  secondaryCta?: { text: string; href: string };
  media?: { type: 'image' | 'none'; src?: string; alt?: string };
  badge?: string;
  variant: 'centered' | 'split' | 'minimal';
  fullWidth?: boolean;
  padding?: string;
  backgroundVariant?: string;
  gradientPreset?: string;
  contentMaxWidth?: string;
  alignment?: string;
  anchorId?: string;
}

export interface LogoCloudProps {
  heading?: string;
  logos: Array<{ src: string; alt: string; href?: string }>;
  grayscale: boolean;
  spacingDensity: 'compact' | 'normal' | 'spacious';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface SplitContentProps {
  eyebrow?: string;
  heading: string;
  content: string;
  bullets?: Array<{ text: string; icon?: string }>;
  cta?: { text: string; href: string };
  media: { src: string; alt: string };
  mediaPosition: 'left' | 'right';
  variant: 'light' | 'dark';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface CTASectionProps {
  heading: string;
  supportingText?: string;
  buttons: Array<{ text: string; href: string; variant?: 'primary' | 'secondary' }>;
  variant: 'light' | 'dark' | 'gradient';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface StatsStripProps {
  stats: Array<{ value: string; label: string }>;
  variant: 'light' | 'dark';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface GalleryGridProps {
  heading?: string;
  items: Array<{ image: string; title: string; text?: string; link?: string }>;
  columnsMobile: 1 | 2;
  columnsTablet: 2 | 3;
  columnsDesktop: 2 | 3 | 4;
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface TestimonialsMarketingProps {
  heading?: string;
  items: Array<{ quote: string; name: string; title?: string; avatar?: string; rating?: 1 | 2 | 3 | 4 | 5 }>;
  layout: 'carousel' | 'stacked';
  showRating: boolean;
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface VideoEmbedProps {
  heading: string;
  text?: string;
  thumbnailImage: string;
  provider: 'youtube' | 'vimeo';
  videoId: string;
  variant: 'light' | 'dark';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface ContentBlocksProps {
  sectionHeading?: string;
  features: Array<{ heading: string; text: string; bullets?: string[]; image: string }>;
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface PricingCardsProps {
  sectionHeading?: string;
  sectionSubheading?: string;
  currency: string;
  billingPeriod: string;
  plans: Array<{
    name: string;
    price: string;
    subtitle?: string;
    features: string[];
    cta: { text: string; href: string };
  }>;
  highlightIndex: number;
  popularBadgeText?: string;
  variant: 'light' | 'dark';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}

export interface FooterMarketingProps {
  brandText: string;
  brandLogo?: string;
  description?: string;
  columns: Array<{ title: string; links: Array<{ label: string; href: string }> }>;
  socialLinks?: { twitter?: string; linkedin?: string; github?: string; facebook?: string; instagram?: string; youtube?: string };
  smallPrint?: string;
  miniCta?: { text: string; placeholder: string; buttonText: string };
}

export interface FAQAccordionProps {
  heading?: string;
  items: Array<{ question: string; answer: string }>;
  expandBehavior: 'single' | 'multiple';
  variant: 'light' | 'dark';
  padding?: string;
  backgroundVariant?: string;
  contentMaxWidth?: string;
  anchorId?: string;
}


// Component definitions for Puck config
export type ComponentProps = {
  // Layout components
  Section: SectionProps;
  Columns: ColumnsProps;
  Card: CardProps;
  Spacer: SpacerProps;
  Divider: DividerProps;
  // Content components
  Heading: HeadingProps;
  RichText: RichTextProps;
  Image: ImageProps;
  Button: ButtonProps;
  IconList: IconListProps;
  Testimonial: TestimonialProps;
  // Booking components
  FullBookingFlow: FullBookingFlowProps;
  BookingWidget: BookingWidgetProps;
  ServiceCatalog: ServiceCatalogProps;
  Services: ServicesProps;
  // Contact components
  ContactForm: ContactFormProps;
  BusinessHours: BusinessHoursProps;
  AddressBlock: AddressBlockProps;
  Map: MapProps;
  // Marketing components (generic, business-agnostic)
  Header: HeaderMarketingProps;
  Hero: HeroMarketingProps;
  LogoCloud: LogoCloudProps;
  SplitContent: SplitContentProps;
  CTASection: CTASectionProps;
  StatsStrip: StatsStripProps;
  GalleryGrid: GalleryGridProps;
  Testimonials: TestimonialsMarketingProps;
  VideoEmbed: VideoEmbedProps;
  ContentBlocks: ContentBlocksProps;
  PricingCards: PricingCardsProps;
  Footer: FooterMarketingProps;
  FAQAccordion: FAQAccordionProps;
  // Legacy components for backward compatibility
  TextSection: {
    heading: string;
    body: string;
  };
  Booking: {
    headline: string;
    subheading: string;
  };
};

// Puck data structure
export interface PuckData {
  content: Array<{
    type: keyof ComponentProps;
    props: Partial<ComponentProps[keyof ComponentProps]> & { id?: string };
  }>;
  root: Record<string, unknown>;
  zones?: Record<string, Array<{
    type: keyof ComponentProps;
    props: Partial<ComponentProps[keyof ComponentProps]> & { id?: string };
  }>>;
}

// Page data structure
export interface PageData {
  id: string;
  title: string;
  slug: string;
  path: string;
  is_home: boolean;
  is_published: boolean;
  puck_data: PuckData;
  version: number;
  // SEO fields
  meta_title?: string;
  meta_description?: string;
  og_image?: string;
  canonical_url?: string;
  noindex?: boolean;
  // Chrome control
  include_in_nav?: boolean;
  hide_chrome?: boolean;
}
