"use client";

import { Github, Linkedin, Twitter, MessageCircle } from "lucide-react";
import { motion } from "framer-motion";
import { RoleBadge } from "./RoleBadge";
import ExpertisePill from "./ExpertisePill";
import type { TeamRole } from "@/models/TeamMember";

export interface TeamMemberView {
  _id: string;
  name: string;
  displayName?: string;
  role: TeamRole;
  expertise: string[];
  bio?: string;
  discordTag?: string;
  avatarFileId?: string | null;
  socials?: { github?: string; linkedin?: string; twitter?: string };
}

function initials(name: string) {
  return name
    .split(/\s+/)
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export default function TeamMemberCard({
  member,
}: {
  member: TeamMemberView;
}) {
  const display = member.displayName || member.name;
  const avatarUrl = member.avatarFileId ? `/api/files/${member.avatarFileId}` : null;

  return (
    <motion.article
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5 }}
      whileHover={{ y: -4 }}
      className="glass-strong rounded-2xl p-6 relative overflow-hidden group"
    >
      {/* Decorative blob */}
      <div
        className="absolute -top-12 -right-12 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(124,146,174,0.6), transparent 70%)",
        }}
      />

      <div className="flex items-start gap-4 relative">
        {/* Avatar */}
        <div className="relative shrink-0">
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt={display}
              className="w-16 h-16 rounded-xl object-cover border border-brand-700/40"
            />
          ) : (
            <div
              className="w-16 h-16 rounded-xl flex items-center justify-center font-bold text-white text-lg border border-brand-700/40"
              style={{
                background:
                  "linear-gradient(135deg, rgba(124,146,174,0.35), rgba(66,83,105,0.7))",
              }}
            >
              {initials(display)}
            </div>
          )}
          {/* Discord-like dot */}
          <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-[#5865F2] flex items-center justify-center border-2 border-[#0a0f1a]">
            <MessageCircle className="w-3 h-3 text-white" />
          </div>
        </div>

        {/* Header */}
        <div className="flex-1 min-w-0">
          <h3 className="text-lg font-bold text-white truncate">{display}</h3>
          <div className="mt-1.5">
            <RoleBadge role={member.role} />
          </div>
        </div>
      </div>

      {member.bio && (
        <p className="mt-4 text-sm text-brand-200/90 leading-relaxed">
          {member.bio}
        </p>
      )}

      {member.expertise.length > 0 && (
        <div className="mt-4">
          <h4 className="text-xs uppercase tracking-wider text-brand-400 font-semibold mb-2">
            Uzmanlık Alanları
          </h4>
          <div className="flex flex-wrap gap-1.5">
            {member.expertise.map((e, i) => (
              <ExpertisePill key={`${e}-${i}`} label={e} />
            ))}
          </div>
        </div>
      )}

      <div className="mt-5 pt-4 border-t border-brand-700/30 flex items-center justify-between">
        <span className="text-xs text-brand-300 inline-flex items-center gap-1.5">
          <MessageCircle className="w-3.5 h-3.5 text-[#5865F2]" />
          {member.discordTag || "—"}
        </span>
        <div className="flex items-center gap-1.5">
          {member.socials?.github && (
            <SocialIcon href={member.socials.github} label="GitHub">
              <Github className="w-3.5 h-3.5" />
            </SocialIcon>
          )}
          {member.socials?.linkedin && (
            <SocialIcon href={member.socials.linkedin} label="LinkedIn">
              <Linkedin className="w-3.5 h-3.5" />
            </SocialIcon>
          )}
          {member.socials?.twitter && (
            <SocialIcon href={member.socials.twitter} label="Twitter">
              <Twitter className="w-3.5 h-3.5" />
            </SocialIcon>
          )}
        </div>
      </div>
    </motion.article>
  );
}

function SocialIcon({
  href,
  label,
  children,
}: {
  href: string;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={label}
      className="w-7 h-7 rounded-md bg-brand-900/40 border border-brand-700/40 flex items-center justify-center text-brand-200 hover:text-white hover:border-brand-400 transition"
    >
      {children}
    </a>
  );
}