import { useState } from "react";
import Image from "next/image";
import { ArrowLeft, Instagram, Trophy, GraduationCap, ExternalLink, X, MapPin, Calendar } from "lucide-react";
import type { TeamMember, RichListItem, VictoryItem } from "@/types/content";

interface TeamProfileProps {
  member: TeamMember;
  onBack: () => void;
}

export function TeamProfile({ member, onBack }: TeamProfileProps) {
  const [lightbox, setLightbox] = useState<string | null>(null);
  const hasVictories = member.victories && member.victories.length > 0;
  const hasExperience = member.experience && member.experience.length > 0;
  const hasEducation = member.education && member.education.length > 0;
  const hasBio = hasVictories || hasExperience || hasEducation;

  return (
    <div
      className="w-full"
      style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
    >
      {/* Back button */}
      <button
        onClick={onBack}
        className="mb-6 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light cursor-pointer"
      >
        <ArrowLeft size={16} />
        Назад
      </button>

      {/* Magazine editorial layout */}
      <div className="relative mx-auto max-w-4xl flex flex-col sm:flex-row sm:items-start">
        {/* Photo — left column, sticky */}
        <div className="relative shrink-0 w-full sm:w-[340px] lg:w-[380px] sm:sticky sm:top-8">
          <div className="relative aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
            <Image
              src={member.image}
              alt={member.name}
              fill
              sizes="(min-width: 1024px) 380px, (min-width: 640px) 340px, 100vw"
              className="object-cover"
            />
            {/* Top gradient for name */}
            <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-transparent" />
            {/* Bottom gradient for mobile bio peek */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent sm:hidden" />

            {/* Name + role overlay at top */}
            <div className="absolute top-0 left-0 right-0 p-6 sm:p-8">
              <h3
                className="text-3xl sm:text-4xl font-bold text-white leading-tight"
                style={{ textShadow: "0 2px 24px rgba(0,0,0,0.6)" }}
              >
                {member.name}
              </h3>
              <p
                className="mt-1.5 text-sm sm:text-base font-medium text-gold-light"
                style={{ textShadow: "0 1px 12px rgba(0,0,0,0.5)" }}
              >
                {member.role}
              </p>
              {member.instagram && (
                <a
                  href={member.instagram}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/70 transition-colors hover:text-gold-light"
                  style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
                >
                  <Instagram size={14} />
                  {member.instagram.split("/").filter(Boolean).pop()}
                </a>
              )}
            </div>
          </div>
        </div>

        {/* Bio panel — overlaps photo edge on desktop */}
        <div className="relative sm:-ml-12 sm:mt-8 mt-0 flex-1 min-w-0 z-10">
          <div className="rounded-2xl border border-white/[0.08] bg-black/60 backdrop-blur-xl p-5 sm:p-6 shadow-2xl shadow-black/40">
            {/* Victories */}
            {hasVictories && (
              <div>
                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
                  <Trophy size={14} />
                  Достижения
                </span>
                <div className="mt-4 flex flex-col sm:flex-row sm:flex-wrap gap-2.5">
                  {member.victories!.map((item, i) => (
                    <VictoryCard key={i} victory={item} onImageClick={setLightbox} />
                  ))}
                </div>
              </div>
            )}

            {/* Education */}
            {hasEducation && (
              <div className={hasVictories ? "mt-8" : ""}>
                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
                  <GraduationCap size={14} />
                  Образование
                </span>
                <div className="mt-4 space-y-2">
                  {member.education!.map((item, i) => (
                    <RichCard key={i} item={item} onImageClick={setLightbox} />
                  ))}
                </div>
              </div>
            )}

            {/* Experience */}
            {hasExperience && (
              <div className={hasVictories || hasEducation ? "mt-8" : ""}>
                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
                  <Trophy size={15} />
                  Опыт
                </span>
                <ul className="mt-4 space-y-2.5">
                  {member.experience!.map((item, i) => (
                    <li
                      key={i}
                      className="flex items-start gap-2.5 text-sm text-white/60"
                    >
                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gold/40" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {/* Description */}
            {member.description && (
              <p className={`text-sm leading-relaxed text-white/45 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
                {member.description}
              </p>
            )}

            {/* Empty state */}
            {!hasBio && !member.description && (
              <p className="text-sm text-white/30 italic">
                Информация скоро появится
              </p>
            )}
          </div>
        </div>
      </div>

      {/* Image lightbox */}
      {lightbox && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
          onClick={() => setLightbox(null)}
        >
          <button
            onClick={() => setLightbox(null)}
            className="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors"
          >
            <X size={20} />
          </button>
          <div className="relative max-h-[85vh] max-w-[90vw]">
            <Image
              src={lightbox}
              alt="Достижение"
              width={900}
              height={900}
              className="rounded-lg object-contain max-h-[85vh]"
            />
          </div>
        </div>
      )}
    </div>
  );
}

function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageClick: (src: string) => void }) {
  const hasImage = !!victory.image;
  const hasLink = !!victory.link;

  if (hasImage) {
    return (
      <div className="group w-full sm:w-44 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden">
        <button
          onClick={() => onImageClick(victory.image!)}
          className="relative w-full aspect-square overflow-hidden cursor-pointer"
        >
          <Image
            src={victory.image!}
            alt={victory.competition}
            fill
            sizes="176px"
            className="object-cover transition-transform group-hover:scale-105"
          />
          <div className="absolute bottom-0 left-0 right-0 bg-black/80 backdrop-blur-sm p-2.5 space-y-0.5">
            {victory.place && (
              <p className="text-sm font-bold text-gold">{victory.place}</p>
            )}
            {victory.category && (
              <p className="text-[10px] font-semibold uppercase tracking-wider text-white">{victory.category}</p>
            )}
            <p className="text-xs text-white/80">{victory.competition}</p>
          </div>
        </button>
      </div>
    );
  }

  return (
    <div className="group w-full sm:w-56 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
      <div className="p-2.5 space-y-0.5">
        {victory.place && (
          <p className="text-lg font-bold text-gold">{victory.place}</p>
        )}
        {victory.category && (
          <p className="text-xs font-medium uppercase tracking-wider text-white/80">{victory.category}</p>
        )}
        <p className="text-sm text-white/50">{victory.competition}</p>
        {(victory.location || victory.date) && (
          <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
            {victory.location && (
              <span className="inline-flex items-center gap-1 text-xs text-white/30">
                <MapPin size={10} />
                {victory.location}
              </span>
            )}
            {victory.date && (
              <span className="inline-flex items-center gap-1 text-xs text-white/30">
                <Calendar size={10} />
                {victory.date}
              </span>
            )}
          </div>
        )}
        {hasLink && (
          <a
            href={victory.link}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
          >
            <ExternalLink size={11} />
            Подробнее
          </a>
        )}
      </div>
    </div>
  );
}

function RichCard({ item, onImageClick }: { item: RichListItem; onImageClick: (src: string) => void }) {
  const hasImage = !!item.image;
  const hasLink = !!item.link;

  if (hasImage) {
    return (
      <div className="group flex rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
        <button
          onClick={() => onImageClick(item.image!)}
          className="relative w-16 shrink-0 overflow-hidden cursor-pointer"
        >
          <Image
            src={item.image!}
            alt={item.text}
            fill
            sizes="64px"
            className="object-cover transition-transform group-hover:scale-105"
          />
        </button>
        <div className="flex-1 min-w-0 p-2.5">
          <p className="text-xs text-white/70">{item.text}</p>
          {hasLink && (
            <a
              href={item.link}
              target="_blank"
              rel="noopener noreferrer"
              className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
            >
              <ExternalLink size={11} />
              Подробнее
            </a>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="group rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
      <div className="p-3">
        <p className="text-sm text-white/60">{item.text}</p>
        {hasLink && (
          <a
            href={item.link}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-1.5 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
          >
            <ExternalLink size={11} />
            Подробнее
          </a>
        )}
      </div>
    </div>
  );
}
