"use client";

import { useState } from "react";
import { CollectionTable } from "@/components/collections/collection-table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CollectionItem } from "@/lib/types";

const COLLECTIONS = [
  "accessroles",
  "aclentries",
  "actions",
  "agentcategories",
  "agents",
  "assistants",
  "balances",
  "banners",
  "conversations",
  "conversationtags",
  "files",
  "groups",
  "keys",
  "memoryentries",
  "messages",
  "pluginauths",
  "presets",
  "projects",
  "promptgroups",
  "prompts",
  "roles",
  "sessions",
  "sharedlinks",
  "tokens",
  "toolcalls",
  "transactions",
  "users",
];

export function CollectionSelector() {
  const [selectedCollection, setSelectedCollection] = useState<string>("users");

  // Colonnes génériques pour toutes les collections
  const genericColumns = [
    {
      key: "_id",
      label: "ID",
      render: (value: unknown) => (
        <span className="font-mono text-xs">{String(value).slice(-8)}</span>
      ),
    },
    {
      key: "name",
      label: "Nom",
      render: (value: unknown) => String(value) || "-",
    },
    {
      key: "email",
      label: "Email",
      render: (value: unknown) => String(value) || "-",
    },
    {
      key: "createdAt",
      label: "Créé le",
      render: (value: unknown) => {
        if (!value) return "-";
        try {
          return new Date(String(value)).toLocaleDateString("fr-FR");
        } catch {
          return String(value);
        }
      },
    },
  ];

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Sélectionner une collection</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
            {COLLECTIONS.map((collection) => (
              <Button
                key={collection}
                variant={
                  selectedCollection === collection ? "default" : "outline"
                }
                size="sm"
                onClick={() => setSelectedCollection(collection)}
                className="text-xs"
              >
                {collection}
              </Button>
            ))}
          </div>
        </CardContent>
      </Card>

      <CollectionTable<CollectionItem>
        collectionName={selectedCollection}
        title={`Collection: ${selectedCollection}`}
        columns={genericColumns}
      />
    </div>
  );
}