"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import { useMemo } from "react"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { getActualValue } from "@/utils/component-properties"

// Add minimal prop to the component
interface AvatarsSectionProps {
  minimal?: boolean
}

export function AvatarsSection({ minimal = false }: AvatarsSectionProps) {
  const { selectedMaterial, getMaterialClass } = useMaterial()
  const materialClass = useMemo(() => {
    return selectedMaterial && getMaterialClass ? getMaterialClass(selectedMaterial) : ""
  }, [selectedMaterial, getMaterialClass])

  // Define avatar properties
  const avatarProperties = [
    {
      name: "size",
      type: "select",
      options: ["Default", "Small", "Large", "Extra Large"],
      defaultValue: "default",
      label: "Size",
      description: "The size of the avatar",
    },
    {
      name: "src",
      type: "select",
      options: ["None", "/avatar-woman-1.jpg", "/avatar-man-1.jpg", "/avatar-woman-2.jpg", "/avatar-man-2.jpg"],
      defaultValue: "/avatar-woman-1.jpg",
      label: "Image Source",
      description: "The source URL of the avatar image",
    },
    {
      name: "fallback",
      type: "text",
      defaultValue: "JD",
      label: "Fallback Text",
      description: "Text to display when the image fails to load",
    },
    {
      name: "showFallback",
      type: "boolean",
      defaultValue: false,
      label: "Force Fallback",
      description: "Force the fallback to be displayed instead of the image",
    },
    {
      name: "border",
      type: "boolean",
      defaultValue: false,
      label: "Show Border",
      description: "Add a border around the avatar",
    },
  ]

  // Render avatar based on properties
  const renderAvatar = (props: Record<string, any>) => {
    const actualSize = getActualValue(props.size)
    const actualSrc = getActualValue(props.src)

    const sizeClasses = {
      default: "h-10 w-10",
      sm: "h-8 w-8",
      lg: "h-14 w-14",
      xl: "h-20 w-20",
    }

    const sizeClass = sizeClasses[actualSize as keyof typeof sizeClasses] || sizeClasses.default
    const borderClass = props.border ? "border-2 border-primary" : ""
    const elevationClass = "shadow-sm" // Add level 1 elevation

    return (
      <Avatar className={cn(sizeClass, borderClass, elevationClass, materialClass)}>
        {!props.showFallback && actualSrc !== "none" && (
          <AvatarImage src={actualSrc || "/placeholder.svg"} alt="Avatar" />
        )}
        <AvatarFallback>{props.fallback}</AvatarFallback>
      </Avatar>
    )
  }

  // Generate avatar code
  const generateAvatarCode = (props: Record<string, any>) => {
    const actualSize = getActualValue(props.size)
    const actualSrc = getActualValue(props.src)

    const sizeClasses = {
      default: "h-10 w-10",
      sm: "h-8 w-8",
      lg: "h-14 w-14",
      xl: "h-20 w-20",
    }

    const sizeClass = sizeClasses[actualSize as keyof typeof sizeClasses] || sizeClasses.default
    const borderClass = props.border ? "border-2 border-primary" : ""
    const elevationClass = "shadow-sm" // Add level 1 elevation
    const className = [sizeClass, borderClass, elevationClass].filter(Boolean).join(" ")

    let code = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"\n\n`
    code += `<Avatar${className ? ` className="${className}"` : ""}>\n`

    if (!props.showFallback && actualSrc !== "none") {
      code += `  <AvatarImage src="${actualSrc}" alt="Avatar" />\n`
    }

    code += `  <AvatarFallback>${props.fallback}</AvatarFallback>\n`
    code += `</Avatar>`

    return code
  }

  // Update the minimal version to use h3
  if (minimal) {
    return (
      <div>
        <h3 className="text-xl font-medium mb-4">Avatar</h3>
        <div className="flex -space-x-2">
          <div className="w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center">
            A
          </div>
          <div className="w-10 h-10 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center">
            B
          </div>
          <div className="w-10 h-10 rounded-full bg-muted text-muted-foreground flex items-center justify-center">
            C
          </div>
        </div>
      </div>
    )
  }

  return (
    <section id="avatars" className="scroll-mt-16">
      <SectionHeading title="Avatar" description="An image element with a fallback for representing the user." />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Avatar"
          description="Customize the avatar properties using the panel."
          properties={avatarProperties}
          renderComponent={renderAvatar}
          generateCode={generateAvatarCode}
        >
          <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
            <AvatarImage src="/avatar-woman-1.jpg" alt="Avatar" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
        </ComponentContainer>

        <ComponentContainer
          title="Standard Avatars"
          description="Avatar components with images."
          code={`<Avatar className="shadow-sm">
  <AvatarImage src="/avatar-woman-1.jpg" alt="Avatar of a woman" />
  <AvatarFallback>SJ</AvatarFallback>
</Avatar>

<Avatar className="shadow-sm">
  <AvatarImage src="/avatar-man-1.jpg" alt="Avatar of a man" />
  <AvatarFallback>MC</AvatarFallback>
</Avatar>`}
        >
          <div className="flex flex-wrap items-center gap-4">
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-woman-1.jpg" alt="Avatar of a woman" />
              <AvatarFallback>SJ</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-man-1.jpg" alt="Avatar of a man" />
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-woman-2.jpg" alt="Avatar of a woman" />
              <AvatarFallback>LR</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-man-2.jpg" alt="Avatar of a man" />
              <AvatarFallback>DK</AvatarFallback>
            </Avatar>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="With Fallback"
          description="Avatars with fallback initials when no image is available."
          code={`<Avatar className="shadow-sm">
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

<Avatar className="shadow-sm">
  <AvatarFallback>AB</AvatarFallback>
</Avatar>`}
        >
          <div className="flex flex-wrap items-center gap-4">
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarFallback>JD</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarFallback>AB</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarFallback>CK</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 shadow-sm", materialClass)}>
              <AvatarFallback>MR</AvatarFallback>
            </Avatar>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Avatar Group"
          description="A group of avatars stacked together."
          code={`<div className="flex -space-x-2">
  <Avatar className="border-2 border-background shadow-sm">
    <AvatarImage src="/avatar-woman-1.jpg" alt="Avatar of a woman" />
    <AvatarFallback>A</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background shadow-sm">
    <AvatarImage src="/avatar-man-1.jpg" alt="Avatar of a man" />
    <AvatarFallback>B</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background shadow-sm">
    <AvatarImage src="/avatar-woman-2.jpg" alt="Avatar of a woman" />
    <AvatarFallback>C</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background shadow-sm">
    <AvatarFallback>+2</AvatarFallback>
  </Avatar>
</div>`}
        >
          <div className="flex -space-x-2">
            <Avatar className={cn("h-10 w-10 border-2 border-background shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-woman-1.jpg" alt="Avatar of a woman" />
              <AvatarFallback>A</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 border-2 border-background shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-man-1.jpg" alt="Avatar of a man" />
              <AvatarFallback>B</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 border-2 border-background shadow-sm", materialClass)}>
              <AvatarImage src="/avatar-woman-2.jpg" alt="Avatar of a woman" />
              <AvatarFallback>C</AvatarFallback>
            </Avatar>
            <Avatar className={cn("h-10 w-10 border-2 border-background shadow-sm", materialClass)}>
              <AvatarFallback>+2</AvatarFallback>
            </Avatar>
          </div>
        </ComponentContainer>
      </div>

      <div className="space-y-4 mt-8">
        <h2 className="text-xl font-medium">Usage</h2>
        <div className="rounded-md border p-4">
          <pre className="text-sm text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words">
            <code>{`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}