/**
 * AdminMusica — CRUD unificado de Artistas, Álbuns e Faixas
 * Aba única com três sub-seções. Mesmo padrão visual do AdminEpisodios.
 */

import AdminLayout from "@/components/AdminLayout";
import FileUploadField from "@/components/admin/FileUploadField";
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 {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { trpc } from "@/lib/trpc";
import { useState } from "react";
import { toast } from "sonner";

const NONE = "none";

// ─── ARTISTAS ───────────────────────────────────────────────────────────────

type ArtistaForm = {
  nome: string; slug: string; bio: string; foto: string; ativo: boolean;
};
const emptyArtista: ArtistaForm = { nome: "", slug: "", bio: "", foto: "", ativo: true };

function ArtistasTab() {
  const utils = trpc.useUtils();
  const [page, setPage] = useState(1);
  const [open, setOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState<ArtistaForm>(emptyArtista);

  const { data, isLoading } = trpc.musica.admin.artistas.listar.useQuery({ page, limit: 20 });
  const criarMut = trpc.musica.admin.artistas.criar.useMutation({
    onSuccess: () => { utils.musica.admin.artistas.listar.invalidate(); setOpen(false); toast.success("Artista criado."); },
    onError: e => toast.error(e.message),
  });
  const atualizarMut = trpc.musica.admin.artistas.atualizar.useMutation({
    onSuccess: () => { utils.musica.admin.artistas.listar.invalidate(); setOpen(false); toast.success("Artista atualizado."); },
    onError: e => toast.error(e.message),
  });
  const deletarMut = trpc.musica.admin.artistas.deletar.useMutation({
    onSuccess: () => { utils.musica.admin.artistas.listar.invalidate(); toast.success("Artista removido."); },
    onError: e => toast.error(e.message),
  });

  const handleEdit = (a: any) => {
    setEditId(a.id);
    setForm({ nome: a.nome, slug: a.slug ?? "", bio: a.bio ?? "", foto: a.foto ?? "", ativo: a.ativo === 1 });
    setOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const payload = { nome: form.nome.trim(), slug: form.slug.trim() || undefined, bio: form.bio.trim() || null, foto: form.foto.trim() || null, ativo: form.ativo ? 1 : 0 };
    if (editId) atualizarMut.mutate({ id: editId, ...payload });
    else criarMut.mutate(payload);
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => { setEditId(null); setForm(emptyArtista); setOpen(true); }} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">
          + Novo Artista
        </Button>
      </div>
      {isLoading ? <p className="text-sof-text-3">Carregando...</p> : (
        <Table>
          <TableHeader>
            <TableRow className="border-sof-border">
              <TableHead className="text-sof-text-3">Nome</TableHead>
              <TableHead className="text-sof-text-3">Ativo</TableHead>
              <TableHead className="text-sof-text-3 text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.artistas.map(a => (
              <TableRow key={a.id} className="border-sof-border hover:bg-sof-surface">
                <TableCell className="text-sof-text font-medium">{a.nome}</TableCell>
                <TableCell className="text-sof-text-3">{a.ativo === 1 ? "✓" : "✗"}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button size="sm" variant="outline" className="border-sof-border text-sof-text hover:bg-sof-surface" onClick={() => handleEdit(a)}>Editar</Button>
                    <Button size="sm" variant="destructive" onClick={() => { if (window.confirm(`Excluir "${a.nome}"?`)) deletarMut.mutate({ id: a.id }); }}>Excluir</Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
      <Dialog open={open} onOpenChange={o => { setOpen(o); if (!o) { setEditId(null); setForm(emptyArtista); } }}>
        <DialogContent className="max-w-lg">
          <DialogHeader><DialogTitle>{editId ? "Editar artista" : "Novo artista"}</DialogTitle></DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2"><Label>Nome *</Label><Input required value={form.nome} onChange={e => setForm(f => ({ ...f, nome: e.target.value }))} /></div>
            <div className="space-y-2"><Label>Slug</Label><Input value={form.slug} onChange={e => setForm(f => ({ ...f, slug: e.target.value }))} placeholder="gerado automaticamente se vazio" /></div>
            <div className="space-y-2"><Label>Bio</Label><Textarea rows={3} value={form.bio} onChange={e => setForm(f => ({ ...f, bio: e.target.value }))} /></div>
            <FileUploadField label="Foto" type="image" value={form.foto} onChange={url => setForm(f => ({ ...f, foto: url }))} />
            <div className="flex items-center gap-3"><Switch checked={form.ativo} onCheckedChange={v => setForm(f => ({ ...f, ativo: v }))} /><Label>Ativo</Label></div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)} className="border-sof-border text-sof-text hover:bg-sof-surface">Cancelar</Button>
            <Button onClick={handleSubmit} disabled={criarMut.isPending || atualizarMut.isPending} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">
              {criarMut.isPending || atualizarMut.isPending ? "Salvando..." : "Salvar"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ─── ÁLBUNS ──────────────────────────────────────────────────────────────────

type AlbumForm = {
  titulo: string; slug: string; descricao: string; capa: string;
  anoLancamento: string; genero: string; artistaId: string;
  status: "rascunho" | "publicado" | "arquivado"; ativo: boolean;
};
const emptyAlbum: AlbumForm = { titulo: "", slug: "", descricao: "", capa: "", anoLancamento: "", genero: "", artistaId: NONE, status: "publicado", ativo: true };

function AlbunsTab() {
  const utils = trpc.useUtils();
  const [page, setPage] = useState(1);
  const [open, setOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState<AlbumForm>(emptyAlbum);

  const { data, isLoading } = trpc.musica.admin.albuns.listar.useQuery({ page, limit: 20 });
  const artistasQ = trpc.musica.admin.artistas.listar.useQuery({ page: 1, limit: 100 });

  const criarMut = trpc.musica.admin.albuns.criar.useMutation({
    onSuccess: () => { utils.musica.admin.albuns.listar.invalidate(); setOpen(false); toast.success("Álbum criado."); },
    onError: e => toast.error(e.message),
  });
  const atualizarMut = trpc.musica.admin.albuns.atualizar.useMutation({
    onSuccess: () => { utils.musica.admin.albuns.listar.invalidate(); setOpen(false); toast.success("Álbum atualizado."); },
    onError: e => toast.error(e.message),
  });
  const deletarMut = trpc.musica.admin.albuns.deletar.useMutation({
    onSuccess: () => { utils.musica.admin.albuns.listar.invalidate(); toast.success("Álbum removido."); },
    onError: e => toast.error(e.message),
  });

  const handleEdit = (a: any) => {
    setEditId(a.id);
    setForm({ titulo: a.titulo, slug: a.slug ?? "", descricao: a.descricao ?? "", capa: a.capa ?? "", anoLancamento: a.anoLancamento ? String(a.anoLancamento) : "", genero: a.genero ?? "", artistaId: a.artistaId ? String(a.artistaId) : NONE, status: a.status ?? "publicado", ativo: a.ativo === 1 });
    setOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const payload = { titulo: form.titulo.trim(), slug: form.slug.trim() || undefined, descricao: form.descricao.trim() || null, capa: form.capa.trim() || null, anoLancamento: form.anoLancamento ? Number(form.anoLancamento) : null, genero: form.genero.trim() || null, artistaId: form.artistaId === NONE ? null : Number(form.artistaId), status: form.status, ativo: form.ativo ? 1 : 0 };
    if (editId) atualizarMut.mutate({ id: editId, ...payload });
    else criarMut.mutate(payload);
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => { setEditId(null); setForm(emptyAlbum); setOpen(true); }} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">+ Novo Álbum</Button>
      </div>
      {isLoading ? <p className="text-sof-text-3">Carregando...</p> : (
        <Table>
          <TableHeader>
            <TableRow className="border-sof-border">
              <TableHead className="text-sof-text-3">Título</TableHead>
              <TableHead className="text-sof-text-3">Ano</TableHead>
              <TableHead className="text-sof-text-3">Status</TableHead>
              <TableHead className="text-sof-text-3 text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.albuns.map(a => (
              <TableRow key={a.id} className="border-sof-border hover:bg-sof-surface">
                <TableCell className="text-sof-text font-medium">{a.titulo}</TableCell>
                <TableCell className="text-sof-text-3">{a.anoLancamento ?? "—"}</TableCell>
                <TableCell className="text-sof-text-3 capitalize">{a.status}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button size="sm" variant="outline" className="border-sof-border text-sof-text hover:bg-sof-surface" onClick={() => handleEdit(a)}>Editar</Button>
                    <Button size="sm" variant="destructive" onClick={() => { if (window.confirm(`Excluir "${a.titulo}"?`)) deletarMut.mutate({ id: a.id }); }}>Excluir</Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
      <Dialog open={open} onOpenChange={o => { setOpen(o); if (!o) { setEditId(null); setForm(emptyAlbum); } }}>
        <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
          <DialogHeader><DialogTitle>{editId ? "Editar álbum" : "Novo álbum"}</DialogTitle></DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2"><Label>Título *</Label><Input required value={form.titulo} onChange={e => setForm(f => ({ ...f, titulo: e.target.value }))} /></div>
            <div className="space-y-2"><Label>Slug</Label><Input value={form.slug} onChange={e => setForm(f => ({ ...f, slug: e.target.value }))} placeholder="gerado automaticamente se vazio" /></div>
            <div className="space-y-2"><Label>Descrição</Label><Textarea rows={3} value={form.descricao} onChange={e => setForm(f => ({ ...f, descricao: e.target.value }))} /></div>
            <FileUploadField label="Capa" type="image" value={form.capa} onChange={url => setForm(f => ({ ...f, capa: url }))} />
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2"><Label>Ano</Label><Input type="number" value={form.anoLancamento} onChange={e => setForm(f => ({ ...f, anoLancamento: e.target.value }))} /></div>
              <div className="space-y-2"><Label>Gênero</Label><Input value={form.genero} onChange={e => setForm(f => ({ ...f, genero: e.target.value }))} /></div>
            </div>
            <div className="space-y-2">
              <Label>Artista</Label>
              <Select value={form.artistaId} onValueChange={v => setForm(f => ({ ...f, artistaId: v }))}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value={NONE}>Nenhum</SelectItem>
                  {artistasQ.data?.artistas.map(a => <SelectItem key={a.id} value={String(a.id)}>{a.nome}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Status</Label>
              <Select value={form.status} onValueChange={v => setForm(f => ({ ...f, status: v as AlbumForm["status"] }))}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="publicado">Publicado</SelectItem>
                  <SelectItem value="rascunho">Rascunho</SelectItem>
                  <SelectItem value="arquivado">Arquivado</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-3"><Switch checked={form.ativo} onCheckedChange={v => setForm(f => ({ ...f, ativo: v }))} /><Label>Ativo</Label></div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)} className="border-sof-border text-sof-text hover:bg-sof-surface">Cancelar</Button>
            <Button onClick={handleSubmit} disabled={criarMut.isPending || atualizarMut.isPending} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">
              {criarMut.isPending || atualizarMut.isPending ? "Salvando..." : "Salvar"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ─── FAIXAS ──────────────────────────────────────────────────────────────────

type FaixaForm = {
  titulo: string; slug: string; descricao: string; arquivo: string;
  tipoMidia: "audio" | "video" | "audio_video"; videoUrl: string; capa: string;
  duracao: string; numeroFaixa: string; ordem: string; letra: string; tags: string;
  artistaId: string; albumId: string;
  status: "rascunho" | "publicado" | "agendado"; ativo: boolean;
};
const emptyFaixa: FaixaForm = { titulo: "", slug: "", descricao: "", arquivo: "", tipoMidia: "audio", videoUrl: "", capa: "", duracao: "", numeroFaixa: "", ordem: "", letra: "", tags: "", artistaId: NONE, albumId: NONE, status: "publicado", ativo: true };

function FaixasTab() {
  const utils = trpc.useUtils();
  const [page, setPage] = useState(1);
  const [open, setOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState<FaixaForm>(emptyFaixa);

  const { data, isLoading } = trpc.musica.admin.faixas.listar.useQuery({ page, limit: 20 });
  const artistasQ = trpc.musica.admin.artistas.listar.useQuery({ page: 1, limit: 100 });
  const albunsQ = trpc.musica.admin.albuns.listar.useQuery({ page: 1, limit: 100 });

  const criarMut = trpc.musica.admin.faixas.criar.useMutation({
    onSuccess: () => { utils.musica.admin.faixas.listar.invalidate(); setOpen(false); toast.success("Faixa criada."); },
    onError: e => toast.error(e.message),
  });
  const atualizarMut = trpc.musica.admin.faixas.atualizar.useMutation({
    onSuccess: () => { utils.musica.admin.faixas.listar.invalidate(); setOpen(false); toast.success("Faixa atualizada."); },
    onError: e => toast.error(e.message),
  });
  const deletarMut = trpc.musica.admin.faixas.deletar.useMutation({
    onSuccess: () => { utils.musica.admin.faixas.listar.invalidate(); toast.success("Faixa removida."); },
    onError: e => toast.error(e.message),
  });

  const handleEdit = (f: any) => {
    setEditId(f.id);
    setForm({ titulo: f.titulo, slug: f.slug ?? "", descricao: f.descricao ?? "", arquivo: f.arquivo ?? "", tipoMidia: f.tipoMidia ?? "audio", videoUrl: f.videoUrl ?? "", capa: f.capa ?? "", duracao: f.duracao ? String(f.duracao) : "", numeroFaixa: f.numeroFaixa ? String(f.numeroFaixa) : "", ordem: f.ordem ? String(f.ordem) : "", letra: f.letra ?? "", tags: f.tags ?? "", artistaId: f.artistaId ? String(f.artistaId) : NONE, albumId: f.albumId ? String(f.albumId) : NONE, status: f.status ?? "publicado", ativo: f.ativo === 1 });
    setOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if ((form.tipoMidia === "video" || form.tipoMidia === "audio_video") && !form.videoUrl.trim()) {
      toast.error("Informe a URL do vídeo."); return;
    }
    const payload = { titulo: form.titulo.trim(), slug: form.slug.trim() || undefined, descricao: form.descricao.trim() || null, arquivo: form.arquivo.trim() || null, tipoMidia: form.tipoMidia, videoUrl: form.videoUrl.trim() || null, capa: form.capa.trim() || null, duracao: form.duracao ? Number(form.duracao) : null, numeroFaixa: form.numeroFaixa ? Number(form.numeroFaixa) : null, ordem: form.ordem ? Number(form.ordem) : null, letra: form.letra.trim() || null, tags: form.tags.trim() || null, artistaId: form.artistaId === NONE ? null : Number(form.artistaId), albumId: form.albumId === NONE ? null : Number(form.albumId), status: form.status, ativo: form.ativo ? 1 : 0 };
    if (editId) atualizarMut.mutate({ id: editId, ...payload });
    else criarMut.mutate(payload);
  };

  const mostraVideo = form.tipoMidia === "video" || form.tipoMidia === "audio_video";
  const mostraAudio = form.tipoMidia === "audio" || form.tipoMidia === "audio_video";

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => { setEditId(null); setForm(emptyFaixa); setOpen(true); }} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">+ Nova Faixa</Button>
      </div>
      {isLoading ? <p className="text-sof-text-3">Carregando...</p> : (
        <Table>
          <TableHeader>
            <TableRow className="border-sof-border">
              <TableHead className="text-sof-text-3">Título</TableHead>
              <TableHead className="text-sof-text-3">Tipo</TableHead>
              <TableHead className="text-sof-text-3">Status</TableHead>
              <TableHead className="text-sof-text-3 text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.faixas.map(f => (
              <TableRow key={f.id} className="border-sof-border hover:bg-sof-surface">
                <TableCell className="text-sof-text font-medium max-w-xs truncate">{f.titulo}</TableCell>
                <TableCell className="text-sof-text-3 text-sm">{f.tipoMidia === "audio" ? "🎵 Áudio" : f.tipoMidia === "video" ? "🎬 Vídeo" : "🎬🎵 Áudio+Vídeo"}</TableCell>
                <TableCell className="text-sof-text-3 capitalize">{f.status}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button size="sm" variant="outline" className="border-sof-border text-sof-text hover:bg-sof-surface" onClick={() => handleEdit(f)}>Editar</Button>
                    <Button size="sm" variant="destructive" onClick={() => { if (window.confirm(`Excluir "${f.titulo}"?`)) deletarMut.mutate({ id: f.id }); }}>Excluir</Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
      <Dialog open={open} onOpenChange={o => { setOpen(o); if (!o) { setEditId(null); setForm(emptyFaixa); } }}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader><DialogTitle>{editId ? "Editar faixa" : "Nova faixa"}</DialogTitle></DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2"><Label>Título *</Label><Input required value={form.titulo} onChange={e => setForm(f => ({ ...f, titulo: e.target.value }))} /></div>
            <div className="space-y-2">
              <Label>Tipo de mídia</Label>
              <Select value={form.tipoMidia} onValueChange={v => setForm(f => ({ ...f, tipoMidia: v as FaixaForm["tipoMidia"] }))}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="audio">🎵 Somente Áudio</SelectItem>
                  <SelectItem value="video">🎬 Somente Vídeo</SelectItem>
                  <SelectItem value="audio_video">🎬🎵 Áudio + Vídeo</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {mostraVideo && (
              <div className="space-y-2"><Label>URL do vídeo (YouTube/Vimeo) *</Label><Input type="url" placeholder="https://youtube.com/..." value={form.videoUrl} onChange={e => setForm(f => ({ ...f, videoUrl: e.target.value }))} /></div>
            )}
            {mostraAudio && (
              <FileUploadField label="Arquivo de áudio (MP3)" type="audio" value={form.arquivo} onChange={url => setForm(f => ({ ...f, arquivo: url }))} />
            )}
            <FileUploadField label="Capa" type="image" value={form.capa} onChange={url => setForm(f => ({ ...f, capa: url }))} />
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2"><Label>Artista</Label>
                <Select value={form.artistaId} onValueChange={v => setForm(f => ({ ...f, artistaId: v }))}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value={NONE}>Nenhum</SelectItem>
                    {artistasQ.data?.artistas.map(a => <SelectItem key={a.id} value={String(a.id)}>{a.nome}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2"><Label>Álbum</Label>
                <Select value={form.albumId} onValueChange={v => setForm(f => ({ ...f, albumId: v }))}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value={NONE}>Nenhum</SelectItem>
                    {albunsQ.data?.albuns.map(a => <SelectItem key={a.id} value={String(a.id)}>{a.titulo}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="space-y-2"><Label>Duração (seg)</Label><Input type="number" value={form.duracao} onChange={e => setForm(f => ({ ...f, duracao: e.target.value }))} /></div>
              <div className="space-y-2"><Label>Nº faixa</Label><Input type="number" value={form.numeroFaixa} onChange={e => setForm(f => ({ ...f, numeroFaixa: e.target.value }))} /></div>
              <div className="space-y-2"><Label>Ordem</Label><Input type="number" value={form.ordem} onChange={e => setForm(f => ({ ...f, ordem: e.target.value }))} /></div>
            </div>
            <div className="space-y-2"><Label>Letra</Label><Textarea rows={5} value={form.letra} onChange={e => setForm(f => ({ ...f, letra: e.target.value }))} /></div>
            <div className="space-y-2"><Label>Tags</Label><Input value={form.tags} onChange={e => setForm(f => ({ ...f, tags: e.target.value }))} /></div>
            <div className="space-y-2">
              <Label>Status</Label>
              <Select value={form.status} onValueChange={v => setForm(f => ({ ...f, status: v as FaixaForm["status"] }))}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="publicado">Publicado</SelectItem>
                  <SelectItem value="rascunho">Rascunho</SelectItem>
                  <SelectItem value="agendado">Agendado</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center gap-3"><Switch checked={form.ativo} onCheckedChange={v => setForm(f => ({ ...f, ativo: v }))} /><Label>Ativo</Label></div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)} className="border-sof-border text-sof-text hover:bg-sof-surface">Cancelar</Button>
            <Button onClick={handleSubmit} disabled={criarMut.isPending || atualizarMut.isPending} className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light font-bold">
              {criarMut.isPending || atualizarMut.isPending ? "Salvando..." : "Salvar"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ─── PÁGINA PRINCIPAL ────────────────────────────────────────────────────────

export default function AdminMusica() {
  return (
    <AdminLayout>
      <div className="p-6 space-y-6">
        <div>
          <h1 className="text-2xl font-bold font-display text-sof-gold">Música</h1>
          <p className="text-sm text-sof-text-3 mt-1">Gerencie artistas, álbuns e faixas musicais</p>
        </div>
        <Tabs defaultValue="faixas">
          <TabsList className="bg-sof-surface border-b border-sof-border">
            <TabsTrigger value="faixas">Faixas</TabsTrigger>
            <TabsTrigger value="albuns">Álbuns</TabsTrigger>
            <TabsTrigger value="artistas">Artistas</TabsTrigger>
          </TabsList>
          <TabsContent value="faixas" className="mt-6"><FaixasTab /></TabsContent>
          <TabsContent value="albuns" className="mt-6"><AlbunsTab /></TabsContent>
          <TabsContent value="artistas" className="mt-6"><ArtistasTab /></TabsContent>
        </Tabs>
      </div>
    </AdminLayout>
  );
}
