"use client"

import { Badge } from "@/components/ui/badge"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import { SectionHeading } from "@/components/ui/section-heading"

interface ColorPaletteProps {
  minimal?: boolean
}

export function ColorPaletteSection({ minimal = false }: ColorPaletteProps) {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

  // Define our color categories
  const colorCategories = [
    {
      name: "Grays",
      colors: [
        { name: "Slate", key: "slate" },
        { name: "Gray", key: "gray" },
        { name: "Zinc", key: "zinc" },
        { name: "Neutral", key: "neutral" },
        { name: "Stone", key: "stone" },
      ],
    },
    {
      name: "Reds",
      colors: [
        { name: "Red", key: "red" },
        { name: "Rose", key: "rose" },
        { name: "Pink", key: "pink" },
      ],
    },
    {
      name: "Oranges",
      colors: [
        { name: "Orange", key: "orange" },
        { name: "Amber", key: "amber" },
      ],
    },
    {
      name: "Yellows",
      colors: [
        { name: "Yellow", key: "yellow" },
        { name: "Lime", key: "lime" },
      ],
    },
    {
      name: "Greens",
      colors: [
        { name: "Green", key: "green" },
        { name: "Emerald", key: "emerald" },
        { name: "Teal", key: "teal" },
      ],
    },
    {
      name: "Blues",
      colors: [
        { name: "Cyan", key: "cyan" },
        { name: "Sky", key: "sky" },
        { name: "Blue", key: "blue" },
        { name: "Indigo", key: "indigo" },
      ],
    },
    {
      name: "Purples",
      colors: [
        { name: "Violet", key: "violet" },
        { name: "Purple", key: "purple" },
        { name: "Fuchsia", key: "fuchsia" },
      ],
    },
  ]

  // Define the shades we want to display
  const shades = [500, 600, 700]

  // If minimal is true, return a simplified version
  if (minimal) {
    return (
      <div>
        <h3 className="text-xl font-medium mb-4">Color Palette</h3>
        <div className="flex flex-wrap gap-2">
          {colorCategories.map((category) =>
            category.colors.map((color) => (
              <Badge key={color.key} className={cn(`bg-${color.key}-500 text-white text-xs px-2 py-1`, materialClass)}>
                {color.name}
              </Badge>
            )),
          )}
        </div>
      </div>
    )
  }

  return (
    <section id="color-palette" className="scroll-mt-16">
      <SectionHeading
        title="Secondary Color Palette"
        description="A comprehensive set of colors based on the Tailwind UI palette for badges and UI elements."
      />

      <div className="space-y-10">
        {colorCategories.map((category) => (
          <div key={category.name} className="space-y-4">
            <h2 className="text-xl font-medium text-foreground">{category.name}</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {category.colors.map((color) => (
                <div key={color.key} className="space-y-3">
                  <h4 className="text-base font-medium text-foreground">{color.name}</h4>
                  <div className="flex flex-col gap-2">
                    {shades.map((shade) => (
                      <div key={shade} className="flex items-center gap-3">
                        <div
                          className={`w-10 h-10 rounded-md shadow-sm`}
                          style={{ backgroundColor: `var(--${color.key}-${shade})` }}
                        ></div>
                        <div className="flex flex-col">
                          <span className="text-sm font-medium">{shade}</span>
                          <span className="text-xs text-muted-foreground">{`var(--${color.key}-${shade})`}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="mt-12 space-y-6">
        <h2 className="text-xl font-medium text-foreground">Badge Examples</h2>
        <div className="space-y-8">
          {colorCategories.map((category) => (
            <div key={`${category.name}-badges`} className="space-y-4">
              <h3 className="text-base font-medium text-foreground">{category.name}</h3>
              <div className="flex flex-wrap gap-3">
                {category.colors.map((color) => (
                  <Badge
                    key={`${color.key}-badge`}
                    className={cn(
                      "text-white text-sm px-3 py-1.5 shadow-sm",
                      materialClass,
                      `bg-${color.key}-500 hover:bg-${color.key}-600`,
                    )}
                  >
                    {color.name}
                  </Badge>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}