"use client";

import { useState, useMemo } from "react";
import {
  Plus,
  Trash2,
  Pencil,
  Check,
  X,
  Download,
  ChevronDown,
  ChevronRight,
  Tag as TagIcon,
  Search,
  FolderTree,
} from "lucide-react";
import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { Badge } from "@/shared/components/ui/badge";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/shared/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/shared/components/ui/dialog";
import { useTags } from "@/core/tagging";
import type { Tag, TagCategory, TagScope } from "@/core/tagging/types";
import { TAG_CATEGORY_ORDER, TAG_CATEGORY_LABELS } from "@/core/tagging/types";
import type { CompanyId } from "@/core/auth/types";
import { cn } from "@/shared/lib/utils";
import { getManicTimeSeedTags } from "../services/seed-data";
import { ManicTimeSyncPanel } from "./manictime-sync-panel";

const SCOPE_LABELS: Record<TagScope, string> = {
  global: "Global",
  module: "Modul",
  company: "Companie",
};

const COMPANY_LABELS: Record<CompanyId, string> = {
  beletage: "Beletage",
  "urban-switch": "Urban Switch",
  "studii-de-teren": "Studii de Teren",
  group: "Grup",
};

const TAG_COLORS = [
  "#ef4444",
  "#f97316",
  "#f59e0b",
  "#84cc16",
  "#22c55e",
  "#06b6d4",
  "#3b82f6",
  "#8b5cf6",
  "#ec4899",
  "#64748b",
  "#22B5AB",
  "#6366f1",
];

export function TagManagerModule() {
  const {
    tags,
    loading,
    createTag,
    updateTag,
    deleteTag,
    importTags,
    refresh,
  } = useTags();

  // ── Create form state ──
  const [newLabel, setNewLabel] = useState("");
  const [newCategory, setNewCategory] = useState<TagCategory>("custom");
  const [newScope, setNewScope] = useState<TagScope>("global");
  const [newColor, setNewColor] = useState("#3b82f6");
  const [newCompanyId, setNewCompanyId] = useState<CompanyId>("beletage");
  const [newProjectCode, setNewProjectCode] = useState("");
  const [newParentId, setNewParentId] = useState("");

  // ── Filter / search state ──
  const [filterCategory, setFilterCategory] = useState<TagCategory | "all">(
    "all",
  );
  const [searchQuery, setSearchQuery] = useState("");
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
    () => new Set(TAG_CATEGORY_ORDER),
  );

  // ── Edit state ──
  const [editingTag, setEditingTag] = useState<Tag | null>(null);
  const [editLabel, setEditLabel] = useState("");
  const [editColor, setEditColor] = useState("");
  const [editProjectCode, setEditProjectCode] = useState("");
  const [editScope, setEditScope] = useState<TagScope>("global");
  const [editCompanyId, setEditCompanyId] = useState<CompanyId>("beletage");

  // ── Seed import state ──
  const [showSeedDialog, setShowSeedDialog] = useState(false);
  const [seedImporting, setSeedImporting] = useState(false);
  const [seedResult, setSeedResult] = useState<string | null>(null);

  // ── Computed ──
  const filteredTags = useMemo(() => {
    let result = tags;
    if (filterCategory !== "all") {
      result = result.filter((t) => t.category === filterCategory);
    }
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      result = result.filter(
        (t) =>
          t.label.toLowerCase().includes(q) ||
          (t.projectCode?.toLowerCase().includes(q) ?? false),
      );
    }
    return result;
  }, [tags, filterCategory, searchQuery]);

  const groupedByCategory = useMemo(() => {
    const groups: Record<string, Tag[]> = {};
    for (const cat of TAG_CATEGORY_ORDER) {
      const catTags = filteredTags.filter((t) => t.category === cat);
      if (catTags.length > 0) {
        groups[cat] = catTags;
      }
    }
    return groups;
  }, [filteredTags]);

  /** Build a parent→children map for hierarchy display */
  const childrenMap = useMemo(() => {
    const map: Record<string, Tag[]> = {};
    for (const tag of tags) {
      if (tag.parentId) {
        const existing = map[tag.parentId];
        if (existing) {
          existing.push(tag);
        } else {
          map[tag.parentId] = [tag];
        }
      }
    }
    return map;
  }, [tags]);

  const parentCandidates = useMemo(() => {
    return tags.filter((t) => t.category === newCategory && !t.parentId);
  }, [tags, newCategory]);

  // ── Validation state ──
  const [validationErrors, setValidationErrors] = useState<string[]>([]);

  // ── Handlers ──
  const handleCreate = async () => {
    const errors: string[] = [];
    if (!newLabel.trim()) {
      errors.push("Numele etichetei este obligatoriu.");
    }
    if (newCategory === "project" && !newProjectCode.trim()) {
      errors.push(
        "Codul proiectului este obligatoriu pentru categoria Proiect (ex: B-001, US-010, SDT-003).",
      );
    }
    if (newCategory === "project" && newScope !== "company") {
      errors.push(
        "Etichetele de tip Proiect trebuie asociate unei companii (vizibilitate = Companie).",
      );
    }
    if (errors.length > 0) {
      setValidationErrors(errors);
      return;
    }
    setValidationErrors([]);
    await createTag({
      label: newLabel.trim(),
      category: newCategory,
      scope: newScope,
      color: newColor,
      companyId: newScope === "company" ? newCompanyId : undefined,
      projectCode:
        newCategory === "project" && newProjectCode
          ? newProjectCode
          : undefined,
      parentId: newParentId || undefined,
    });
    setNewLabel("");
    setNewProjectCode("");
    setNewParentId("");
  };

  const startEdit = (tag: Tag) => {
    setEditingTag(tag);
    setEditLabel(tag.label);
    setEditColor(tag.color ?? "#3b82f6");
    setEditProjectCode(tag.projectCode ?? "");
    setEditScope(tag.scope);
    setEditCompanyId(tag.companyId ?? "beletage");
  };

  const saveEdit = async () => {
    if (!editingTag || !editLabel.trim()) return;
    await updateTag(editingTag.id, {
      label: editLabel.trim(),
      color: editColor,
      projectCode:
        editingTag.category === "project" && editProjectCode
          ? editProjectCode
          : undefined,
      scope: editScope,
      companyId: editScope === "company" ? editCompanyId : undefined,
    });
    setEditingTag(null);
  };

  const cancelEdit = () => setEditingTag(null);

  const handleSeedImport = async () => {
    setSeedImporting(true);
    setSeedResult(null);
    const seedTags = getManicTimeSeedTags();
    const count = await importTags(seedTags);
    setSeedResult(
      `${count} etichete importate din ${seedTags.length} disponibile.`,
    );
    setSeedImporting(false);
  };

  const toggleCategory = (cat: string) => {
    setExpandedCategories((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });
  };

  // ── Stats ──
  const projectCount = tags.filter((t) => t.category === "project").length;
  const phaseCount = tags.filter((t) => t.category === "phase").length;

  return (
    <div className="space-y-6">
      {/* Stats */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
        <Card>
          <CardContent className="p-4">
            <p className="text-xs text-muted-foreground">Total etichete</p>
            <p className="text-2xl font-bold">{tags.length}</p>
          </CardContent>
        </Card>
        {TAG_CATEGORY_ORDER.map((cat) => (
          <Card key={cat}>
            <CardContent className="p-4">
              <p className="text-xs text-muted-foreground">
                {TAG_CATEGORY_LABELS[cat]}
              </p>
              <p className="text-2xl font-bold">
                {tags.filter((t) => t.category === cat).length}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* ManicTime Sync Panel */}
      <ManicTimeSyncPanel onSyncComplete={refresh} />

      {/* Seed import banner */}
      {tags.length === 0 && !loading && (
        <Card className="border-dashed border-2">
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <p className="font-medium">Nicio etichetă găsită</p>
              <p className="text-sm text-muted-foreground">
                Importă datele din ManicTime pentru a popula proiectele, fazele
                și activitățile.
              </p>
            </div>
            <Button onClick={() => setShowSeedDialog(true)}>
              <Download className="mr-1.5 h-4 w-4" /> Importă date inițiale
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Create new tag */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Etichetă nouă</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="flex flex-wrap items-end gap-3">
              <div className="min-w-[200px] flex-1">
                <Label>Nume</Label>
                <Input
                  value={newLabel}
                  onChange={(e) => setNewLabel(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && handleCreate()}
                  placeholder="Numele etichetei..."
                  className="mt-1"
                />
              </div>
              <div className="w-[160px]">
                <Label>Categorie</Label>
                <Select
                  value={newCategory}
                  onValueChange={(v) => setNewCategory(v as TagCategory)}
                >
                  <SelectTrigger className="mt-1">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {TAG_CATEGORY_ORDER.map((cat) => (
                      <SelectItem key={cat} value={cat}>
                        {TAG_CATEGORY_LABELS[cat]}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="w-[140px]">
                <Label>Vizibilitate</Label>
                <Select
                  value={newScope}
                  onValueChange={(v) => setNewScope(v as TagScope)}
                >
                  <SelectTrigger className="mt-1">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {(Object.keys(SCOPE_LABELS) as TagScope[]).map((s) => (
                      <SelectItem key={s} value={s}>
                        {SCOPE_LABELS[s]}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              {newScope === "company" && (
                <div className="w-[150px]">
                  <Label>Companie</Label>
                  <Select
                    value={newCompanyId}
                    onValueChange={(v) => setNewCompanyId(v as CompanyId)}
                  >
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {(Object.keys(COMPANY_LABELS) as CompanyId[]).map((c) => (
                        <SelectItem key={c} value={c}>
                          {COMPANY_LABELS[c]}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
            </div>

            <div className="flex flex-wrap items-end gap-3">
              {newCategory === "project" && (
                <div className="w-[140px]">
                  <Label>Cod proiect</Label>
                  <Input
                    value={newProjectCode}
                    onChange={(e) => setNewProjectCode(e.target.value)}
                    placeholder="B-001"
                    className="mt-1 font-mono"
                  />
                </div>
              )}
              {parentCandidates.length > 0 && (
                <div className="w-[200px]">
                  <Label>Tag părinte (opțional)</Label>
                  <Select
                    value={newParentId || "__none__"}
                    onValueChange={(v) =>
                      setNewParentId(v === "__none__" ? "" : v)
                    }
                  >
                    <SelectTrigger className="mt-1">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">
                        — Niciun părinte —
                      </SelectItem>
                      {parentCandidates.map((p) => (
                        <SelectItem key={p.id} value={p.id}>
                          {p.projectCode ? `${p.projectCode} ` : ""}
                          {p.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
              <div>
                <Label className="mb-1.5 block">Culoare</Label>
                <div className="flex gap-1">
                  {TAG_COLORS.map((color) => (
                    <button
                      key={color}
                      type="button"
                      onClick={() => setNewColor(color)}
                      className={cn(
                        "h-7 w-7 rounded-full border-2 transition-all",
                        newColor === color
                          ? "border-primary scale-110"
                          : "border-transparent hover:scale-105",
                      )}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>
              <Button onClick={handleCreate} disabled={!newLabel.trim()}>
                <Plus className="mr-1 h-4 w-4" /> Adaugă
              </Button>
            </div>

            {/* Validation errors */}
            {validationErrors.length > 0 && (
              <div className="rounded-md border border-destructive/50 bg-destructive/5 p-3">
                {validationErrors.map((err) => (
                  <p key={err} className="text-sm text-destructive">
                    {err}
                  </p>
                ))}
              </div>
            )}

            {/* Hint for mandatory categories */}
            {(newCategory === "project" || newCategory === "phase") && (
              <p className="text-xs text-muted-foreground">
                <strong>Notă:</strong> Categoriile <em>Proiect</em> și{" "}
                <em>Fază</em> sunt obligatorii în structura de etichete.
                Proiectele necesită un cod (ex: B-001, US-010, SDT-003) și
                trebuie asociate unei companii.
              </p>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Search + Filter bar */}
      <div className="flex flex-wrap items-center gap-3">
        <div className="relative min-w-[200px] flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Caută etichete..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <Select
          value={filterCategory}
          onValueChange={(v) => setFilterCategory(v as TagCategory | "all")}
        >
          <SelectTrigger className="w-[180px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Toate categoriile</SelectItem>
            {TAG_CATEGORY_ORDER.map((cat) => (
              <SelectItem key={cat} value={cat}>
                {TAG_CATEGORY_LABELS[cat]}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {tags.length > 0 && (
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowSeedDialog(true)}
          >
            <Download className="mr-1 h-3.5 w-3.5" /> Importă ManicTime
          </Button>
        )}
      </div>

      {/* Tag list by category with hierarchy */}
      {loading ? (
        <p className="py-8 text-center text-sm text-muted-foreground">
          Se încarcă...
        </p>
      ) : Object.keys(groupedByCategory).length === 0 ? (
        <p className="py-8 text-center text-sm text-muted-foreground">
          Nicio etichetă găsită. Creează prima etichetă sau importă datele
          inițiale.
        </p>
      ) : (
        <div className="space-y-3">
          {Object.entries(groupedByCategory).map(([category, catTags]) => {
            const isExpanded = expandedCategories.has(category);
            const rootTags = catTags.filter((t) => !t.parentId);
            return (
              <Card key={category}>
                <CardHeader
                  className="cursor-pointer pb-3"
                  onClick={() => toggleCategory(category)}
                >
                  <CardTitle className="flex items-center gap-2 text-sm">
                    {isExpanded ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                    <TagIcon className="h-4 w-4" />
                    {TAG_CATEGORY_LABELS[category as TagCategory] ?? category}
                    <Badge variant="secondary" className="ml-1">
                      {catTags.length}
                    </Badge>
                    {(category === "project" || category === "phase") && (
                      <Badge variant="default" className="ml-1 text-[10px]">
                        obligatoriu
                      </Badge>
                    )}
                  </CardTitle>
                </CardHeader>
                {isExpanded && (
                  <CardContent>
                    <div className="space-y-1">
                      {rootTags.map((tag) => (
                        <TagRow
                          key={tag.id}
                          tag={tag}
                          children={childrenMap[tag.id]}
                          editingTag={editingTag}
                          editLabel={editLabel}
                          editColor={editColor}
                          editProjectCode={editProjectCode}
                          editScope={editScope}
                          editCompanyId={editCompanyId}
                          onStartEdit={startEdit}
                          onSaveEdit={saveEdit}
                          onCancelEdit={cancelEdit}
                          onDelete={deleteTag}
                          setEditLabel={setEditLabel}
                          setEditColor={setEditColor}
                          setEditProjectCode={setEditProjectCode}
                          setEditScope={setEditScope}
                          setEditCompanyId={setEditCompanyId}
                        />
                      ))}
                    </div>
                  </CardContent>
                )}
              </Card>
            );
          })}
        </div>
      )}

      {/* Seed Import Dialog */}
      <Dialog open={showSeedDialog} onOpenChange={setShowSeedDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Importă date inițiale ManicTime</DialogTitle>
          </DialogHeader>
          <div className="space-y-3 py-2">
            <p className="text-sm text-muted-foreground">
              Aceasta va importa proiectele Beletage, Urban Switch și Studii de
              Teren, fazele, activitățile și tipurile de documente din lista
              ManicTime. Etichetele existente nu vor fi duplicate.
            </p>
            {seedResult && (
              <p className="rounded bg-muted p-2 text-sm font-medium">
                {seedResult}
              </p>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowSeedDialog(false)}>
              Închide
            </Button>
            <Button onClick={handleSeedImport} disabled={seedImporting}>
              {seedImporting ? "Se importă..." : "Importă"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ── Tag Row with inline editing ──

interface TagRowProps {
  tag: Tag;
  children?: Tag[];
  editingTag: Tag | null;
  editLabel: string;
  editColor: string;
  editProjectCode: string;
  editScope: TagScope;
  editCompanyId: CompanyId;
  onStartEdit: (tag: Tag) => void;
  onSaveEdit: () => void;
  onCancelEdit: () => void;
  onDelete: (id: string) => void;
  setEditLabel: (v: string) => void;
  setEditColor: (v: string) => void;
  setEditProjectCode: (v: string) => void;
  setEditScope: (v: TagScope) => void;
  setEditCompanyId: (v: CompanyId) => void;
}

function TagRow({
  tag,
  children,
  editingTag,
  editLabel,
  editColor,
  editProjectCode,
  editScope,
  editCompanyId,
  onStartEdit,
  onSaveEdit,
  onCancelEdit,
  onDelete,
  setEditLabel,
  setEditColor,
  setEditProjectCode,
  setEditScope,
  setEditCompanyId,
}: TagRowProps) {
  const isEditing = editingTag?.id === tag.id;
  const [showChildren, setShowChildren] = useState(false);
  const hasChildren = children && children.length > 0;

  if (isEditing) {
    return (
      <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/30 p-2">
        {tag.category === "project" && (
          <Input
            value={editProjectCode}
            onChange={(e) => setEditProjectCode(e.target.value)}
            className="w-[100px] font-mono text-xs"
            placeholder="B-001"
          />
        )}
        <Input
          value={editLabel}
          onChange={(e) => setEditLabel(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") onSaveEdit();
            if (e.key === "Escape") onCancelEdit();
          }}
          className="min-w-[200px] flex-1"
          autoFocus
        />
        <Select
          value={editScope}
          onValueChange={(v) => setEditScope(v as TagScope)}
        >
          <SelectTrigger className="w-[120px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="global">Global</SelectItem>
            <SelectItem value="module">Modul</SelectItem>
            <SelectItem value="company">Companie</SelectItem>
          </SelectContent>
        </Select>
        {editScope === "company" && (
          <Select
            value={editCompanyId}
            onValueChange={(v) => setEditCompanyId(v as CompanyId)}
          >
            <SelectTrigger className="w-[140px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {(Object.keys(COMPANY_LABELS) as CompanyId[]).map((c) => (
                <SelectItem key={c} value={c}>
                  {COMPANY_LABELS[c]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
        <div className="flex gap-1">
          {TAG_COLORS.slice(0, 6).map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => setEditColor(c)}
              className={cn(
                "h-5 w-5 rounded-full border-2 transition-all",
                editColor === c
                  ? "border-primary scale-110"
                  : "border-transparent",
              )}
              style={{ backgroundColor: c }}
            />
          ))}
        </div>
        <Button
          size="icon"
          variant="ghost"
          className="h-7 w-7"
          onClick={onSaveEdit}
        >
          <Check className="h-4 w-4 text-green-600" />
        </Button>
        <Button
          size="icon"
          variant="ghost"
          className="h-7 w-7"
          onClick={onCancelEdit}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>
    );
  }

  return (
    <div>
      <div className="group flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/30">
        {hasChildren && (
          <button
            type="button"
            onClick={() => setShowChildren(!showChildren)}
            className="p-0.5"
          >
            {showChildren ? (
              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
            ) : (
              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
            )}
          </button>
        )}
        {!hasChildren && <span className="w-5" />}
        {tag.color && (
          <span
            className="h-2.5 w-2.5 shrink-0 rounded-full"
            style={{ backgroundColor: tag.color }}
          />
        )}
        {tag.projectCode && (
          <span className="font-mono text-xs text-muted-foreground">
            {tag.projectCode}
          </span>
        )}
        <span className="flex-1 text-sm">{tag.label}</span>
        {tag.companyId && (
          <Badge variant="outline" className="text-[10px] px-1.5">
            {COMPANY_LABELS[tag.companyId]}
          </Badge>
        )}
        <Badge variant="outline" className="text-[10px] px-1">
          {SCOPE_LABELS[tag.scope]}
        </Badge>
        <div className="flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
          <button
            type="button"
            onClick={() => onStartEdit(tag)}
            className="rounded p-1 hover:bg-muted"
          >
            <Pencil className="h-3 w-3 text-muted-foreground" />
          </button>
          <button
            type="button"
            onClick={() => onDelete(tag.id)}
            className="rounded p-1 hover:bg-destructive/10"
          >
            <Trash2 className="h-3 w-3 text-destructive" />
          </button>
        </div>
      </div>
      {hasChildren && showChildren && (
        <div className="ml-6 border-l pl-2">
          {children.map((child) => (
            <div
              key={child.id}
              className="group flex items-center gap-2 rounded-md px-2 py-1 hover:bg-muted/30"
            >
              <FolderTree className="h-3 w-3 text-muted-foreground" />
              {child.color && (
                <span
                  className="h-2 w-2 shrink-0 rounded-full"
                  style={{ backgroundColor: child.color }}
                />
              )}
              {child.projectCode && (
                <span className="font-mono text-[11px] text-muted-foreground">
                  {child.projectCode}
                </span>
              )}
              <span className="flex-1 text-sm">{child.label}</span>
              <div className="flex gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
                <button
                  type="button"
                  onClick={() => onStartEdit(child)}
                  className="rounded p-1 hover:bg-muted"
                >
                  <Pencil className="h-3 w-3 text-muted-foreground" />
                </button>
                <button
                  type="button"
                  onClick={() => onDelete(child.id)}
                  className="rounded p-1 hover:bg-destructive/10"
                >
                  <Trash2 className="h-3 w-3 text-destructive" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
