"use client";

import { useState, useEffect, useMemo, useCallback } from "react";
import { BookOpen, Plus } from "lucide-react";
import { NotificationPreferences } from "./notification-preferences";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/shared/components/ui/popover";
import { ScrollArea } from "@/shared/components/ui/scroll-area";
import { Button } from "@/shared/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/shared/components/ui/tabs";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/shared/components/ui/dialog";
import { useRegistry } from "../hooks/use-registry";
import { useStorage, useStorageService } from "@/core/storage";
import { v4 as uuid } from "uuid";
import { RegistryFilters } from "./registry-filters";
import { RegistryTable } from "./registry-table";
import { RegistryEntryForm } from "./registry-entry-form";
import { RegistryEntryDetail } from "./registry-entry-detail";
import { DeadlineDashboard } from "./deadline-dashboard";
import { DeadlineConfigOverview } from "./deadline-config-overview";
import { ThreadExplorer } from "./thread-explorer";
import { CloseGuardDialog } from "./close-guard-dialog";
import { ImminentActions } from "./imminent-actions";
import { getOverdueDays } from "../services/registry-service";
import {
  aggregateDeadlines,
  findAutoResolvableDeadlines,
  resolveDeadline as resolveDeadlinePure,
  pauseDeadline,
  resumeDeadline,
} from "../services/deadline-service";
import type { RegistryEntry, DeadlineResolution, ClosureInfo } from "../types";
import type { AddressContact } from "@/modules/address-book/types";

type ViewMode = "list" | "add" | "edit";

export function RegistraturaModule() {
  const {
    entries,
    allEntries,
    loading,
    filters,
    updateFilter,
    addEntry,
    updateEntry,
    removeEntry,
    closeEntry,
    loadFullEntry,
    addDeadline,
    resolveDeadline,
    removeDeadline,
  } = useRegistry();

  // Direct storage for write-only operations — avoids loading all contacts/tags on mount
  const contactStorage = useStorage("address-book");
  const tagStorageService = useStorageService();

  // ── Live contact map for table display (contactId → { name, company }) ──
  const [contactMap, setContactMap] = useState<Map<string, { name: string; company: string }>>(new Map());
  useEffect(() => {
    contactStorage.exportAll().then((all) => {
      const map = new Map<string, { name: string; company: string }>();
      for (const [key, value] of Object.entries(all)) {
        if (key.startsWith("contact:") && value) {
          const c = value as { id?: string; name?: string; company?: string };
          if (c.id) map.set(c.id, { name: c.name ?? "", company: c.company ?? "" });
        }
      }
      setContactMap(map);
    });
  }, [contactStorage]);

  const [viewMode, setViewMode] = useState<ViewMode>("list");
  const [editingEntry, setEditingEntry] = useState<RegistryEntry | null>(null);
  const [viewingEntry, setViewingEntry] = useState<RegistryEntry | null>(null);
  /** Entry to reply to (Inchide flow) — pre-sets threadParentId + flips direction */
  const [replyToEntry, setReplyToEntry] = useState<RegistryEntry | null>(null);
  /** Entry to link as conex (Conex flow) — adds to linkedEntryIds, keeps direction */
  const [conexToEntry, setConexToEntry] = useState<RegistryEntry | null>(null);
  /** If set, the parent entry will be closed after saving the new reply entry */
  const [closesEntryId, setClosesEntryId] = useState<string | null>(null);
  const [termeneView, setTermeneView] = useState<"active" | "guide">("active");
  const [closingId, setClosingId] = useState<string | null>(null);
  const [linkCheckId, setLinkCheckId] = useState<string | null>(null);

  // ── Bidirectional Address Book integration (write-only, no eager fetch) ──
  const handleCreateContact = useCallback(
    async (data: {
      name: string;
      company: string;
      phone: string;
      email: string;
    }): Promise<AddressContact | undefined> => {
      try {
        const now = new Date().toISOString();
        const contact: AddressContact = {
          id: uuid(),
          name: data.name,
          company: data.company,
          type: data.company && !data.name ? "institution" : "collaborator",
          email: data.email,
          email2: "",
          phone: data.phone,
          phone2: "",
          address: "",
          department: "",
          role: "",
          website: "",
          projectIds: [],
          contactPersons: [],
          tags: [],
          notes: "Creat automat din Registratură",
          visibility: "all",
          createdAt: now,
          updatedAt: now,
        };
        await contactStorage.set(`contact:${contact.id}`, contact);
        // Update live contact map
        setContactMap((prev) => {
          const next = new Map(prev);
          next.set(contact.id, { name: contact.name, company: contact.company });
          return next;
        });
        return contact;
      } catch {
        return undefined;
      }
    },
    [contactStorage],
  );

  // ── Bidirectional Tag Manager integration (write-only, no eager fetch) ──
  const handleCreateDocType = useCallback(
    async (label: string) => {
      try {
        const tagId = uuid();
        await tagStorageService.set("tags", tagId, {
          id: tagId,
          label,
          category: "document-type",
          scope: "global",
          color: "#64748b",
          createdAt: new Date().toISOString(),
        });
      } catch {
        // tag may already exist — ignore
      }
    },
    [tagStorageService],
  );

  const handleAdd = async (
    data: Omit<RegistryEntry, "id" | "number" | "createdAt" | "updatedAt">,
  ) => {
    const newEntry = await addEntry(data);
    // If this new entry closes a parent, close the parent automatically
    if (closesEntryId) {
      const parentEntry = allEntries.find((e) => e.id === closesEntryId);
      if (parentEntry && parentEntry.status === "deschis") {
        // Auto-resolve matching deadlines on the parent
        const replyProxy = { ...data, id: "", number: "", createdAt: "", updatedAt: "" } as RegistryEntry;
        const resolvable = findAutoResolvableDeadlines(parentEntry, replyProxy);
        let updatedDeadlines = parentEntry.trackedDeadlines ?? [];
        if (resolvable.length > 0) {
          const resolveIds = new Set(resolvable.map((d) => d.id));
          updatedDeadlines = updatedDeadlines.map((dl) =>
            resolveIds.has(dl.id)
              ? resolveDeadlinePure(
                  dl,
                  "completed",
                  `Rezolvat automat — primit raspuns ${newEntry?.number ?? "conex"}`,
                )
              : dl,
          );
        }

        const parentClosureInfo: ClosureInfo = {
          resolution: "finalizat",
          reason: "Inchis prin inregistrare conex",
          closedBy: "",
          closedAt: new Date().toISOString(),
          hadActiveDeadlines: resolvable.length > 0,
          linkedEntryId: newEntry?.id,
          linkedEntryNumber: newEntry?.number,
        };
        await updateEntry(closesEntryId, {
          closureInfo: parentClosureInfo,
          trackedDeadlines: updatedDeadlines,
        });
        await closeEntry(closesEntryId, false);

        // Also close the new entry (act administrativ) — it was created to close the parent
        if (newEntry) {
          const replyClosureInfo: ClosureInfo = {
            resolution: "finalizat",
            reason: `Act administrativ emis — inchide ${parentEntry.number}`,
            closedBy: "",
            closedAt: new Date().toISOString(),
            hadActiveDeadlines: false,
            linkedEntryId: parentEntry.id,
            linkedEntryNumber: parentEntry.number,
          };
          await updateEntry(newEntry.id, {
            status: "inchis",
            closureInfo: replyClosureInfo,
          });
        }
      }
      setClosesEntryId(null);
    }

    // ── Deadline pause/resume on conex linking ──
    if (conexToEntry && !closesEntryId) {
      const parentDeadlines = conexToEntry.trackedDeadlines ?? [];
      const hasPendingDeadlines = parentDeadlines.some(
        (dl) => dl.resolution === "pending",
      );

      if (hasPendingDeadlines) {
        // Incoming conex (clarification request received) → pause deadlines
        if (data.direction === "intrat") {
          const hasPausable = parentDeadlines.some(
            (dl) => dl.resolution === "pending" && !dl.pausedAt,
          );
          if (hasPausable) {
            const pausedDeadlines = parentDeadlines.map((dl) =>
              dl.resolution === "pending" && !dl.pausedAt
                ? pauseDeadline(dl)
                : dl,
            );
            await updateEntry(conexToEntry.id, {
              trackedDeadlines: pausedDeadlines,
            });
          }
        }

        // Outgoing conex (completions submitted) → resume paused deadlines
        if (data.direction === "iesit") {
          const hasPaused = parentDeadlines.some(
            (dl) => dl.resolution === "pending" && dl.pausedAt,
          );
          if (hasPaused) {
            const resumedDeadlines = parentDeadlines.map((dl) =>
              dl.resolution === "pending" && dl.pausedAt
                ? resumeDeadline(dl, data.date)
                : dl,
            );
            await updateEntry(conexToEntry.id, {
              trackedDeadlines: resumedDeadlines,
            });
          }
        }
      }
    }

    setReplyToEntry(null);
    setConexToEntry(null);
    setViewMode("list");
  };

  const handleEdit = async (entry: RegistryEntry) => {
    // Load full entry with attachment data (list mode strips base64)
    const full = await loadFullEntry(entry.id);
    setEditingEntry(full ?? entry);
    setViewingEntry(null); // Close detail sheet if open
    setViewMode("edit");
  };

  const handleView = async (entry: RegistryEntry) => {
    const full = await loadFullEntry(entry.id);
    setViewingEntry(full ?? entry);
  };

  /** Conex: create a new entry linked to this one (clarificari, solicitari) */
  const handleConex = (entry: RegistryEntry) => {
    setConexToEntry(entry);
    setReplyToEntry(null);
    setClosesEntryId(null);
    setViewingEntry(null);
    setEditingEntry(null);
    setViewMode("add");
  };

  /** Inchide: create a reply entry (raspuns la) that closes the parent */
  const handleCloseViaReply = (entry: RegistryEntry) => {
    setReplyToEntry(entry);
    setConexToEntry(null);
    setClosesEntryId(entry.id);
    setViewingEntry(null);
    setEditingEntry(null);
    setViewMode("add");
  };

  const handleNavigateEntry = async (entry: RegistryEntry) => {
    const full = await loadFullEntry(entry.id);
    setEditingEntry(full ?? entry);
    setViewMode("edit");
  };

  const handleUpdate = async (
    data: Omit<RegistryEntry, "id" | "number" | "createdAt" | "updatedAt">,
  ) => {
    if (!editingEntry) return;
    await updateEntry(editingEntry.id, data);
    setEditingEntry(null);
    setViewMode("list");
  };

  const handleDelete = async (id: string) => {
    try {
      await removeEntry(id);
    } catch (err) {
      const msg = err instanceof Error ? err.message : "Eroare la ștergere";
      alert(msg);
    }
  };

  /** All closes go through the close dialog */
  const handleCloseRequest = (id: string) => {
    setClosingId(id);
  };

  /** Called when the close dialog is confirmed — stores closureInfo then closes */
  const handleCloseConfirm = async (info: ClosureInfo) => {
    if (!closingId) return;
    const entry = allEntries.find((e) => e.id === closingId);
    if (!entry) return;

    // Store structured closure info on the entry
    await updateEntry(closingId, { closureInfo: info });

    // Check for linked entries
    if ((entry.linkedEntryIds ?? []).length > 0) {
      setLinkCheckId(closingId);
      setClosingId(null);
    } else {
      await closeEntry(closingId, false);
      setClosingId(null);
    }
  };

  /** Linked-entries sub-confirm */
  const handleLinkCheckConfirm = (closeLinked: boolean) => {
    if (linkCheckId) {
      closeEntry(linkCheckId, closeLinked);
      setLinkCheckId(null);
    }
  };

  const handleCancel = () => {
    setViewMode("list");
    setEditingEntry(null);
    setReplyToEntry(null);
    setConexToEntry(null);
    setClosesEntryId(null);
  };

  // ── Dashboard deadline resolve/chain handlers ──
  const handleDashboardResolve = async (
    entryId: string,
    deadlineId: string,
    resolution: DeadlineResolution,
    note: string,
    _chainNext: boolean,
  ) => {
    await resolveDeadline(entryId, deadlineId, resolution, note);
  };

  const handleAddChainedDeadline = async (
    entryId: string,
    typeId: string,
    startDate: string,
    parentId: string,
  ) => {
    await addDeadline(entryId, typeId, startDate, parentId);
  };

  // Stats
  const total = allEntries.length;
  const open = allEntries.filter((e) => e.status === "deschis").length;
  const overdue = allEntries.filter((e) => {
    if (e.status !== "deschis") return false;
    const days = getOverdueDays(e.deadline);
    return days !== null && days > 0;
  }).length;
  const intrat = allEntries.filter((e) => e.direction === "intrat").length;

  const deadlineStats = useMemo(
    () => aggregateDeadlines(allEntries),
    [allEntries],
  );
  const urgentDeadlines = deadlineStats.urgent + deadlineStats.overdue;
  const missingRecipient = deadlineStats.missingRecipientReg;
  const expiringSoon = deadlineStats.expiringSoon;
  const alertCount = urgentDeadlines + missingRecipient + expiringSoon;

  const closingEntry = closingId
    ? allEntries.find((e) => e.id === closingId)
    : null;
  const closingActiveDeadlines = closingEntry
    ? (closingEntry.trackedDeadlines ?? []).filter(
        (d) => d.resolution === "pending",
      )
    : [];

  const linkCheckEntry = linkCheckId
    ? allEntries.find((e) => e.id === linkCheckId)
    : null;

  return (
    <Tabs defaultValue="registru">
      <TabsList>
        <TabsTrigger value="registru">Registru</TabsTrigger>
        <TabsTrigger value="fire">Dosare</TabsTrigger>
        <TabsTrigger value="termene">
          Termene legale
          {alertCount > 0 && (
            <Badge
              variant="destructive"
              className="ml-1.5 text-[10px] px-1.5 py-0"
            >
              {alertCount}
            </Badge>
          )}
        </TabsTrigger>
      </TabsList>

      <TabsContent value="registru">
        <div className="space-y-6">
          {/* Alert banners */}
          {missingRecipient > 0 && viewMode === "list" && (
            <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-2 text-xs text-amber-700 dark:text-amber-400">
              ⚠ {missingRecipient} ieșir{missingRecipient === 1 ? "e" : "i"} cu
              termene legale nu {missingRecipient === 1 ? "are" : "au"}{" "}
              completat datele de la destinatar.
            </div>
          )}
          {expiringSoon > 0 && viewMode === "list" && (
            <div className="rounded-md border border-red-500/30 bg-red-500/5 px-4 py-2 text-xs text-red-700 dark:text-red-400">
              ⚠ {expiringSoon} document{expiringSoon === 1 ? "" : "e"} se
              apropie de expirare sau {expiringSoon === 1 ? "a" : "au"} expirat.
            </div>
          )}

          {/* Stats */}
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            <StatCard label="Total" value={total} />
            <StatCard label="Deschise" value={open} />
            <StatCard
              label="Depășite"
              value={overdue}
              variant={overdue > 0 ? "destructive" : undefined}
            />
            <StatCard label="Intrate" value={intrat} />
          </div>

          {viewMode === "list" && (
            <ImminentActions
              entries={allEntries}
              onNavigate={handleView}
            />
          )}

          {viewMode === "list" && (
            <>
              <div className="flex items-center justify-between gap-4">
                <RegistryFilters filters={filters} onUpdate={updateFilter} />
                <div className="flex items-center gap-1.5 shrink-0">
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground" title="Bune practici">
                        <BookOpen className="h-4 w-4" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent side="bottom" align="end" className="w-96 p-0">
                      <ScrollArea className="h-[420px]">
                        <div className="p-4 space-y-4 text-sm">
                          <h4 className="font-semibold">Bune practici — Registratură</h4>

                          <div className="space-y-1.5">
                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Numerotare</p>
                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
                              <li>Numerele se atribuie automat (B-2026-00001)</li>
                              <li>Nu modifica manual numărul de înregistrare</li>
                              <li>Fiecare companie are propria secvență</li>
                            </ul>
                          </div>

                          <div className="space-y-1.5">
                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Completare</p>
                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
                              <li>Subiectul: scurt, descriptiv, fără abrevieri ambigue</li>
                              <li>Completează mereu expeditorul/destinatarul</li>
                              <li>Folosește tipuri de document corecte (nu «Altele» dacă există opțiune potrivită)</li>
                            </ul>
                          </div>

                          <div className="space-y-1.5">
                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Termene</p>
                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
                              <li>Setează termen pentru orice document care necesită răspuns</li>
                              <li>Termenele legale se adaugă separat din tab-ul «Termene legale»</li>
                              <li>Verifică termenele depășite zilnic</li>
                            </ul>
                          </div>

                          <div className="space-y-1.5">
                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Atașamente</p>
                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
                              <li>Preferă căi NAS pentru fișiere mari (&gt;5MB)</li>
                              <li>Denumește fișierele clar: «Aviz_ISU_ProiectX_2026.pdf»</li>
                              <li>Nu atașa versiuni intermediare — doar versiunea finală</li>
                            </ul>
                          </div>

                          <div className="space-y-1.5">
                            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Închidere</p>
                            <ul className="text-xs text-muted-foreground space-y-1 list-disc pl-4">
                              <li>Închide dosarul doar când toate acțiunile sunt finalizate</li>
                              <li>Adaugă motiv de închidere descriptiv</li>
                            </ul>
                          </div>
                        </div>
                      </ScrollArea>
                    </PopoverContent>
                  </Popover>
                  <NotificationPreferences />
                  <Button onClick={() => setViewMode("add")} className="shrink-0">
                    <Plus className="mr-1.5 h-4 w-4" /> Adaugă
                  </Button>
                </div>
              </div>

              <RegistryTable
                entries={entries}
                loading={loading}
                onView={handleView}
                onEdit={handleEdit}
                onDelete={handleDelete}
                onClose={handleCloseViaReply}
                onReply={handleConex}
                contactMap={contactMap}
              />

              {!loading && (
                <p className="text-xs text-muted-foreground">
                  {entries.length} din {total} înregistrări afișate
                </p>
              )}
            </>
          )}

          {viewMode === "add" && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  {replyToEntry ? (
                    <>
                      Raspuns la {replyToEntry.number}
                      <Badge variant="outline" className="text-xs text-blue-600 border-blue-300">
                        Raspuns
                      </Badge>
                      {closesEntryId && (
                        <Badge variant="outline" className="text-xs text-green-600 border-green-300">
                          Inchide originala
                        </Badge>
                      )}
                    </>
                  ) : conexToEntry ? (
                    <>
                      Conex cu {conexToEntry.number}
                      <Badge variant="outline" className="text-xs text-amber-600 border-amber-300">
                        Clarificare
                      </Badge>
                    </>
                  ) : (
                    <>
                      Inregistrare noua
                      <Badge variant="outline" className="text-xs">
                        Nr. auto
                      </Badge>
                    </>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <RegistryEntryForm
                  allEntries={allEntries}
                  replyTo={replyToEntry ?? undefined}
                  conexTo={conexToEntry ?? undefined}
                  onSubmit={handleAdd}
                  onCancel={handleCancel}
                  onCreateContact={handleCreateContact}
                  onCreateDocType={handleCreateDocType}
                />
              </CardContent>
            </Card>
          )}

          {viewMode === "edit" && editingEntry && (
            <Card>
              <CardHeader>
                <CardTitle>Editare — {editingEntry.number}</CardTitle>
              </CardHeader>
              <CardContent>
                <RegistryEntryForm
                  initial={editingEntry}
                  allEntries={allEntries}
                  onSubmit={handleUpdate}
                  onCancel={handleCancel}
                  onCreateContact={handleCreateContact}
                  onCreateDocType={handleCreateDocType}
                  onNavigateEntry={handleNavigateEntry}
                />
              </CardContent>
            </Card>
          )}

          {/* Entry detail side panel */}
          <RegistryEntryDetail
            entry={viewingEntry}
            open={viewingEntry !== null}
            onOpenChange={(open) => {
              if (!open) setViewingEntry(null);
            }}
            onEdit={handleEdit}
            onClose={handleCloseViaReply}
            onDelete={handleDelete}
            onReply={handleConex}
            onResolveDeadline={async (entryId, deadlineId, resolution, note) => {
              await resolveDeadline(entryId, deadlineId, resolution as DeadlineResolution, note);
              // Refresh the viewing entry
              const refreshed = await loadFullEntry(entryId);
              if (refreshed) setViewingEntry(refreshed);
            }}
            allEntries={allEntries}
          />

          {/* Universal close dialog — reason, attachment, linked entry */}
          {closingEntry && (
            <CloseGuardDialog
              open={closingId !== null}
              onOpenChange={(open) => {
                if (!open) setClosingId(null);
              }}
              entry={closingEntry}
              allEntries={allEntries}
              activeDeadlines={closingActiveDeadlines}
              onConfirmClose={handleCloseConfirm}
            />
          )}

          {/* Secondary: linked-entries sub-dialog */}
          <Dialog
            open={linkCheckId !== null}
            onOpenChange={(open) => {
              if (!open) setLinkCheckId(null);
            }}
          >
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Înregistrări legate</DialogTitle>
              </DialogHeader>
              <div className="py-2">
                <p className="text-sm">
                  Această înregistrare are{" "}
                  {linkCheckEntry?.linkedEntryIds?.length ?? 0} înregistrări
                  legate. Vrei să le închizi și pe acestea?
                </p>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setLinkCheckId(null)}>
                  Anulează
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => handleLinkCheckConfirm(false)}
                >
                  Doar aceasta
                </Button>
                <Button onClick={() => handleLinkCheckConfirm(true)}>
                  Închide toate legate
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </TabsContent>

      <TabsContent value="fire">
        <ThreadExplorer
          entries={allEntries}
          onNavigateEntry={handleNavigateEntry}
        />
      </TabsContent>

      <TabsContent value="termene">
        {/* Sub-navigation: active deadlines vs. system guide */}
        <div className="mb-4 flex items-center gap-2">
          <Button
            variant={termeneView === "active" ? "default" : "outline"}
            size="sm"
            onClick={() => setTermeneView("active")}
          >
            Termene active
          </Button>
          <Button
            variant={termeneView === "guide" ? "default" : "outline"}
            size="sm"
            onClick={() => setTermeneView("guide")}
          >
            <BookOpen className="mr-1.5 h-3.5 w-3.5" />
            Ghid termene
          </Button>
        </div>

        {termeneView === "active" ? (
          <DeadlineDashboard
            entries={allEntries}
            onResolveDeadline={handleDashboardResolve}
            onAddChainedDeadline={handleAddChainedDeadline}
          />
        ) : (
          <DeadlineConfigOverview />
        )}
      </TabsContent>
    </Tabs>
  );
}

function StatCard({
  label,
  value,
  variant,
}: {
  label: string;
  value: number;
  variant?: "destructive";
}) {
  return (
    <Card>
      <CardContent className="p-4">
        <p className="text-xs text-muted-foreground">{label}</p>
        <p
          className={`text-2xl font-bold ${variant === "destructive" && value > 0 ? "text-destructive" : ""}`}
        >
          {value}
        </p>
      </CardContent>
    </Card>
  );
}
