"use client";

import { useState } from "react";
import { Share2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import type { AchievementWithProgress } from "@/lib/achievements";
import { getShareUrl } from "@/lib/achievements";

interface AchievementCardProps {
  achievement: AchievementWithProgress;
  compact?: boolean;
}

export function AchievementCard({ achievement, compact = false }: AchievementCardProps) {
  const [shareCopied, setShareCopied] = useState(false);
  const Icon = achievement.icon;

  const handleShare = async () => {
    const url = getShareUrl(achievement.id);
    const text = `I earned "${achievement.title}" on LLMHosts!`;
    if (typeof navigator.share === "function") {
      try {
        await navigator.share({ title: achievement.title, text, url });
        setShareCopied(true);
        setTimeout(() => setShareCopied(false), 2000);
        return;
      } catch {
        // User cancelled or share failed, fall through to clipboard
      }
    }
    navigator.clipboard.writeText(url);
    setShareCopied(true);
    setTimeout(() => setShareCopied(false), 2000);
  };

  return (
    <div
      className={cn(
        "rounded-xl border bg-gray-900 transition-all",
        achievement.earned
          ? "border-indigo-500/50 bg-indigo-500/5"
          : "border-gray-800 bg-gray-900/80",
        compact ? "p-4" : "p-6",
      )}
    >
      <div className="flex items-start gap-4">
        <div
          className={cn(
            "flex shrink-0 items-center justify-center rounded-lg",
            achievement.earned ? "bg-indigo-500/20" : "bg-gray-800",
            compact ? "h-10 w-10" : "h-12 w-12",
          )}
        >
          <Icon
            className={cn(
              achievement.earned ? "text-indigo-400" : "text-gray-500",
              compact ? "h-5 w-5" : "h-6 w-6",
            )}
          />
        </div>
        <div className="min-w-0 flex-1">
          <h3
            className={cn(
              "font-semibold",
              achievement.earned ? "text-white" : "text-gray-300",
              compact ? "text-sm" : "text-base",
            )}
          >
            {achievement.title}
          </h3>
          <p className="mt-0.5 text-sm text-gray-400">
            {achievement.description}
          </p>
          {!compact && (
            <div className="mt-3">
              <div className="mb-1.5 flex items-center justify-between text-xs">
                <span
                  className={achievement.earned ? "text-indigo-400" : "text-gray-500"}
                >
                  {achievement.earned ? "Earned" : "Progress"}
                </span>
                {achievement.earned ? (
                  <span className="text-indigo-400">100%</span>
                ) : (
                  <span className="text-gray-400">
                    {Math.min(100, Math.round(achievement.progress))}%
                  </span>
                )}
              </div>
              <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-800">
                <div
                  className={cn(
                    "h-full rounded-full transition-all",
                    achievement.earned ? "bg-indigo-500" : "bg-indigo-500/60",
                  )}
                  style={{ width: `${Math.min(100, achievement.progress)}%` }}
                />
              </div>
            </div>
          )}
          {achievement.earned && (
            <div className="mt-3">
              <Button
                variant="ghost"
                size="sm"
                className="gap-2 text-indigo-400 hover:text-indigo-300 hover:bg-indigo-500/10"
                onClick={handleShare}
              >
                <Share2 size={14} />
                {shareCopied ? "Copied" : "Share"}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
