'use client'

import {
  AlertCircle,
  Check,
  Download,
  Loader2,
  Package,
  Search,
  Shirt,
  Trash2,
  X,
} from 'lucide-react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'

// ── Shared types ─────────────────────────────────────────────────────────────

interface FigureItem {
  lib: string
  revision: number
  nitroExists: boolean
  previewType?: string
  previewId?: number
}

interface ClothingSetItem {
  setType: string
  setId: number
  gender: string
  club: number
  sellable: boolean
  present: boolean
}

type Mode = 'libs' | 'sets'

const PER_PAGE = 100

// ── Shared SSE reader ─────────────────────────────────────────────────────────

async function runSseImport(
  url: string,
  body: unknown,
  onDone: (label: string) => void,
  onComplete: (succeeded: number, failed: number) => void,
): Promise<void> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })
  if (!res.body) {
    toast.error('No response stream')
    return
  }
  const reader = res.body.getReader()
  const decoder = new TextDecoder()
  let buf = ''
  let succeeded = 0
  let failed = 0
  while (true) {
    const { value, done: streamDone } = await reader.read()
    if (streamDone) break
    buf += decoder.decode(value, { stream: true })
    const parts = buf.split('\n\n')
    buf = parts.pop() ?? ''
    for (const part of parts) {
      if (!part.startsWith('data: ')) continue
      const evt = JSON.parse(part.slice(6))
      if (evt.type === 'item_progress' && (evt.status === 'done' || evt.status === 'failed')) {
        onDone(evt.classname)
      }
      if (evt.type === 'batch_complete') {
        succeeded = evt.succeeded
        failed = evt.failed
      }
    }
  }
  onComplete(succeeded, failed)
}

// ── Avatar preview (renders a mini avatar wearing the item) ───────────────────

// A default dressed avatar; the previewed part overrides/adds its slot so the
// item is shown on a complete figure.
const BASE_FIGURE: Record<string, string> = {
  hd: 'hd-180-1',
  hr: 'hr-828-45',
  ch: 'ch-665-92',
  lg: 'lg-700-82',
  sh: 'sh-705-62',
}

// Head-worn slots → render head-only (zoomed) so the item fills the frame;
// everything else renders the full body.
const HEAD_TYPES = new Set(['hd', 'hr', 'ha', 'he', 'ea', 'fa', 'fc'])

function buildPreviewFigure(type: string, id: number): string {
  const parts: Record<string, string> = { ...BASE_FIGURE }
  parts[type] = `${type}-${id}` // default color
  return Object.values(parts).join('.')
}

function AvatarPreview({ type, id }: { type?: string; id?: number }) {
  const [failed, setFailed] = useState(false)
  if (failed || !type || id === undefined) {
    return <Shirt className="w-8 h-8 text-muted-foreground/60" />
  }
  const figure = buildPreviewFigure(type, id)
  const headOnly = HEAD_TYPES.has(type) ? '&headonly=1' : ''
  return (
    // biome-ignore lint/performance/noImgElement: dynamic avatar imaging, not a Next asset
    <img
      src={`/api/imaging/avatar?figure=${encodeURIComponent(figure)}&size=l&direction=2&head_direction=3${headOnly}`}
      alt={`${type}-${id}`}
      className="max-h-full object-contain image-pixelated"
      onError={() => setFailed(true)}
    />
  )
}

// ── Librerie (v1) view ────────────────────────────────────────────────────────

function LibsView() {
  const [searchTerm, setSearchTerm] = useState('')
  const [activeSearch, setActiveSearch] = useState('')
  const [items, setItems] = useState<FigureItem[]>([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
  const [busyLib, setBusyLib] = useState<string | null>(null)

  const fetchItems = useCallback(async (search: string, pageNum: number) => {
    setLoading(true)
    setError('')
    try {
      const params = new URLSearchParams({ page: String(pageNum) })
      if (search) params.set('search', search)
      const res = await fetch(`/api/admin/import/clothing?${params}`)
      const data = await res.json()
      if (!res.ok) {
        setError(data.error || 'Failed to load')
        return
      }
      setItems(data.items || [])
      setTotal(data.meta?.total || 0)
      setSelected(new Set())
    } catch {
      setError('Network error')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchItems('', 1)
  }, [fetchItems])

  function doSearch() {
    setActiveSearch(searchTerm)
    setPage(1)
    fetchItems(searchTerm, 1)
  }

  function goPage(dir: 'prev' | 'next') {
    const next = dir === 'next' ? page + 1 : Math.max(1, page - 1)
    setPage(next)
    fetchItems(activeSearch, next)
  }

  const importable = useMemo(() => items.filter((p) => !p.nitroExists), [items])
  const importedCount = useMemo(() => items.filter((p) => p.nitroExists).length, [items])
  const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1)

  function toggle(lib: string) {
    setSelected((prev) => {
      const n = new Set(prev)
      if (n.has(lib)) n.delete(lib)
      else n.add(lib)
      return n
    })
  }

  function markDone(lib: string) {
    setItems((prev) => prev.map((p) => (p.lib === lib ? { ...p, nitroExists: true } : p)))
  }

  async function importViaSse(toImport: FigureItem[]) {
    setBatchProgress({ done: 0, total: toImport.length })
    let done = 0
    await runSseImport(
      '/api/admin/import/clothing/batch',
      { items: toImport, concurrency: 3 },
      (label) => {
        done++
        markDone(label)
        setBatchProgress({ done, total: toImport.length })
      },
      (succeeded, failed) => {
        setBatchProgress(null)
        setSelected(new Set())
        if (succeeded > 0) toast.success(`${succeeded} libraries imported`)
        if (failed > 0) toast.error(`${failed} failed`)
      },
    )
    setBatchProgress(null)
  }

  async function importOne(p: FigureItem) {
    setBusyLib(p.lib)
    try {
      await importViaSse([p])
    } finally {
      setBusyLib(null)
    }
  }

  async function importSelected() {
    const toImport = items.filter((p) => selected.has(p.lib) && !p.nitroExists)
    if (toImport.length === 0) return
    await importViaSse(toImport)
  }

  async function remove(p: FigureItem) {
    setBusyLib(p.lib)
    try {
      const res = await fetch(`/api/admin/import/clothing?lib=${encodeURIComponent(p.lib)}`, {
        method: 'DELETE',
      })
      const data = await res.json()
      if (res.ok) {
        toast.success(`${p.lib} removed`)
        setItems((prev) => prev.map((x) => (x.lib === p.lib ? { ...x, nitroExists: false } : x)))
      } else {
        toast.error(data.error || 'Delete failed')
      }
    } finally {
      setBusyLib(null)
    }
  }

  return (
    <div className="space-y-4">
      {(items.length > 0 || total > 0) && (
        <div className="flex items-center gap-3 flex-wrap">
          <div className="flex items-center gap-1.5 text-sm">
            <Package className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{total}</span>
            <span className="text-muted-foreground">libraries</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <Check className="h-4 w-4 text-emerald-500" />
            <span className="font-medium text-emerald-600">{importedCount}</span>
            <span className="text-muted-foreground">on this page</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <Download className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{importable.length}</span>
            <span className="text-muted-foreground">missing here</span>
          </div>
        </div>
      )}

      <div className="flex gap-2 flex-wrap">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search libraries (e.g. Hair_F, shirt_M)..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') doSearch()
              if (e.key === 'Escape') {
                setSearchTerm('')
                setActiveSearch('')
                setPage(1)
                fetchItems('', 1)
              }
            }}
            className="pl-9 pr-8"
          />
          {searchTerm && (
            <button
              type="button"
              onClick={() => {
                setSearchTerm('')
                setActiveSearch('')
                setPage(1)
                fetchItems('', 1)
              }}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
        <Button onClick={doSearch} size="sm" disabled={loading}>
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
        </Button>
      </div>

      {importable.length > 0 && (
        <div className="flex items-center gap-2 flex-wrap">
          <Button
            variant="outline"
            size="sm"
            className="text-xs h-8"
            disabled={!!batchProgress}
            onClick={() =>
              setSelected((prev) =>
                prev.size === importable.length ? new Set() : new Set(importable.map((p) => p.lib)),
              )
            }
          >
            {selected.size === importable.length
              ? 'Deselect page'
              : `Select page (${importable.length})`}
          </Button>
          {selected.size > 0 && (
            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
              {batchProgress ? (
                <Loader2 className="w-4 h-4 animate-spin mr-1" />
              ) : (
                <Download className="w-4 h-4 mr-1" />
              )}
              Import {selected.size} selected
            </Button>
          )}
          {batchProgress && (
            <span className="text-xs text-muted-foreground">
              {batchProgress.done}/{batchProgress.total}
            </span>
          )}
        </div>
      )}

      {error && (
        <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
          <AlertCircle className="w-4 h-4 shrink-0" />
          {error}
        </div>
      )}

      {!loading && items.length === 0 && !error && (
        <div className="text-center py-12 text-muted-foreground">
          <Shirt className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <p className="text-sm">
            No libraries found{activeSearch ? ` for "${activeSearch}"` : ''}
          </p>
        </div>
      )}

      {items.length > 0 && (
        <div
          className={cn(
            'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
            loading && 'opacity-50',
          )}
        >
          {items.map((p) => {
            const isSelected = selected.has(p.lib)
            return (
              <div
                key={p.lib}
                className={cn(
                  'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
                  p.nitroExists && 'shadow-[0_0_6px_rgba(34,197,94,0.15)]',
                  isSelected && 'ring-2 ring-primary border-primary',
                )}
              >
                {!p.nitroExists && (
                  <button
                    type="button"
                    onClick={() => toggle(p.lib)}
                    className={cn(
                      'absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
                      isSelected
                        ? 'bg-primary border-primary text-primary-foreground'
                        : 'bg-background/80 border-muted-foreground/30 hover:border-muted-foreground',
                    )}
                  >
                    {isSelected && <Check className="w-3 h-3" />}
                  </button>
                )}
                <div className="flex items-center justify-center h-28 bg-accent/20">
                  <AvatarPreview type={p.previewType} id={p.previewId} />
                </div>
                <div className="px-2.5 py-2 border-t space-y-1">
                  <div className="text-xs font-bold truncate" title={p.lib}>
                    {p.lib}
                  </div>
                  <div className="pt-1">
                    {p.nitroExists ? (
                      <div className="flex items-center gap-1">
                        <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
                          <Check className="w-2.5 h-2.5" />
                          Imported
                        </Badge>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-5 w-5 p-0 shrink-0"
                          title="Remove library"
                          disabled={busyLib === p.lib || !!batchProgress}
                          onClick={() => remove(p)}
                        >
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    ) : (
                      <Button
                        size="sm"
                        variant="outline"
                        className="w-full text-xs h-7"
                        disabled={busyLib === p.lib || !!batchProgress}
                        onClick={() => importOne(p)}
                      >
                        {busyLib === p.lib ? (
                          <Loader2 className="w-3 h-3 animate-spin mr-1" />
                        ) : (
                          <Download className="w-3 h-3 mr-1" />
                        )}
                        Import
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}

      {total > PER_PAGE && (
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">
            Page {page} / {lastPage}
          </span>
          <div className="flex gap-1">
            <Button
              variant="outline"
              size="sm"
              disabled={page <= 1 || loading}
              onClick={() => goPage('prev')}
            >
              &larr; Prev
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= lastPage || loading}
              onClick={() => goPage('next')}
            >
              Next &rarr;
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Vestiti / Sets (v2) view ──────────────────────────────────────────────────

function SetsView() {
  const [searchTerm, setSearchTerm] = useState('')
  const [activeSearch, setActiveSearch] = useState('')
  const [items, setItems] = useState<ClothingSetItem[]>([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [batchProgress, setBatchProgress] = useState<{ done: number; total: number } | null>(null)
  const [busyKey, setBusyKey] = useState<string | null>(null)

  function itemKey(it: ClothingSetItem): string {
    return `${it.setType}-${it.setId}`
  }

  const fetchItems = useCallback(async (search: string, pageNum: number) => {
    setLoading(true)
    setError('')
    try {
      const params = new URLSearchParams({ page: String(pageNum) })
      if (search) params.set('search', search)
      const res = await fetch(`/api/admin/import/clothing/sets?${params}`)
      const data = await res.json()
      if (!res.ok) {
        setError(data.error || 'Failed to load')
        return
      }
      setItems(data.items || [])
      setTotal(data.meta?.total || 0)
      setSelected(new Set())
    } catch {
      setError('Network error')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchItems('', 1)
  }, [fetchItems])

  function doSearch() {
    setActiveSearch(searchTerm)
    setPage(1)
    fetchItems(searchTerm, 1)
  }

  function goPage(dir: 'prev' | 'next') {
    const next = dir === 'next' ? page + 1 : Math.max(1, page - 1)
    setPage(next)
    fetchItems(activeSearch, next)
  }

  const importable = useMemo(() => items.filter((it) => !it.present), [items])
  const presentCount = useMemo(() => items.filter((it) => it.present).length, [items])
  const lastPage = Math.max(Math.ceil(total / PER_PAGE), 1)

  function toggle(key: string) {
    setSelected((prev) => {
      const n = new Set(prev)
      if (n.has(key)) n.delete(key)
      else n.add(key)
      return n
    })
  }

  function markDone(label: string) {
    setItems((prev) => prev.map((it) => (itemKey(it) === label ? { ...it, present: true } : it)))
  }

  async function importViaSse(toImport: ClothingSetItem[]) {
    setBatchProgress({ done: 0, total: toImport.length })
    let done = 0
    await runSseImport(
      '/api/admin/import/clothing/sets/batch',
      {
        items: toImport.map((it) => ({ setType: it.setType, setId: it.setId })),
        concurrency: 3,
      },
      (label) => {
        done++
        markDone(label)
        setBatchProgress({ done, total: toImport.length })
      },
      (succeeded, failed) => {
        setBatchProgress(null)
        setSelected(new Set())
        if (succeeded > 0) toast.success(`${succeeded} sets imported`)
        if (failed > 0) toast.error(`${failed} failed`)
      },
    )
    setBatchProgress(null)
  }

  async function importOne(it: ClothingSetItem) {
    const key = itemKey(it)
    setBusyKey(key)
    try {
      await importViaSse([it])
    } finally {
      setBusyKey(null)
    }
  }

  async function importSelected() {
    const toImport = items.filter((it) => selected.has(itemKey(it)) && !it.present)
    if (toImport.length === 0) return
    await importViaSse(toImport)
  }

  return (
    <div className="space-y-4">
      {(items.length > 0 || total > 0) && (
        <div className="flex items-center gap-3 flex-wrap">
          <div className="flex items-center gap-1.5 text-sm">
            <Package className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{total}</span>
            <span className="text-muted-foreground">sets</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <Check className="h-4 w-4 text-emerald-500" />
            <span className="font-medium text-emerald-600">{presentCount}</span>
            <span className="text-muted-foreground">on this page</span>
          </div>
          <div className="flex items-center gap-1.5 text-sm">
            <Download className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">{importable.length}</span>
            <span className="text-muted-foreground">missing here</span>
          </div>
        </div>
      )}

      <div className="flex gap-2 flex-wrap">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search by set id or type (e.g. hr, ch, 1027)..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') doSearch()
              if (e.key === 'Escape') {
                setSearchTerm('')
                setActiveSearch('')
                setPage(1)
                fetchItems('', 1)
              }
            }}
            className="pl-9 pr-8"
          />
          {searchTerm && (
            <button
              type="button"
              onClick={() => {
                setSearchTerm('')
                setActiveSearch('')
                setPage(1)
                fetchItems('', 1)
              }}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          )}
        </div>
        <Button onClick={doSearch} size="sm" disabled={loading}>
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
        </Button>
      </div>

      {importable.length > 0 && (
        <div className="flex items-center gap-2 flex-wrap">
          <Button
            variant="outline"
            size="sm"
            className="text-xs h-8"
            disabled={!!batchProgress}
            onClick={() =>
              setSelected((prev) =>
                prev.size === importable.length
                  ? new Set()
                  : new Set(importable.map((it) => itemKey(it))),
              )
            }
          >
            {selected.size === importable.length
              ? 'Deselect page'
              : `Select page (${importable.length})`}
          </Button>
          {selected.size > 0 && (
            <Button size="sm" className="h-8" onClick={importSelected} disabled={!!batchProgress}>
              {batchProgress ? (
                <Loader2 className="w-4 h-4 animate-spin mr-1" />
              ) : (
                <Download className="w-4 h-4 mr-1" />
              )}
              Import {selected.size} selected
            </Button>
          )}
          {batchProgress && (
            <span className="text-xs text-muted-foreground">
              {batchProgress.done}/{batchProgress.total}
            </span>
          )}
        </div>
      )}

      {error && (
        <div className="rounded-lg border px-4 py-3 text-sm bg-destructive/10 border-destructive/20 text-destructive flex items-center gap-2">
          <AlertCircle className="w-4 h-4 shrink-0" />
          {error}
        </div>
      )}

      {!loading && items.length === 0 && !error && (
        <div className="text-center py-12 text-muted-foreground">
          <Shirt className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <p className="text-sm">No sets found{activeSearch ? ` for "${activeSearch}"` : ''}</p>
        </div>
      )}

      {items.length > 0 && (
        <div
          className={cn(
            'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3',
            loading && 'opacity-50',
          )}
        >
          {items.map((it) => {
            const key = itemKey(it)
            const isSelected = selected.has(key)
            return (
              <div
                key={key}
                className={cn(
                  'rounded-lg border overflow-hidden bg-card relative hover:border-border transition-all',
                  it.present && 'shadow-[0_0_6px_rgba(34,197,94,0.15)]',
                  isSelected && 'ring-2 ring-primary border-primary',
                )}
              >
                {!it.present && (
                  <button
                    type="button"
                    onClick={() => toggle(key)}
                    className={cn(
                      'absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors',
                      isSelected
                        ? 'bg-primary border-primary text-primary-foreground'
                        : 'bg-background/80 border-muted-foreground/30 hover:border-muted-foreground',
                    )}
                  >
                    {isSelected && <Check className="w-3 h-3" />}
                  </button>
                )}
                <div className="flex items-center justify-center h-28 bg-accent/20">
                  <AvatarPreview type={it.setType} id={it.setId} />
                </div>
                <div className="px-2.5 py-2 border-t space-y-1">
                  <div className="text-xs font-bold truncate" title={key}>
                    {it.setType}-{it.setId}
                  </div>
                  <div className="flex items-center gap-1 flex-wrap">
                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                      {it.gender}
                    </Badge>
                    {it.club > 0 && (
                      <Badge className="text-[10px] px-1.5 py-0 bg-yellow-500/20 text-yellow-600 border-0">
                        HC
                      </Badge>
                    )}
                    {it.sellable && (
                      <Badge className="text-[10px] px-1.5 py-0 bg-blue-500/15 text-blue-500 border-0">
                        $
                      </Badge>
                    )}
                  </div>
                  <div className="pt-1">
                    {it.present ? (
                      <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
                        <Check className="w-2.5 h-2.5" />
                        Imported
                      </Badge>
                    ) : (
                      <Button
                        size="sm"
                        variant="outline"
                        className="w-full text-xs h-7"
                        disabled={busyKey === key || !!batchProgress}
                        onClick={() => importOne(it)}
                      >
                        {busyKey === key ? (
                          <Loader2 className="w-3 h-3 animate-spin mr-1" />
                        ) : (
                          <Download className="w-3 h-3 mr-1" />
                        )}
                        Import
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      )}

      {total > PER_PAGE && (
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">
            Page {page} / {lastPage}
          </span>
          <div className="flex gap-1">
            <Button
              variant="outline"
              size="sm"
              disabled={page <= 1 || loading}
              onClick={() => goPage('prev')}
            >
              &larr; Prev
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= lastPage || loading}
              onClick={() => goPage('next')}
            >
              Next &rarr;
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Root component with mode toggle ──────────────────────────────────────────

export function ImportClothingClient() {
  const [mode, setMode] = useState<Mode>('libs')

  return (
    <div className="space-y-4">
      <div className="flex gap-1 rounded-lg border p-1 w-fit">
        <Button
          size="sm"
          variant={mode === 'libs' ? 'default' : 'ghost'}
          className="h-7 text-xs"
          onClick={() => setMode('libs')}
        >
          Librerie
        </Button>
        <Button
          size="sm"
          variant={mode === 'sets' ? 'default' : 'ghost'}
          className="h-7 text-xs"
          onClick={() => setMode('sets')}
        >
          Vestiti (set)
        </Button>
      </div>

      {mode === 'libs' ? <LibsView /> : <SetsView />}
    </div>
  )
}