"use client"

import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertActions,
} from "@/components/ui/alert-compound"
import { Button } from "@/components/ui/button"
import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { Info, AlertCircle, AlertTriangle, CheckCircle } from "lucide-react"
import { commonProperties, getIconByName, getActualValue } from "@/utils/component-properties"

export function AlertsSection() {
  // Define alert properties
  const alertProperties = [
    {
      name: "variant",
      type: "select",
      options: ["Default", "Destructive", "Warning", "Success", "Info"],
      defaultValue: "default",
      label: "Variant",
      description: "The visual style of the alert",
    },
    {
      name: "title",
      type: "text",
      defaultValue: "Alert Title",
      label: "Title",
      description: "The title of the alert",
    },
    {
      name: "description",
      type: "textarea",
      defaultValue: "This is an alert message with additional information.",
      label: "Description",
      description: "The description text for the alert",
    },
    commonProperties.icon,
    {
      name: "withActions",
      type: "boolean",
      defaultValue: false,
      label: "Include Actions",
      description: "Whether to include action buttons",
    },
  ]

  // Map variant to icon if not specified
  const getDefaultIcon = (variant: string) => {
    const actualVariant = getActualValue(variant)
    switch (actualVariant) {
      case "destructive":
        return "AlertCircle"
      case "warning":
        return "AlertTriangle"
      case "success":
        return "CheckCircle"
      case "info":
        return "Info"
      default:
        return "Info"
    }
  }

  // Render alert based on properties
  const renderAlert = (props: Record<string, any>) => {
    const actualVariant = getActualValue(props.variant)
    const actualIcon = getActualValue(props.icon)
    const iconName = actualIcon === "none" ? getDefaultIcon(props.variant) : props.icon
    const icon = getIconByName(iconName)

    return (
      <Alert variant={actualVariant}>
        <AlertIcon icon={icon} />
        <AlertContent>
          <AlertTitle>{props.title}</AlertTitle>
          <AlertDescription>{props.description}</AlertDescription>
          {props.withActions && (
            <AlertActions>
              <Button size="sm" variant="outline">
                Dismiss
              </Button>
              <Button size="sm">Action</Button>
            </AlertActions>
          )}
        </AlertContent>
      </Alert>
    )
  }

  // Generate alert code
  const generateAlertCode = (props: Record<string, any>) => {
    const actualVariant = getActualValue(props.variant)
    const actualIcon = getActualValue(props.icon)
    const iconName = actualIcon === "none" ? getDefaultIcon(props.variant) : props.icon

    let code = `import {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertTitle,\n  AlertDescription`

    if (props.withActions) {
      code += `,\n  AlertActions`
    }

    code += `\n} from "@/components/ui/alert-compound"\n`
    code += `import { ${iconName} } from "lucide-react"\n`

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

    code += `\n<Alert${actualVariant !== "default" ? ` variant="${actualVariant}"` : ""}>\n`
    code += `  <AlertIcon icon={<${iconName} className="h-4 w-4" />} />\n`
    code += `  <AlertContent>\n`
    code += `    <AlertTitle>${props.title}</AlertTitle>\n`
    code += `    <AlertDescription>${props.description}</AlertDescription>\n`

    if (props.withActions) {
      code += `    <AlertActions>\n`
      code += `      <Button size="sm" variant="outline">Dismiss</Button>\n`
      code += `      <Button size="sm">Action</Button>\n`
      code += `    </AlertActions>\n`
    }

    code += `  </AlertContent>\n`
    code += `</Alert>`

    return code
  }

  return (
    <section id="alerts" className="scroll-mt-12">
      <SectionHeading title="Alert" description="Provide contextual feedback messages for typical user actions." />

      <div className="space-y-8">
        <ComponentContainer
          title="Interactive Alert"
          description="Customize the alert properties using the panel."
          properties={alertProperties}
          renderComponent={renderAlert}
          generateCode={generateAlertCode}
        >
          <Alert>
            <AlertIcon icon={<Info className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Alert Title</AlertTitle>
              <AlertDescription>This is an alert message with additional information.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Default Alert"
          description="A basic informational alert."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { Info } from 'lucide-react'

<Alert>
  <AlertIcon icon={<Info className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert>
            <AlertIcon icon={<Info className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Heads up!</AlertTitle>
              <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Info Alert"
          description="Used for general information and updates."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { Info } from 'lucide-react'

<Alert variant="info">
  <AlertIcon icon={<Info className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>This action will update your current settings.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="info">
            <AlertIcon icon={<Info className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Information</AlertTitle>
              <AlertDescription>This action will update your current settings.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Error Alert"
          description="Used for error messages and critical issues."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { AlertCircle } from 'lucide-react'

<Alert variant="destructive">
  <AlertIcon icon={<AlertCircle className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="destructive">
            <AlertIcon icon={<AlertCircle className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Warning Alert"
          description="Used for warnings and potential issues."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { AlertTriangle } from 'lucide-react'

<Alert variant="warning">
  <AlertIcon icon={<AlertTriangle className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>Your storage is almost full. Please free up some space.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="warning">
            <AlertIcon icon={<AlertTriangle className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Warning</AlertTitle>
              <AlertDescription>Your storage is almost full. Please free up some space.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Success Alert"
          description="Used for success messages and confirmations."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { CheckCircle } from 'lucide-react'

<Alert variant="success">
  <AlertIcon icon={<CheckCircle className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Your changes have been successfully saved.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="success">
            <AlertIcon icon={<CheckCircle className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Success</AlertTitle>
              <AlertDescription>Your changes have been successfully saved.</AlertDescription>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Alert with Actions"
          description="Alert with interactive action buttons."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertActions,
} from "@/components/ui/alert-compound"
import { Button } from "@/components/ui/button"
import { Info } from 'lucide-react'

<Alert variant="info">
  <AlertIcon icon={<Info className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>A new software update is available.</AlertDescription>
    <AlertActions>
      <Button size="sm" variant="outline">Later</Button>
      <Button size="sm">Update Now</Button>
    </AlertActions>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="info">
            <AlertIcon icon={<Info className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Information</AlertTitle>
              <AlertDescription>A new software update is available.</AlertDescription>
              <AlertActions>
                <Button size="sm" variant="outline">
                  Later
                </Button>
                <Button size="sm">Update Now</Button>
              </AlertActions>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Warning Alert with Action"
          description="Warning alert with a single action button."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertActions,
} from "@/components/ui/alert-compound"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from 'lucide-react'

<Alert variant="warning">
  <AlertIcon icon={<AlertTriangle className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>Your account is about to expire.</AlertDescription>
    <AlertActions>
      <Button size="sm">Renew Subscription</Button>
    </AlertActions>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="warning">
            <AlertIcon icon={<AlertTriangle className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>Warning</AlertTitle>
              <AlertDescription>Your account is about to expire.</AlertDescription>
              <AlertActions>
                <Button size="sm">Renew Subscription</Button>
              </AlertActions>
            </AlertContent>
          </Alert>
        </ComponentContainer>

        <ComponentContainer
          title="Alert with Long Content"
          description="Alert with a long title to demonstrate content-based height."
          code={`import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert-compound"
import { Info } from 'lucide-react'

<Alert variant="info">
  <AlertIcon icon={<Info className="h-4 w-4" />} />
  <AlertContent>
    <AlertTitle>This is a very long alert title that will wrap to multiple lines to demonstrate that the alert height is determined by its content</AlertTitle>
    <AlertDescription>The icon should remain vertically centered with the first line of the title, and the alert should expand to fit all content.</AlertDescription>
  </AlertContent>
</Alert>`}
        >
          <Alert variant="info">
            <AlertIcon icon={<Info className="h-4 w-4" />} />
            <AlertContent>
              <AlertTitle>
                This is a very long alert title that will wrap to multiple lines to demonstrate that the alert height is
                determined by its content
              </AlertTitle>
              <AlertDescription>
                The icon should remain vertically centered with the first line of the title, and the alert should expand
                to fit all content.
              </AlertDescription>
            </AlertContent>
          </Alert>
        </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 {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertActions,
} from "@/components/ui/alert-compound"`}</code>
          </pre>
        </div>
      </div>
    </section>
  )
}