Epicnabbo-Catalogus-Updated-Daily/src/app/admin/favicon/favicon-generator.tsx

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslations } from "next-intl";

const SIZE = 64;
const HALF = SIZE / 2;

interface Props {
  onSave: (blob: Blob) => void;
}

export function FaviconGenerator({ onSave }: Props) {
  const t = useTranslations("pages.admin.favicon.generator");
  const [bgColor, setBgColor] = useState("#6366f1");
  const [textColor, setTextColor] = useState("#ffffff");
  const [text, setText] = useState("A");
  const [rounded, setRounded] = useState(true);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const render = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    canvas.width = SIZE;
    canvas.height = SIZE;

    // Background
    ctx.clearRect(0, 0, SIZE, SIZE);
    ctx.fillStyle = bgColor;
    if (rounded) {
      const r = 12;
      ctx.beginPath();
      ctx.moveTo(r, 0);
      ctx.lineTo(SIZE - r, 0);
      ctx.quadraticCurveTo(SIZE, 0, SIZE, r);
      ctx.lineTo(SIZE, SIZE - r);
      ctx.quadraticCurveTo(SIZE, SIZE, SIZE - r, SIZE);
      ctx.lineTo(r, SIZE);
      ctx.quadraticCurveTo(0, SIZE, 0, SIZE - r);
      ctx.lineTo(0, r);
      ctx.quadraticCurveTo(0, 0, r, 0);
      ctx.closePath();
      ctx.fill();
    } else {
      ctx.fillRect(0, 0, SIZE, SIZE);
    }

    // Text
    const displayText = text.trim() || "?";
    const fontSize = displayText.length > 2 ? 28 : displayText.length > 1 ? 32 : 40;
    ctx.fillStyle = textColor;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(displayText, HALF, HALF + 1);
  }, [bgColor, textColor, text, rounded]);

  useEffect(() => {
    render();
  }, [render]);

  function handleSave() {
    const canvas = canvasRef.current;
    if (!canvas) return;
    canvas.toBlob((blob) => {
      if (blob) onSave(blob);
    }, "image/png");
  }

  const swatches = [
    "#6366f1", "#3b82f6", "#06b6d4", "#10b981",
    "#f59e0b", "#ef4444", "#ec4899", "#8b5cf6",
    "#1e1b4b", "#1f2937", "#000000", "#ffffff",
  ];

  return (
    <div className="admin-card">
      <h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("title")}</h3>

      <div className="flex justify-center mb-6">
        <canvas
          ref={canvasRef}
          width={SIZE}
          height={SIZE}
          className="border-2 border-[var(--border-subtle)] rounded-xl shadow-lg"
          style={{ width: 128, height: 128, imageRendering: "pixelated" }}
        />
      </div>

      <div className="space-y-4">
        <div>
          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
            {t("text")}
          </label>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value.slice(0, 4))}
            maxLength={4}
            className="w-full"
            placeholder="A"
          />
        </div>

        <div>
          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
            {t("bgColor")}
          </label>
          <div className="flex items-center gap-2 mb-2">
            <input
              type="color"
              value={bgColor}
              onChange={(e) => setBgColor(e.target.value)}
              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
            />
            <span className="text-xs text-[var(--color-text-muted)] font-mono">{bgColor}</span>
          </div>
          <div className="flex flex-wrap gap-1.5">
            {swatches.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setBgColor(c)}
                className={`w-7 h-7 rounded-lg border-2 transition-all ${
                  bgColor === c ? "border-[var(--color-primary)] scale-110" : "border-transparent"
                }`}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
        </div>

        <div>
          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
            {t("textColor")}
          </label>
          <div className="flex items-center gap-2">
            <input
              type="color"
              value={textColor}
              onChange={(e) => setTextColor(e.target.value)}
              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border-subtle)]"
            />
            <span className="text-xs text-[var(--color-text-muted)] font-mono">{textColor}</span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="rounded"
            checked={rounded}
            onChange={(e) => setRounded(e.target.checked)}
            className="rounded"
          />
          <label htmlFor="rounded" className="text-sm text-[var(--color-text)] cursor-pointer">
            {t("rounded")}
          </label>
        </div>

        <button type="button" onClick={handleSave} className="btn btn-primary w-full">
          {t("save")}
        </button>
      </div>
    </div>
  );
}