// components/ui/FontCard.jsx
import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Check, Heart, Share2, Info } from "lucide-react";
import { transformText, fontTransforms } from "../fontTransforms";

export default function FontCard({
  fontName,
  transformedText,
  category,
  isPopular,
  index = 0,
}) {
  const [copied, setCopied] = useState(false);
  const [liked, setLiked] = useState(false);

  const fontInfo = fontTransforms[fontName];

  // Dynamisch Font-Klasse aus Fontnamen generieren (z. B. "Open Sans" → "font-open-sans")
  const fontClass = `font-${fontName.toLowerCase().replace(/\s+/g, "-")}`;

  // Fancy-Transformation
  const rawText = "Hallo Instagram!";
  const { transformed } = transformText(rawText, fontName);
  const finalText = transformed || rawText;

  const handleCopy = () => {
    navigator.clipboard.writeText(finalText).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  };

  const handleShare = () => {
    alert(`Teilen von: ${fontName}`);
  };

  return (
    <div style={{ pointerEvents: "none" }}>
      <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2">
              <h3 className="font-semibold text-gray-800 capitalize">{fontName}</h3>
              {isPopular && (
                <Badge className="bg-gradient-to-r from-pink-500 to-purple-500 text-white text-[10px] uppercase tracking-wide">
                  Beliebt
                </Badge>
              )}
              {category && (
                <Badge className="bg-gray-200 text-gray-600 text-[10px] uppercase tracking-wide">
                  {category}
                </Badge>
              )}
            </div>
            <div className="flex gap-2">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setLiked(!liked)}
                className={liked ? "text-pink-500" : "text-gray-400"}
              >
                <Heart className={`w-4 h-4 ${liked ? "fill-current" : ""}`} />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={handleShare}
                className="text-gray-400 hover:text-blue-500 pointer-events-auto"
              >
                <Share2 className="w-4 h-4" />
              </Button>
            </div>
          </div>

          {fontInfo?.description && (
            <p className="text-xs text-gray-500 mb-3 flex items-center gap-1">
              <Info className="w-3 h-3" />
              {fontInfo.description}
            </p>
          )}

          <input
            type="text"
            value={finalText}
            readOnly
            className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0 pointer-events-auto`}
            style={{ lineHeight: "1.2" }}
          />

          <Button
            onClick={handleCopy}
            className="w-full bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white font-medium py-3 rounded-xl shadow-lg pointer-events-auto"
            disabled={copied}
          >
            {copied ? (
              <>
                <Check className="w-4 h-4 mr-2" />
                Copy!
              </>
            ) : (
              <>
                <Copy className="w-4 h-4 mr-2" />
                Copy now
              </>
            )}
          </Button>
        </div>
      </Card>
    </div>
  );
}