import React from 'react';
import { X, ExternalLink, Globe, Twitter, Github, Code2, Sparkles } from 'lucide-react';
import { useApp } from '../context/AppContext';

export const DeveloperPopup: React.FC = () => {
  const { state, developer, closeDeveloperModal } = useApp();

  if (!state.isDeveloperModalOpen || !developer.is_enabled) return null;

  return (
    <div
      className="fixed inset-0 z-50 overflow-y-auto bg-black/75 backdrop-blur-sm animate-in fade-in duration-150"
      onClick={closeDeveloperModal}
    >
      <div className="flex min-h-full items-center justify-center p-4 text-center">
        <div
          onClick={(e) => e.stopPropagation()}
          className="w-full max-w-sm rounded-2xl border p-6 shadow-2xl space-y-4 relative transition-colors text-left align-middle"
          style={{
            backgroundColor: 'var(--card-color, #13181D)',
            borderColor: 'var(--border-color, #2A3440)'
          }}
        >
          <button
            onClick={closeDeveloperModal}
            className="absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-200 dark:hover:text-white cursor-pointer"
          >
            <X className="w-4 h-4" />
          </button>

          <div className="flex items-center gap-3.5">
            <img
              src={developer.image_url}
              alt={developer.name}
              className="w-14 h-14 rounded-2xl object-cover border border-emerald-500/40 shadow-md"
            />
            <div>
              <div className="flex items-center gap-1.5">
                <h3
                  className="font-bold text-base"
                  style={{ color: 'var(--heading-color, #FFFFFF)' }}
                >
                  {developer.name}
                </h3>
                <Sparkles className="w-3.5 h-3.5 text-amber-400" />
              </div>
              <span className="text-xs font-mono text-emerald-500">{developer.handle}</span>
            </div>
          </div>

          <p
            className="text-xs leading-relaxed"
            style={{ color: 'var(--text-color, #A0AEC0)' }}
          >
            {developer.bio}
          </p>

          {/* Social Links */}
          <div
            className="pt-2 border-t flex items-center gap-2"
            style={{ borderColor: 'var(--border-color, #222A33)' }}
          >
            {developer.github_url && (
              <a
                href={developer.github_url}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-1 py-2 px-3 rounded-xl border text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors cursor-pointer"
                style={{
                  backgroundColor: 'var(--sub-card-bg, #0A0D0F)',
                  borderColor: 'var(--border-color, #222A33)',
                  color: 'var(--heading-color, #FFFFFF)'
                }}
              >
                <Github className="w-3.5 h-3.5" />
                <span>GitHub</span>
              </a>
            )}

            {developer.twitter_url && (
              <a
                href={developer.twitter_url}
                target="_blank"
                rel="noopener noreferrer"
                className="flex-1 py-2 px-3 rounded-xl border text-xs font-semibold flex items-center justify-center gap-1.5 transition-colors cursor-pointer"
                style={{
                  backgroundColor: 'var(--sub-card-bg, #0A0D0F)',
                  borderColor: 'var(--border-color, #222A33)',
                  color: 'var(--heading-color, #FFFFFF)'
                }}
              >
                <Twitter className="w-3.5 h-3.5 text-sky-400" />
                <span>Twitter</span>
              </a>
            )}

            {developer.website_url && (
              <a
                href={developer.website_url}
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 rounded-xl border transition-colors cursor-pointer"
                style={{
                  backgroundColor: 'var(--sub-card-bg, #0A0D0F)',
                  borderColor: 'var(--border-color, #222A33)',
                  color: 'var(--heading-color, #FFFFFF)'
                }}
                title="Personal Website"
              >
                <Globe className="w-4 h-4 text-emerald-500" />
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};
