'use client'

import {
  Box,
  Check,
  Compass,
  Copy,
  Eye,
  Layers,
  Loader2,
  MousePointerClick,
  Palette,
  RotateCcw,
  Ruler,
  Save,
  Sparkles,
} from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
import { toast } from 'sonner'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Textarea } from '@/components/ui/textarea'

interface NitroEditorDialogProps {
  classname: string
  open: boolean
  onOpenChange: (open: boolean) => void
}

// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
function updateNested(obj: any, path: string, value: unknown): any {
  const clone = JSON.parse(JSON.stringify(obj))
  const keys = path.split('.')
  let current = clone
  for (let i = 0; i < keys.length - 1; i++) {
    if (!current[keys[i]]) current[keys[i]] = {}
    current = current[keys[i]]
  }
  current[keys[keys.length - 1]] = value
  return clone
}

// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
function getNested(obj: any, path: string, fallback?: unknown): any {
  const keys = path.split('.')
  let current = obj
  for (const key of keys) {
    if (current == null || typeof current !== 'object') return fallback
    current = current[key]
  }
  return current ?? fallback
}

const ALL_DIRECTIONS = [0, 1, 2, 3, 4, 5, 6, 7]
const DIR_LABELS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']

function hexToColor(hex: string): string {
  return `#${hex.padStart(6, '0')}`
}

function CopyClassname({ value }: { value: string }) {
  const [copied, setCopied] = useState(false)
  return (
    <button
      type="button"
      className="flex items-center gap-1.5 font-mono text-sm text-muted-foreground mt-0.5 hover:text-foreground transition-colors"
      onClick={() => {
        navigator.clipboard.writeText(value)
        setCopied(true)
        setTimeout(() => setCopied(false), 1500)
      }}
    >
      <span className="truncate">{value}</span>
      {copied ? (
        <Check className="w-3 h-3 text-[var(--admin-success)] shrink-0" />
      ) : (
        <Copy className="w-3 h-3 shrink-0" />
      )}
    </button>
  )
}

export function NitroEditorDialog({ classname, open, onOpenChange }: NitroEditorDialogProps) {
  // biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
  const [metadata, setMetadata] = useState<any>(null)
  // biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
  const [originalMetadata, setOriginalMetadata] = useState<any>(null)
  const [jsonText, setJsonText] = useState('')
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [activeTab, setActiveTab] = useState<string>('visual')
  const [flags, setFlags] = useState({ canstandon: false, cansiton: false, canlayon: false })
  const [originalFlags, setOriginalFlags] = useState({
    canstandon: false,
    cansiton: false,
    canlayon: false,
  })
  const [jsonError, setJsonError] = useState<string | null>(null)

  const fetchMetadata = useCallback(async () => {
    if (!classname) return
    setLoading(true)
    setJsonError(null)
    try {
      const res = await fetch(
        `/api/admin/import/furni/nitro-editor?classname=${encodeURIComponent(classname)}`,
      )
      if (!res.ok) {
        const err = await res.json().catch(() => ({}))
        toast.error(err.error || 'Failed to load .nitro metadata')
        onOpenChange(false)
        return
      }
      const data = await res.json()
      setMetadata(data.metadata)
      setOriginalMetadata(JSON.parse(JSON.stringify(data.metadata)))
      setJsonText(JSON.stringify(data.metadata, null, 2))
      setFlags(data.flags)
      setOriginalFlags({ ...data.flags })
    } catch {
      toast.error('Network error loading .nitro metadata')
      onOpenChange(false)
    } finally {
      setLoading(false)
    }
  }, [classname, onOpenChange])

  useEffect(() => {
    if (open && classname) {
      setActiveTab('visual')
      fetchMetadata()
    }
  }, [open, classname, fetchMetadata])

  const handleTabChange = (newTab: string) => {
    if (activeTab === 'json' && newTab === 'visual') {
      try {
        const parsed = JSON.parse(jsonText)
        setMetadata(parsed)
        setJsonError(null)
      } catch {
        toast.error('Invalid JSON — fix it before switching to Visual tab')
        return
      }
    } else if (activeTab === 'visual' && newTab === 'json') {
      setJsonText(JSON.stringify(metadata, null, 2))
    }
    setActiveTab(newTab)
  }

  const handleReset = () => {
    if (!originalMetadata) return
    setMetadata(JSON.parse(JSON.stringify(originalMetadata)))
    setFlags({ ...originalFlags })
    setJsonText(JSON.stringify(originalMetadata, null, 2))
    toast.info('Reset to original values')
  }

  const handleSave = async () => {
    let metadataToSave = metadata

    if (activeTab === 'json') {
      try {
        metadataToSave = JSON.parse(jsonText)
      } catch {
        toast.error('Invalid JSON')
        return
      }
    }

    setSaving(true)
    try {
      const res = await fetch('/api/admin/import/furni/nitro-editor', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          classname,
          metadata: metadataToSave,
          ...flags,
        }),
      })

      if (!res.ok) {
        const err = await res.json().catch(() => ({}))
        toast.error(err.error || 'Save failed')
        return
      }

      toast.success('Nitro metadata salvato')
      setMetadata(metadataToSave)
      setOriginalMetadata(JSON.parse(JSON.stringify(metadataToSave)))
      setOriginalFlags({ ...flags })
      setJsonText(JSON.stringify(metadataToSave, null, 2))
    } catch {
      toast.error('Network error')
    } finally {
      setSaving(false)
    }
  }

  // ── Visual tab helpers ──

  const dims = metadata
    ? getNested(metadata, 'logic.model.dimensions', { x: 1, y: 1, z: 0 })
    : { x: 1, y: 1, z: 0 }
  const directions: number[] = metadata ? getNested(metadata, 'logic.model.directions', [0]) : [0]

  const setDim = (axis: 'x' | 'y' | 'z', value: string) => {
    const num = axis === 'z' ? parseFloat(value) || 0 : parseInt(value, 10) || 0
    setMetadata((prev: unknown) => updateNested(prev, `logic.model.dimensions.${axis}`, num))
  }

  const toggleDirection = (dir: number) => {
    const current: number[] = getNested(metadata, 'logic.model.directions', [0])
    const next = current.includes(dir)
      ? current.filter((d: number) => d !== dir)
      : [...current, dir].sort((a: number, b: number) => a - b)
    if (next.length === 0) return
    setMetadata((prev: unknown) => updateNested(prev, 'logic.model.directions', next))
  }

  // Get visualization with size=64 for layer/color editing
  // biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
  const viz64 = metadata?.visualizations?.find((v: any) => v.size === 64)
  const viz64Index =
    metadata?.visualizations?.findIndex((v: { size: number }) => v.size === 64) ?? -1

  const layerCount = viz64?.layers ? Object.keys(viz64.layers).length : 0
  const colorCount = viz64?.colors ? Object.keys(viz64.colors).length : 0
  const animCount = viz64?.animations ? Object.keys(viz64.animations).length : 0

  const handleJsonTextChange = (value: string) => {
    setJsonText(value)
    try {
      JSON.parse(value)
      setJsonError(null)
    } catch (e) {
      setJsonError((e as Error).message)
    }
  }

  // Check if there are unsaved changes
  const hasChanges =
    metadata &&
    originalMetadata &&
    (JSON.stringify(metadata) !== JSON.stringify(originalMetadata) ||
      JSON.stringify(flags) !== JSON.stringify(originalFlags))

  // Furni preview URL
  const starIdx = classname.indexOf('*')
  const baseClassname = starIdx !== -1 ? classname.substring(0, starIdx) : classname

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-4xl max-h-[90vh] flex flex-col p-0 gap-0">
        {/* Header with preview */}
        <DialogHeader className="px-6 pt-5 pb-4 border-b bg-muted/30">
          <div className="flex items-start gap-4">
            {/* Furni preview */}
            <div
              className="w-20 h-20 rounded-lg border bg-card flex items-center justify-center shrink-0 overflow-hidden"
              style={{
                backgroundImage: 'url(/images/furni_floor.png)',
                backgroundRepeat: 'repeat',
                backgroundPosition: 'center',
              }}
            >
              <img
                src={`/swf/dcr/hof_furni/icons/${baseClassname}_icon.png`}
                alt={classname}
                className="max-w-[60px] max-h-[60px] drop-shadow-md"
                style={{ imageRendering: 'pixelated' }}
                onError={(e) => {
                  ;(e.target as HTMLImageElement).style.opacity = '0'
                }}
              />
            </div>
            <div className="flex-1 min-w-0">
              <DialogTitle className="text-lg">Edit Nitro</DialogTitle>
              <CopyClassname value={classname} />
              {/* Quick stats */}
              {metadata && (
                <div className="flex gap-2 mt-2 flex-wrap">
                  <Badge variant="outline" className="text-[10px] gap-1">
                    <Ruler className="w-2.5 h-2.5" />
                    {dims.x}×{dims.y}×{dims.z}
                  </Badge>
                  <Badge variant="outline" className="text-[10px] gap-1">
                    <Compass className="w-2.5 h-2.5" />
                    {directions.length} dir
                  </Badge>
                  <Badge variant="outline" className="text-[10px] gap-1">
                    <Layers className="w-2.5 h-2.5" />
                    {layerCount} layers
                  </Badge>
                  {colorCount > 0 && (
                    <Badge variant="outline" className="text-[10px] gap-1">
                      <Palette className="w-2.5 h-2.5" />
                      {colorCount} colori
                    </Badge>
                  )}
                  {animCount > 0 && (
                    <Badge variant="outline" className="text-[10px] gap-1">
                      <Sparkles className="w-2.5 h-2.5" />
                      {animCount} anim
                    </Badge>
                  )}
                  <Badge variant="outline" className="text-[10px] gap-1">
                    <Eye className="w-2.5 h-2.5" />
                    {metadata.visualizationType || '?'}
                  </Badge>
                </div>
              )}
            </div>
          </div>
        </DialogHeader>

        {loading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
          </div>
        ) : metadata ? (
          <Tabs
            value={activeTab}
            onValueChange={handleTabChange}
            className="flex-1 flex flex-col min-h-0"
          >
            <div className="px-6 pt-3 pb-0">
              <TabsList className="w-fit">
                <TabsTrigger value="visual" className="gap-1.5">
                  <Box className="w-3.5 h-3.5" />
                  Visual
                </TabsTrigger>
                <TabsTrigger value="json" className="gap-1.5">
                  {'{ }'}
                  JSON
                </TabsTrigger>
              </TabsList>
            </div>

            {/* ── Visual Tab ── */}
            <TabsContent value="visual" className="overflow-y-auto flex-1 px-6 py-4 space-y-5">
              {/* Dimensions + Interaction in 2-column layout */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                {/* Dimensions card */}
                <section className="rounded-lg border bg-card p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Ruler className="w-4 h-4 text-muted-foreground" />
                    <h3 className="text-sm font-medium">Dimensioni</h3>
                  </div>
                  <div className="grid grid-cols-3 gap-3">
                    <div>
                      <Label htmlFor="dim-x" className="text-xs text-muted-foreground">
                        X (larghezza)
                      </Label>
                      <Input
                        id="dim-x"
                        type="number"
                        min={1}
                        value={dims.x}
                        onChange={(e) => setDim('x', e.target.value)}
                        className="mt-1"
                      />
                    </div>
                    <div>
                      <Label htmlFor="dim-y" className="text-xs text-muted-foreground">
                        Y (profondità)
                      </Label>
                      <Input
                        id="dim-y"
                        type="number"
                        min={1}
                        value={dims.y}
                        onChange={(e) => setDim('y', e.target.value)}
                        className="mt-1"
                      />
                    </div>
                    <div>
                      <Label htmlFor="dim-z" className="text-xs text-muted-foreground">
                        Z (altezza)
                      </Label>
                      <Input
                        id="dim-z"
                        type="number"
                        step={0.01}
                        min={0}
                        value={dims.z}
                        onChange={(e) => setDim('z', e.target.value)}
                        className="mt-1"
                      />
                    </div>
                  </div>
                </section>

                {/* Interaction card */}
                <section className="rounded-lg border bg-card p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <MousePointerClick className="w-4 h-4 text-muted-foreground" />
                    <h3 className="text-sm font-medium">Interazione</h3>
                  </div>
                  <div className="flex flex-col gap-3">
                    <div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
                      <span className="text-sm">Can Stand On</span>
                      <Switch
                        checked={flags.canstandon}
                        onCheckedChange={(v) => setFlags((f) => ({ ...f, canstandon: !!v }))}
                      />
                    </div>
                    <div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
                      <span className="text-sm">Can Sit On</span>
                      <Switch
                        checked={flags.cansiton}
                        onCheckedChange={(v) => setFlags((f) => ({ ...f, cansiton: !!v }))}
                      />
                    </div>
                    <div className="flex items-center justify-between rounded-md border px-3 py-2 hover:bg-muted/50 transition-colors">
                      <span className="text-sm">Can Lay On</span>
                      <Switch
                        checked={flags.canlayon}
                        onCheckedChange={(v) => setFlags((f) => ({ ...f, canlayon: !!v }))}
                      />
                    </div>
                  </div>
                </section>
              </div>

              {/* Directions - visual compass */}
              <section className="rounded-lg border bg-card p-4">
                <div className="flex items-center gap-2 mb-3">
                  <Compass className="w-4 h-4 text-muted-foreground" />
                  <h3 className="text-sm font-medium">Direzioni</h3>
                  <span className="text-xs text-muted-foreground ml-auto">
                    {directions.length} attive
                  </span>
                </div>
                <div className="flex items-center justify-center">
                  <div className="relative w-48 h-48">
                    {/* Compass circle */}
                    <div className="absolute inset-0 rounded-full border-2 border-muted" />
                    <div className="absolute inset-4 rounded-full border border-muted/50" />
                    {/* Direction buttons arranged in circle */}
                    {ALL_DIRECTIONS.map((dir) => {
                      const angle = (dir * 45 - 90) * (Math.PI / 180)
                      const r = 80
                      const x = 96 + r * Math.cos(angle) - 18
                      const y = 96 + r * Math.sin(angle) - 18
                      const isActive = directions.includes(dir)
                      return (
                        <button
                          type="button"
                          key={dir}
                          className={`absolute w-9 h-9 rounded-full border-2 flex flex-col items-center justify-center text-xs font-medium transition-all ${
                            isActive
                              ? 'bg-primary text-primary-foreground border-primary shadow-md scale-110'
                              : 'bg-card text-muted-foreground border-muted hover:border-foreground/30 hover:scale-105'
                          }`}
                          style={{ left: x, top: y }}
                          onClick={() => toggleDirection(dir)}
                        >
                          <span className="text-[9px] leading-none">{DIR_LABELS[dir]}</span>
                          <span className="text-[8px] leading-none opacity-60">{dir}</span>
                        </button>
                      )
                    })}
                    {/* Center label */}
                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="text-xs text-muted-foreground font-medium">
                        {directions.length}/8
                      </span>
                    </div>
                  </div>
                </div>
              </section>

              {/* Types */}
              <section className="rounded-lg border bg-card p-4">
                <div className="flex items-center gap-2 mb-3">
                  <Eye className="w-4 h-4 text-muted-foreground" />
                  <h3 className="text-sm font-medium">Tipo</h3>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Label htmlFor="viz-type" className="text-xs text-muted-foreground">
                      Visualization Type
                    </Label>
                    <Input
                      id="viz-type"
                      value={metadata.visualizationType || ''}
                      onChange={(e) =>
                        setMetadata((prev: unknown) =>
                          updateNested(prev, 'visualizationType', e.target.value),
                        )
                      }
                      className="mt-1 font-mono text-sm"
                    />
                  </div>
                  <div>
                    <Label htmlFor="logic-type" className="text-xs text-muted-foreground">
                      Logic Type
                    </Label>
                    <Input
                      id="logic-type"
                      value={metadata.logicType || ''}
                      onChange={(e) =>
                        setMetadata((prev: unknown) =>
                          updateNested(prev, 'logicType', e.target.value),
                        )
                      }
                      className="mt-1 font-mono text-sm"
                    />
                  </div>
                </div>
              </section>

              {/* Layers */}
              {viz64?.layers && layerCount > 0 && (
                <section className="rounded-lg border bg-card p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Layers className="w-4 h-4 text-muted-foreground" />
                    <h3 className="text-sm font-medium">Layer</h3>
                    <Badge variant="secondary" className="text-[10px] ml-auto">
                      {layerCount}
                    </Badge>
                  </div>
                  <div className="rounded-md border overflow-hidden">
                    {/* Header */}
                    <div className="grid grid-cols-4 gap-2 items-center text-[10px] font-medium text-muted-foreground uppercase tracking-wider bg-muted/50 px-3 py-1.5">
                      <span>Layer</span>
                      <span>Z-Index</span>
                      <span>Alpha</span>
                      <span>Ink</span>
                    </div>
                    {Object.entries(viz64.layers).map(([layerId, layerData], idx) => {
                      const layer = layerData as Record<string, unknown>
                      return (
                        <div
                          key={layerId}
                          className={`grid grid-cols-4 gap-2 items-center text-sm px-3 py-1.5 ${
                            idx % 2 === 0 ? 'bg-card' : 'bg-muted/20'
                          }`}
                        >
                          <span className="font-mono text-xs">
                            <Badge variant="outline" className="text-[10px] px-1.5">
                              #{layerId}
                            </Badge>
                          </span>
                          <Input
                            type="number"
                            className="h-7 text-xs"
                            value={(layer.z as number) ?? 0}
                            onChange={(e) => {
                              setMetadata((prev: unknown) =>
                                updateNested(
                                  prev,
                                  `visualizations.${viz64Index}.layers.${layerId}.z`,
                                  parseInt(e.target.value, 10) || 0,
                                ),
                              )
                            }}
                          />
                          <Input
                            type="number"
                            className="h-7 text-xs"
                            min={0}
                            max={255}
                            value={(layer.alpha as number) ?? 255}
                            onChange={(e) => {
                              setMetadata((prev: unknown) =>
                                updateNested(
                                  prev,
                                  `visualizations.${viz64Index}.layers.${layerId}.alpha`,
                                  parseInt(e.target.value, 10) || 0,
                                ),
                              )
                            }}
                          />
                          <Input
                            className="h-7 text-xs font-mono"
                            value={(layer.ink as string) ?? ''}
                            placeholder="—"
                            onChange={(e) => {
                              setMetadata((prev: unknown) =>
                                updateNested(
                                  prev,
                                  `visualizations.${viz64Index}.layers.${layerId}.ink`,
                                  e.target.value || undefined,
                                ),
                              )
                            }}
                          />
                        </div>
                      )
                    })}
                  </div>
                </section>
              )}

              {/* Colors */}
              {viz64?.colors && colorCount > 0 && (
                <section className="rounded-lg border bg-card p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Palette className="w-4 h-4 text-muted-foreground" />
                    <h3 className="text-sm font-medium">Colori</h3>
                    <Badge variant="secondary" className="text-[10px] ml-auto">
                      {colorCount} varianti
                    </Badge>
                  </div>
                  <div className="space-y-3">
                    {Object.entries(viz64.colors).map(([colorId, colorLayers]) => (
                      <div key={colorId} className="rounded-md border p-3">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-xs font-medium">Variante #{colorId}</span>
                          {/* Color preview dots */}
                          <div className="flex gap-1 ml-auto">
                            {Object.values(colorLayers as Record<string, { color: number }>).map(
                              (lc, i) => (
                                <div
                                  // biome-ignore lint/suspicious/noArrayIndexKey: color preview dots, position is the identity
                                  key={i}
                                  className="w-4 h-4 rounded-full border border-border shadow-sm"
                                  style={{
                                    backgroundColor: hexToColor(
                                      typeof lc.color === 'number'
                                        ? lc.color.toString(16).padStart(6, '0')
                                        : '000000',
                                    ),
                                  }}
                                />
                              ),
                            )}
                          </div>
                        </div>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                          {Object.entries(colorLayers as Record<string, { color: number }>).map(
                            ([layerId, layerColor]) => (
                              <div key={layerId} className="flex items-center gap-2">
                                <Label className="text-xs text-muted-foreground shrink-0 w-6">
                                  L{layerId}
                                </Label>
                                <div className="relative flex-1">
                                  <Input
                                    className="h-7 text-xs font-mono pl-8"
                                    value={
                                      typeof layerColor.color === 'number'
                                        ? layerColor.color
                                            .toString(16)
                                            .padStart(6, '0')
                                            .toUpperCase()
                                        : String(layerColor.color)
                                    }
                                    onChange={(e) => {
                                      const hex = e.target.value
                                        .replace(/[^0-9a-fA-F]/g, '')
                                        .slice(0, 6)
                                      const num = parseInt(hex, 16) || 0
                                      setMetadata((prev: unknown) =>
                                        updateNested(
                                          prev,
                                          `visualizations.${viz64Index}.colors.${colorId}.${layerId}.color`,
                                          num,
                                        ),
                                      )
                                    }}
                                  />
                                  {/* Color swatch inside input */}
                                  <div
                                    className="absolute left-1.5 top-1/2 -translate-y-1/2 w-4 h-4 rounded border border-border"
                                    style={{
                                      backgroundColor: hexToColor(
                                        typeof layerColor.color === 'number'
                                          ? layerColor.color.toString(16).padStart(6, '0')
                                          : '000000',
                                      ),
                                    }}
                                  />
                                </div>
                              </div>
                            ),
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}
            </TabsContent>

            {/* ── JSON Tab ── */}
            <TabsContent value="json" className="flex-1 flex flex-col min-h-0 px-6 py-4">
              <div className="relative flex-1 min-h-0">
                <Textarea
                  className="h-full min-h-[400px] font-mono text-xs resize-none"
                  value={jsonText}
                  onChange={(e) => handleJsonTextChange(e.target.value)}
                  spellCheck={false}
                />
                {jsonError && (
                  <div className="absolute bottom-2 left-2 right-2 rounded-md bg-destructive/10 border border-destructive/20 px-3 py-1.5 text-xs text-destructive">
                    {jsonError}
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        ) : null}

        <DialogFooter className="px-6 py-4 border-t bg-muted/30">
          <div className="flex items-center gap-2 w-full">
            {hasChanges && (
              <Badge
                variant="secondary"
                className="text-[10px] gap-1 animate-[pulse_1s_ease-in-out_1]"
              >
                Modifiche non salvate
              </Badge>
            )}
            <div className="flex-1" />
            <Button
              variant="ghost"
              size="sm"
              onClick={handleReset}
              disabled={saving || loading || !metadata || !hasChanges}
              className="gap-1.5"
            >
              <RotateCcw className="w-3.5 h-3.5" />
              Reset
            </Button>
            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
              Annulla
            </Button>
            <Button
              onClick={handleSave}
              disabled={saving || loading || !metadata}
              className="gap-1.5"
            >
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
              Salva
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}