"use client";

import { motion } from "framer-motion";
import { Mic, MicOff, Crown } from "lucide-react";
import { useAudioLevel } from "@/hooks/useAudioLevel";

export function UserCard({
  nickname,
  stream,
  muted,
  isLocal,
  connectionLabel,
  isSpeakingOverride,
}: {
  nickname: string;
  stream: MediaStream | null;
  muted?: boolean;
  isLocal?: boolean;
  connectionLabel?: string;
  isSpeakingOverride?: boolean;
}) {
  const { level, speaking: detected } = useAudioLevel(stream, !muted && !!stream);
  const speaking = (isSpeakingOverride ?? detected) && !muted;

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 16, scale: 0.97 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ type: "spring", damping: 24, stiffness: 260 }}
      className={`relative flex min-h-[240px] flex-col items-center justify-center overflow-hidden rounded-2xl border p-6 text-center transition-colors duration-300 sm:min-h-[280px] ${
        speaking
          ? "border-emerald-400/40 bg-[#101a13] shadow-[0_0_50px_rgba(52,211,153,0.12)]"
          : "border-white/10 bg-[#141417]"
      }`}
    >
      {/* Ses dalgası halkası */}
      {speaking && (
        <motion.div
          className="absolute h-28 w-28 rounded-full border border-emerald-400/40"
          animate={{ scale: [1, 1.35], opacity: [0.7, 0] }}
          transition={{ duration: 1.4, repeat: Infinity, ease: "easeOut" }}
        />
      )}

      <div
        className={`relative flex h-20 w-20 items-center justify-center rounded-full text-2xl font-bold transition-all duration-300 ${
          speaking ? "bg-emerald-400 text-black" : "bg-white/10 text-white"
        }`}
        style={
          speaking
            ? { boxShadow: `0 0 ${20 + level * 40}px rgba(52,211,153,0.5)` }
            : undefined
        }
      >
        {muted ? <MicOff className="h-7 w-7" /> : <Mic className="h-7 w-7" />}
      </div>

      <div className="mt-4 flex items-center gap-1.5">
        <h3 className="max-w-[200px] truncate text-lg font-semibold text-white">
          {nickname}
        </h3>
        {isLocal && (
          <span className="flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-medium text-zinc-300">
            <Crown className="h-3 w-3" /> Sen
          </span>
        )}
      </div>

      <div className="mt-2 flex items-center gap-1.5 text-[13px]">
        <span
          className={`h-1.5 w-1.5 rounded-full ${
            speaking ? "bg-emerald-400" : muted ? "bg-zinc-600" : "bg-sky-400"
          }`}
        />
        <span className={speaking ? "text-emerald-300" : "text-zinc-400"}>
          {muted ? "Sessizde" : speaking ? "Konuşuyor" : connectionLabel ?? "Bağlı"}
        </span>
      </div>

      {/* Ses seviyesi barı */}
      <div className="mt-4 h-1 w-32 overflow-hidden rounded-full bg-white/10">
        <div
          className={`h-full rounded-full transition-[width] duration-100 ${
            speaking ? "bg-emerald-400" : "bg-zinc-600"
          }`}
          style={{ width: `${Math.round((muted ? 0 : level) * 100)}%` }}
        />
      </div>
    </motion.div>
  );
}