EpicNext-Cms/src/app/admin/translations/translations-client.tsx

"use client";

import { Download, Globe, Save } from "lucide-react";
import { useMemo, useState } from "react";
import { saveTranslations } from "@/actions/translations";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useServerAction } from "@/hooks/use-server-action";
import { flattenObject, unflattenObject } from "@/lib/translations-utils";

interface Props {
  enJson: string;
  itJson: string;
}

export function TranslationsClient({ enJson, itJson }: Props) {
  const [en, setEn] = useState(() => flattenObject(JSON.parse(enJson)));
  const [it, setIt] = useState(() => flattenObject(JSON.parse(itJson)));
  const [search, setSearch] = useState("");
  const [group, setGroup] = useState("");
  const [activeLang, setActiveLang] = useState<"en" | "it">("en");
  const { run, isPending } = useServerAction();
  const PER_PAGE = 30;
  const [page, setPage] = useState(1);

  const activeData = activeLang === "en" ? en : it;
  const setActiveData = activeLang === "en" ? setEn : setIt;

  const groups = useMemo(() => {
    const g = new Set<string>();
    Object.keys(en).forEach((k) => {
      const parts = k.split(".");
      if (parts.length > 1) g.add(parts[0]);
    });
    return Array.from(g).sort();
  }, [en]);

  const filteredKeys = useMemo(() => {
    return Object.keys(activeData).filter((key) => {
      const matchSearch =
        !search ||
        key.toLowerCase().includes(search.toLowerCase()) ||
        activeData[key].toLowerCase().includes(search.toLowerCase());
      const matchGroup = !group || key.startsWith(`${group}.`);
      return matchSearch && matchGroup;
    });
  }, [activeData, search, group]);

  const totalPages = Math.ceil(filteredKeys.length / PER_PAGE);
  const pageKeys = filteredKeys.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  function updateValue(key: string, value: string) {
    setActiveData({ ...activeData, [key]: value });
  }

  function handleSave() {
    run(() => saveTranslations({ locale: activeLang, data: unflattenObject(activeData) }), {
      successMessage: "Translations saved!",
    });
  }

  function handleExport() {
    const blob = new Blob([JSON.stringify(unflattenObject(activeData), null, 2)], {
      type: "application/json",
    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `${activeLang}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold flex items-center gap-2">
          <Globe className="w-6 h-6" />
          CMS
        </h1>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={handleExport}>
            <Download className="w-4 h-4 mr-1" /> Export
          </Button>
          <Button size="sm" onClick={handleSave} disabled={isPending}>
            <Save className="w-4 h-4 mr-1" /> {isPending ? "Saving..." : "Save"}
          </Button>
        </div>
      </div>

      <div className="flex gap-2 flex-wrap">
        <div className="flex gap-1">
          <Button
            variant={activeLang === "en" ? "default" : "outline"}
            size="sm"
            onClick={() => setActiveLang("en")}
          >
            EN
          </Button>
          <Button
            variant={activeLang === "it" ? "default" : "outline"}
            size="sm"
            onClick={() => setActiveLang("it")}
          >
            IT
          </Button>
        </div>
        <Input
          placeholder="Filter by key or value..."
          value={search}
          onChange={(e) => {
            setSearch(e.target.value);
            setPage(1);
          }}
          className="max-w-xs"
        />
        <select
          className="rounded-md border bg-background px-3 py-1 text-sm"
          value={group}
          onChange={(e) => {
            setGroup(e.target.value);
            setPage(1);
          }}
        >
          <option value="">All groups</option>
          {groups.map((g) => (
            <option key={g} value={g}>
              {g}
            </option>
          ))}
        </select>
        <span className="text-sm text-muted-foreground self-center">{filteredKeys.length} keys</span>
      </div>

      <div className="rounded-lg border bg-card divide-y">
        {pageKeys.map((key) => (
          <div key={key} className="flex items-center gap-3 px-4 py-2">
            <span className="text-xs font-mono text-muted-foreground w-64 truncate flex-shrink-0">{key}</span>
            <Input
              value={activeData[key]}
              onChange={(e) => updateValue(key, e.target.value)}
              className="flex-1 h-8 text-sm"
            />
          </div>
        ))}
      </div>

      {totalPages > 1 && (
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">
            Page {page} of {totalPages}
          </span>
          <div className="flex gap-1">
            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
              Prev
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={page >= totalPages}
              onClick={() => setPage(page + 1)}
            >
              Next
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}