"use client"

import { Card, CardContent } from "@/components/ui/card"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentShowcase } from "@/components/ui/component-showcase"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"

export function ElevationSection() {
  const { selectedMaterial } = useMaterial()
  const materialClass = selectedMaterial?.className || ""

  return (
    <section className="space-y-8">
      <SectionHeading
        title="Elevation"
        description="Guidelines for applying shadows to create depth and hierarchy in the interface."
      />

      <div className="space-y-8">
        <div className="prose dark:prose-invert max-w-none">
          <p>
            Elevation in UI design creates a visual hierarchy that helps users understand the relationship between
            elements. Higher elevation suggests prominence and interactivity, while lower elevation indicates background
            or supporting elements.
          </p>
        </div>

        <div className="w-full">
          <ComponentShowcase
            title="Elevation Levels"
            description="Four distinct levels of elevation to create depth in your interface."
          >
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <ElevationCard level={0} />
              <ElevationCard level={1} />
              <ElevationCard level={2} />
              <ElevationCard level={3} />
            </div>
          </ComponentShowcase>
        </div>

        <div className="space-y-4">
          <h2 className="text-xl font-semibold">Elevation Guidelines</h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="p-4 rounded-md border bg-muted/30">
              <h4 className="text-sm font-medium mb-3">When to Use</h4>
              <ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground">
                <li>
                  <strong>Level 0:</strong> Backgrounds, disabled elements
                </li>
                <li>
                  <strong>Level 1:</strong> Cards, buttons, form inputs
                </li>
                <li>
                  <strong>Level 2:</strong> Active elements, dropdowns, navigation
                </li>
                <li>
                  <strong>Level 3:</strong> Modals, dialogs, floating elements
                </li>
              </ul>
            </div>
            <div className="p-4 rounded-md border bg-muted/30">
              <h4 className="text-sm font-medium mb-3">Best Practices</h4>
              <ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground">
                <li>Use elevation to establish visual hierarchy</li>
                <li>Increase elevation for interactive states</li>
                <li>Limit elevation levels in a single view</li>
                <li>Apply consistently across similar components</li>
              </ul>
            </div>
          </div>
        </div>

        <div className="space-y-4">
          <h2 className="text-xl font-semibold">Implementation</h2>

          <div className="prose dark:prose-invert max-w-none">
            <p>
              Apply elevation using Tailwind's shadow utility classes. Each elevation level maps to a specific shadow
              class.
            </p>
          </div>

          <Card className={cn("border", materialClass)}>
            <CardContent className="p-4 space-y-4">
              <div className="space-y-2">
                <h4 className="font-medium">Shadow Classes</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <code className="text-xs bg-muted px-1 py-0.5 rounded">shadow-none</code>
                    <span className="ml-2">Level 0 (Flat)</span>
                  </div>
                  <div>
                    <code className="text-xs bg-muted px-1 py-0.5 rounded">shadow-sm</code>
                    <span className="ml-2">Level 1 (Low)</span>
                  </div>
                  <div>
                    <code className="text-xs bg-muted px-1 py-0.5 rounded">shadow-md</code>
                    <span className="ml-2">Level 2 (Medium)</span>
                  </div>
                  <div>
                    <code className="text-xs bg-muted px-1 py-0.5 rounded">shadow-lg</code>
                    <span className="ml-2">Level 3 (High)</span>
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <h4 className="font-medium">Basic Example</h4>
                <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
                  {`<div className="shadow-md rounded-lg p-4">
 Medium elevation card
</div>`}
                </pre>
              </div>

              <div className="space-y-2">
                <h4 className="font-medium">Interactive Example</h4>
                <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
                  {`<button className="shadow-sm hover:shadow-md transition-shadow duration-200 rounded-lg px-4 py-2">
 Elevation increases on hover
</button>`}
                </pre>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}

function ElevationCard({ level }: { level: number }) {
  const { selectedMaterial } = useMaterial()
  const materialClass = selectedMaterial?.className || ""

  const shadowClasses = [
    "shadow-none", // Level 0
    "shadow-sm", // Level 1
    "shadow-md", // Level 2
    "shadow-lg", // Level 3
  ]

  return (
    <div className="flex flex-col items-center space-y-2 p-3">
      <div
        className={cn(
          "w-full aspect-square rounded-lg border flex items-center justify-center bg-background-primary p-8",
          shadowClasses[level],
          materialClass,
        )}
      >
        <span className="text-sm font-medium">Elevation {level}</span>
      </div>
      <span className="text-xs text-muted-foreground">Level {level}</span>
    </div>
  )
}