"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { useMaterial } from "@/contexts/material-context"
import { useTheme } from "next-themes"
import { useMemo, useState } from "react"
import { Heart, MessageCircle, Share2, Star } from "lucide-react"

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

export function CardsSection({ minimal = false }: CardsSectionProps) {
  const { selectedMaterial } = useMaterial()
  const { theme } = useTheme()
  const [liked, setLiked] = useState(false)
  const [bookmarked, setBookmarked] = useState(false)

  // Define card properties
  const cardProperties = [
    {
      name: "variant",
      type: "select",
      options: ["default", "interactive", "profile", "feature", "pricing"],
      defaultValue: "default",
      label: "Card Type",
      description: "The type of card to display",
    },
    {
      name: "title",
      type: "text",
      defaultValue: "Card Title",
      label: "Title",
      description: "The title of the card",
    },
    {
      name: "description",
      type: "textarea",
      defaultValue: "Card description goes here",
      label: "Description",
      description: "The description text for the card",
    },
    {
      name: "withFooter",
      type: "boolean",
      defaultValue: true,
      label: "Include Footer",
      description: "Whether to include a footer with actions",
    },
  ]

  // Render card based on properties
  const renderCard = (props: Record<string, any>) => {
    switch (props.variant) {
      case "interactive":
        return (
          <Card size="md" className="hover:shadow-lg transition-all duration-200 cursor-pointer group max-w-md">
            <CardHeader>
              <div className="flex items-center space-x-4">
                <Avatar className="rounded-lg">
                  <AvatarImage src="/avatar-woman-1.png" />
                  <AvatarFallback className="rounded-lg">JD</AvatarFallback>
                </Avatar>
                <div>
                  <CardTitle as="h3" className="text-base">
                    {props.title}
                  </CardTitle>
                  <CardDescription>Product Designer</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm bg-muted/50 p-3 rounded-lg">{props.description}</p>
            </CardContent>
            {props.withFooter && (
              <CardFooter className="justify-between">
                <div className="flex space-x-2">
                  <Button variant="ghost" size="sm" className="rounded-lg">
                    <Heart className="h-4 w-4 mr-1" />
                    24
                  </Button>
                  <Button variant="ghost" size="sm" className="rounded-lg">
                    <MessageCircle className="h-4 w-4 mr-1" />8
                  </Button>
                </div>
                <Button variant="ghost" size="sm" className="rounded-lg">
                  <Share2 className="h-4 w-4" />
                </Button>
              </CardFooter>
            )}
          </Card>
        )

      case "profile":
        return (
          <Card size="md" className="max-w-sm text-center">
            <CardHeader>
              <div className="flex flex-col items-center space-y-4">
                <Avatar className="h-20 w-20 rounded-2xl">
                  <AvatarImage src="/avatar-woman-2.png" />
                  <AvatarFallback className="rounded-2xl">SW</AvatarFallback>
                </Avatar>
                <div>
                  <CardTitle as="h3" className="text-xl">
                    {props.title}
                  </CardTitle>
                  <CardDescription>{props.description}</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex justify-center space-x-6 text-sm bg-muted/30 p-4 rounded-xl">
                <div className="text-center">
                  <div className="font-semibold">1.2k</div>
                  <div className="text-muted-foreground">Followers</div>
                </div>
                <div className="text-center">
                  <div className="font-semibold">847</div>
                  <div className="text-muted-foreground">Following</div>
                </div>
                <div className="text-center">
                  <div className="font-semibold">42</div>
                  <div className="text-muted-foreground">Projects</div>
                </div>
              </div>
            </CardContent>
            {props.withFooter && (
              <CardFooter>
                <Button className="w-full rounded-xl">Follow</Button>
              </CardFooter>
            )}
          </Card>
        )

      case "feature":
        return (
          <Card size="md" className="max-w-sm hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex items-center space-x-3">
                <div className="h-10 w-10 bg-green-100 rounded-xl flex items-center justify-center">
                  <Star className="h-5 w-5 text-green-600" />
                </div>
                <div>
                  <CardTitle as="h3" className="text-lg">
                    {props.title}
                  </CardTitle>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-sm mb-4">{props.description}</p>
              <ul className="space-y-2 text-sm bg-green-50 p-3 rounded-lg">
                <li className="flex items-center space-x-2">
                  <div className="h-1.5 w-1.5 bg-green-500 rounded-full"></div>
                  <span>Advanced analytics dashboard</span>
                </li>
                <li className="flex items-center space-x-2">
                  <div className="h-1.5 w-1.5 bg-green-500 rounded-full"></div>
                  <span>Priority customer support</span>
                </li>
              </ul>
            </CardContent>
            {props.withFooter && (
              <CardFooter>
                <Button className="w-full rounded-xl">Learn More</Button>
              </CardFooter>
            )}
          </Card>
        )

      case "pricing":
        return (
          <Card size="md" className="max-w-sm relative">
            <CardHeader className="text-center pt-6">
              <CardTitle as="h3" className="text-2xl">
                {props.title}
              </CardTitle>
              <CardDescription>{props.description}</CardDescription>
              <div className="mt-4 bg-muted/30 p-4 rounded-xl">
                <span className="text-4xl font-bold">$29</span>
                <span className="text-muted-foreground">/month</span>
              </div>
            </CardHeader>
            <CardContent>
              <ul className="space-y-3 text-sm bg-green-50 p-4 rounded-xl">
                <li className="flex items-center space-x-2">
                  <div className="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
                    <span className="text-white text-xs">✓</span>
                  </div>
                  <span>Up to 10 team members</span>
                </li>
                <li className="flex items-center space-x-2">
                  <div className="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
                    <span className="text-white text-xs">✓</span>
                  </div>
                  <span>100GB storage</span>
                </li>
              </ul>
            </CardContent>
            {props.withFooter && (
              <CardFooter>
                <Button className="w-full rounded-xl">Start Free Trial</Button>
              </CardFooter>
            )}
          </Card>
        )

      default:
        return (
          <Card size="md" className="max-w-md">
            <CardHeader>
              <CardTitle>{props.title}</CardTitle>
              <CardDescription>{props.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="bg-muted/50 p-3 rounded-lg">
                This is a basic card component that can be used for various content types.
              </p>
            </CardContent>
            {props.withFooter && (
              <CardFooter className="justify-between">
                <Button variant="outline" size="sm" className="rounded-lg">
                  Cancel
                </Button>
                <Button size="sm" className="rounded-lg">
                  Continue
                </Button>
              </CardFooter>
            )}
          </Card>
        )
    }
  }

  // Generate card code
  const generateCardCode = (props: Record<string, any>) => {
    let code = `import { Card, CardContent, CardDescription, CardHeader, CardTitle${props.withFooter ? ", CardFooter" : ""} } from "@/components/ui/card"\n`

    switch (props.variant) {
      case "interactive":
        code += `import { Button } from "@/components/ui/button"\n`
        code += `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"\n`
        code += `import { Heart, MessageCircle, Share2 } from 'lucide-react'\n\n`

        code += `<Card size="md" className="hover:shadow-lg transition-all duration-200 cursor-pointer group max-w-md">\n`
        code += `  <CardHeader>\n`
        code += `    <div className="flex items-center space-x-4">\n`
        code += `      <Avatar className="rounded-lg">\n`
        code += `        <AvatarImage src="/avatar-woman-1.png" />\n`
        code += `        <AvatarFallback className="rounded-lg">JD</AvatarFallback>\n`
        code += `      </Avatar>\n`
        code += `      <div>\n`
        code += `        <CardTitle as="h3" className="text-base">${props.title}</CardTitle>\n`
        code += `        <CardDescription>Product Designer</CardDescription>\n`
        code += `      </div>\n`
        code += `    </div>\n`
        code += `  </CardHeader>\n`
        code += `  <CardContent>\n`
        code += `    <p className="text-sm bg-muted/50 p-3 rounded-lg">${props.description}</p>\n`
        code += `  </CardContent>\n`

        if (props.withFooter) {
          code += `  <CardFooter className="justify-between">\n`
          code += `    <div className="flex space-x-2">\n`
          code += `      <Button variant="ghost" size="sm" className="rounded-lg">\n`
          code += `        <Heart className="h-4 w-4 mr-1" />\n`
          code += `        24\n`
          code += `      </Button>\n`
          code += `      <Button variant="ghost" size="sm" className="rounded-lg">\n`
          code += `        <MessageCircle className="h-4 w-4 mr-1" />\n`
          code += `        8\n`
          code += `      </Button>\n`
          code += `    </div>\n`
          code += `    <Button variant="ghost" size="sm" className="rounded-lg">\n`
          code += `      <Share2 className="h-4 w-4" />\n`
          code += `    </Button>\n`
          code += `  </CardFooter>\n`
        }

        code += `</Card>`
        break

      case "profile":
        code += `import { Button } from "@/components/ui/button"\n`
        code += `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"\n\n`

        code += `<Card size="md" className="max-w-sm text-center">\n`
        code += `  <CardHeader>\n`
        code += `    <div className="flex flex-col items-center space-y-4">\n`
        code += `      <Avatar className="h-20 w-20 rounded-2xl">\n`
        code += `        <AvatarImage src="/avatar-woman-2.png" />\n`
        code += `        <AvatarFallback className="rounded-2xl">SW</AvatarFallback>\n`
        code += `      </Avatar>\n`
        code += `      <div>\n`
        code += `        <CardTitle as="h3" className="text-xl">${props.title}</CardTitle>\n`
        code += `        <CardDescription>${props.description}</CardDescription>\n`
        code += `      </div>\n`
        code += `    </div>\n`
        code += `  </CardHeader>\n`
        code += `  <CardContent>\n`
        code += `    <div className="flex justify-center space-x-6 text-sm bg-muted/30 p-4 rounded-xl">\n`
        code += `      <div className="text-center">\n`
        code += `        <div className="font-semibold">1.2k</div>\n`
        code += `        <div className="text-muted-foreground">Followers</div>\n`
        code += `      </div>\n`
        code += `      <div className="text-center">\n`
        code += `        <div className="font-semibold">847</div>\n`
        code += `        <div className="text-muted-foreground">Following</div>\n`
        code += `      </div>\n`
        code += `      <div className="text-center">\n`
        code += `        <div className="font-semibold">42</div>\n`
        code += `        <div className="text-muted-foreground">Projects</div>\n`
        code += `      </div>\n`
        code += `    </div>\n`
        code += `  </CardContent>\n`

        if (props.withFooter) {
          code += `  <CardFooter>\n`
          code += `    <Button className="w-full rounded-xl">Follow</Button>\n`
          code += `  </CardFooter>\n`
        }

        code += `</Card>`
        break

      case "feature":
        code += `import { Button } from "@/components/ui/button"\n`
        code += `import { Star } from 'lucide-react'\n`

        code += `\n<Card size="md" className="max-w-sm hover:shadow-lg transition-shadow">\n`
        code += `  <CardHeader>\n`
        code += `    <div className="flex items-center space-x-3">\n`
        code += `      <div className="h-10 w-10 bg-green-100 rounded-xl flex items-center justify-center">\n`
        code += `        <Star className="h-5 w-5 text-green-600" />\n`
        code += `      </div>\n`
        code += `      <div>\n`
        code += `        <CardTitle as="h3" className="text-lg">${props.title}</CardTitle>\n`
        code += `      </div>\n`
        code += `    </div>\n`
        code += `  </CardHeader>\n`
        code += `  <CardContent>\n`
        code += `    <p className="text-sm mb-4">${props.description}</p>\n`
        code += `    <ul className="space-y-2 text-sm bg-green-50 p-3 rounded-lg">\n`
        code += `      <li className="flex items-center space-x-2">\n`
        code += `        <div className="h-1.5 w-1.5 bg-green-500 rounded-full"></div>\n`
        code += `        <span>Advanced analytics dashboard</span>\n`
        code += `      </li>\n`
        code += `      <li className="flex items-center space-x-2">\n`
        code += `        <div className="h-1.5 w-1.5 bg-green-500 rounded-full"></div>\n`
        code += `        <span>Priority customer support</span>\n`
        code += `      </li>\n`
        code += `    </ul>\n`
        code += `  </CardContent>\n`

        if (props.withFooter) {
          code += `  <CardFooter>\n`
          code += `    <Button className="w-full rounded-xl">Learn More</Button>\n`
          code += `  </CardFooter>\n`
        }

        code += `</Card>`
        break

      case "pricing":
        code += `import { Button } from "@/components/ui/button"\n`

        code += `\n<Card size="md" className="max-w-sm relative">\n`

        if (props.withFooter) {
          code += `  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">\n`
          code += `    <Badge className="bg-orange-500 hover:bg-orange-600 rounded-lg">Most Popular</Badge>\n`
          code += `  </div>\n`
        }

        code += `  <CardHeader className="text-center pt-6">\n`
        code += `    <CardTitle as="h3" className="text-2xl">${props.title}</CardTitle>\n`
        code += `    <CardDescription>${props.description}</CardDescription>\n`
        code += `    <div className="mt-4 bg-muted/30 p-4 rounded-xl">\n`
        code += `      <span className="text-4xl font-bold">$29</span>\n`
        code += `      <span className="text-muted-foreground">/month</span>\n`
        code += `    </div>\n`
        code += `  </CardHeader>\n`
        code += `  <CardContent>\n`
        code += `    <ul className="space-y-3 text-sm bg-green-50 p-4 rounded-xl">\n`
        code += `      <li className="flex items-center space-x-2">\n`
        code += `        <div className="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">\n`
        code += `          <span className="text-white text-xs">✓</span>\n`
        code += `        </div>\n`
        code += `        <span>Up to 10 team members</span>\n`
        code += `      </li>\n`
        code += `      <li className="flex items-center space-x-2">\n`
        code += `        <div className="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">\n`
        code += `          <span className="text-white text-xs">✓</span>\n`
        code += `        </div>\n`
        code += `        <span>100GB storage</span>\n`
        code += `      </li>\n`
        code += `    </ul>\n`
        code += `  </CardContent>\n`

        if (props.withFooter) {
          code += `  <CardFooter>\n`
          code += `    <Button className="w-full rounded-xl">Start Free Trial</Button>\n`
          code += `  </CardFooter>\n`
        }

        code += `</Card>`
        break

      default:
        if (props.withFooter) {
          code += `import { Button } from "@/components/ui/button"\n\n`
        }

        code += `<Card size="md" className="max-w-md">\n`
        code += `  <CardHeader>\n`
        code += `    <CardTitle>${props.title}</CardTitle>\n`
        code += `    <CardDescription>${props.description}</CardDescription>\n`
        code += `  </CardHeader>\n`
        code += `  <CardContent>\n`
        code += `    <p className="bg-muted/50 p-3 rounded-lg">This is a basic card component that can be used for various content types.</p>\n`
        code += `  </CardContent>\n`

        if (props.withFooter) {
          code += `  <CardFooter className="justify-between">\n`
          code += `    <Button variant="outline" size="sm" className="rounded-lg">Cancel</Button>\n`
          code += `    <Button size="sm" className="rounded-lg">Continue</Button>\n`
          code += `  </CardFooter>\n`
        }

        code += `</Card>`
    }

    return code
  }

  // Check if the Glass material is selected
  const isGlassMaterial = useMemo(() => selectedMaterial?.name === "Glass", [selectedMaterial?.name])

  // If minimal is true, return a simplified version
  if (minimal) {
    return (
      <div>
        <h3 className="text-xl font-medium mb-4">Card</h3>
        <div className="border rounded-lg p-4 shadow-sm">
          <h4 className="font-medium mb-2">Card Title</h4>
          <p className="text-sm text-muted-foreground">Simple card example with minimal content.</p>
        </div>
      </div>
    )
  }

  return (
    <section id="cards" className="scroll-mt-12">
      <SectionHeading
        title="Card"
        description="A container for displaying content and actions about a single subject. Border radius automatically adjusts to perfectly encapsulate inner rounded elements."
      />

      <div className="mt-8 space-y-10">
        <ComponentContainer
          title="Interactive Card"
          description="Customize the card properties using the panel."
          properties={cardProperties}
          renderComponent={renderCard}
          generateCode={generateCardCode}
        >
          <Card className="max-w-md">
            <CardHeader>
              <CardTitle>Card Title</CardTitle>
              <CardDescription>Card description goes here</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="bg-muted/50 p-3 rounded-lg">
                This is a basic card component that can be used for various content types.
              </p>
            </CardContent>
            <CardFooter className="justify-between">
              <Button variant="outline" size="sm" className="rounded-lg">
                Cancel
              </Button>
              <Button size="sm" className="rounded-lg">
                Continue
              </Button>
            </CardFooter>
          </Card>
        </ComponentContainer>

        <div className="mt-8 p-4 rounded-lg border bg-muted/30">
          <h4 className="font-medium mb-2">Border Radius Calculation</h4>
          <p className="text-sm text-muted-foreground mb-2">
            The card's border radius is calculated as: <strong>Inner Element Radius + Padding</strong>
          </p>
          <ul className="text-sm text-muted-foreground space-y-1">
            <li>• Small (p-3): 12px padding + 8px inner radius = 20px border radius</li>
            <li>• Medium (p-4): 16px padding + 8px inner radius = 24px border radius</li>
            <li>• Large (p-6): 24px padding + 8px inner radius = 32px border radius</li>
          </ul>
        </div>
      </div>

      {selectedMaterial && selectedMaterial.name === "Glass" && (
        <div className="mt-8 p-4 rounded-lg border">
          <p className="text-sm text-muted-foreground">
            <strong>Material:</strong> When using the Glass material, cards will have a subtle transparency and backdrop
            blur effect while maintaining the calculated border radius.
          </p>
        </div>
      )}
    </section>
  )
}