"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Download, Package, Zap, Settings, Blocks, Palette } from "lucide-react"
import { exportPackage } from "@/utils/export-packages"
import { useColorPalette } from "@/contexts/color-context"
import { useDesign } from "@/contexts/design-context"
import { useMaterial } from "@/contexts/material-context"

export function ExportPackagesButton() {
  const [isExporting, setIsExporting] = useState(false)
  const [exportType, setExportType] = useState<"starter" | "full" | null>(null)
  const { primaryColor } = useColorPalette()
  const { borderRadius, font } = useDesign()
  const { selectedMaterial } = useMaterial()

  const handleExport = async (packageType: "starter" | "full") => {
    setIsExporting(true)
    setExportType(packageType)

    try {
      const settings = {
        primaryColor,
        borderRadius,
        font,
        materialType: selectedMaterial?.name.toLowerCase() || "flat",
        packageType,
      }

      await exportPackage(settings)

      // Show success message
      setTimeout(() => {
        setIsExporting(false)
        setExportType(null)
      }, 2000)
    } catch (error) {
      console.error("Export failed:", error)
      setIsExporting(false)
      setExportType(null)
    }
  }

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button className="gap-2">
          <Download className="h-4 w-4" />
          Export Packages
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-3xl">
        <DialogHeader className="mb-4">
          <DialogTitle className="text-xl">Export Your Design System</DialogTitle>
          <DialogDescription className="text-sm">
            Choose the package that best fits your project needs
          </DialogDescription>
        </DialogHeader>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Starter Kit */}
          <Card className="relative border shadow-sm hover:shadow-md transition-shadow">
            <CardHeader className="p-4 pb-2 space-y-1">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base">Starter Kit</CardTitle>
                <Badge variant="secondary" className="text-xs font-normal">
                  Free
                </Badge>
              </div>
              <CardDescription className="text-xs">Essential components & foundation</CardDescription>
            </CardHeader>
            <CardContent className="p-4 pt-2 space-y-3">
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <Palette className="h-3.5 w-3.5 text-green-600" />
                  <span>Foundation (Colors, Typography)</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <Zap className="h-3.5 w-3.5 text-green-600" />
                  <span>20+ Production-ready Components</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <Package className="h-3.5 w-3.5 text-green-600" />
                  <span>Current Customizations Applied</span>
                </div>
              </div>

              <Button size="sm" className="w-full mt-2" onClick={() => handleExport("starter")} disabled={isExporting}>
                {isExporting && exportType === "starter" ? (
                  "Exporting..."
                ) : (
                  <>
                    <Download className="h-3.5 w-3.5 mr-1.5" />
                    Download Starter Kit
                  </>
                )}
              </Button>
            </CardContent>
          </Card>

          {/* Full Package */}
          <Card className="relative border-primary shadow-sm hover:shadow-md transition-shadow">
            <CardHeader className="p-4 pb-2 space-y-1">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base">Full Package</CardTitle>
                <Badge className="text-xs font-normal">Recommended</Badge>
              </div>
              <CardDescription className="text-xs">Complete design system with controls</CardDescription>
            </CardHeader>
            <CardContent className="p-4 pt-2 space-y-3">
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <Package className="h-3.5 w-3.5 text-green-600" />
                  <span>Everything in Starter Kit</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <Settings className="h-3.5 w-3.5 text-green-600" />
                  <span>Live Design Controls Interface</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <Blocks className="h-3.5 w-3.5 text-green-600" />
                  <span>Pre-built Page Blocks & Templates</span>
                </div>
              </div>

              <Button
                size="sm"
                className="w-full mt-2 bg-primary text-primary-foreground hover:bg-primary/90"
                onClick={() => handleExport("full")}
                disabled={isExporting}
              >
                {isExporting && exportType === "full" ? (
                  "Exporting..."
                ) : (
                  <>
                    <Download className="h-3.5 w-3.5 mr-1.5" />
                    Download Full Package
                  </>
                )}
              </Button>
            </CardContent>
          </Card>
        </div>

        <div className="mt-4 p-3 bg-muted/50 rounded-md text-xs text-muted-foreground">
          Both packages include all necessary files to run your design system locally.
        </div>
      </DialogContent>
    </Dialog>
  )
}