import React, { useState, useEffect, useRef } from 'react';
import { ChevronRight, X, Sparkles, Heart, Ghost } from 'lucide-react';

// Character data
const characters = [
  {
    id: 1,
    name: "Aster",
    tag: "the one who disappears mid-sentence",
    color: "#a29bfe",
    image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400",
    desc: "speaks softly like every word costs something. leaves rooms quietly but never without echo. knows more about me than they pretend not to.",
    secret: "i still look for their name in places it will never appear.",
    details: [
      "favorite time: 3am, when the world is asleep",
      "always carries: a worn notebook with blank pages",
      "says: 'i'll be back' (never specifies when)"
    ]
  },
  {
    id: 2,
    name: "Rowan",
    tag: "sunlight with sharp edges",
    color: "#ffeaa7",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400",
    desc: "laughs like nothing has ever hurt them. pretends to be simple. isn't. made me believe in warmth again.",
    secret: "i learned how to want better by watching them exist.",
    details: [
      "favorite time: golden hour, obviously",
      "always carries: too much optimism",
      "says: 'it'll be fine' (and somehow it is)"
    ]
  },
  {
    id: 3,
    name: "Nyx",
    tag: "midnight in human form",
    color: "#6c5ce7",
    image: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=400",
    desc: "knows the exact right things to say and chooses silence instead. always looking like they're about to leave.",
    secret: "they never stayed. i never asked them to. i still hoped.",
    details: [
      "favorite time: twilight, between worlds",
      "always carries: secrets that aren't theirs",
      "says: nothing (but you hear it anyway)"
    ]
  },
  {
    id: 4,
    name: "Echo",
    tag: "the one who remembers everything",
    color: "#fd79a8",
    image: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400",
    desc: "recalls every conversation like it's scripture. makes you feel seen in ways that are both beautiful and terrifying.",
    secret: "sometimes being remembered feels heavier than being forgotten.",
    details: [
      "favorite time: whenever you need them",
      "always carries: your words back to you",
      "says: 'you told me once...' (always right)"
    ]
  }
];

const OCSShowcase = () => {
  const [selectedChar, setSelectedChar] = useState(characters[0]);
  const [showSecret, setShowSecret] = useState(false);
  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
  const [sparkles, setSparkles] = useState([]);
  const [activeTab, setActiveTab] = useState('about');

  // Cursor trail effect
  useEffect(() => {
    const handleMouseMove = (e) => {
      setCursorPos({ x: e.clientX, y: e.clientY });
      
      // Add sparkle occasionally
      if (Math.random() > 0.95) {
        const newSparkle = {
          id: Date.now(),
          x: e.clientX,
          y: e.clientY
        };
        setSparkles(prev => [...prev, newSparkle]);
        setTimeout(() => {
          setSparkles(prev => prev.filter(s => s.id !== newSparkle.id));
        }, 1000);
      }
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  const handleCharacterSelect = (char) => {
    setSelectedChar(char);
    setShowSecret(false);
    setActiveTab('about');
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #0b1020 0%, #1a1a2e 50%, #0f3460 100%)',
      padding: '2rem',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Floating cursor trail */}
      <div style={{
        position: 'fixed',
        left: cursorPos.x,
        top: cursorPos.y,
        width: '20px',
        height: '20px',
        background: selectedChar.color,
        borderRadius: '50%',
        pointerEvents: 'none',
        transform: 'translate(-50%, -50%)',
        opacity: 0.3,
        filter: 'blur(8px)',
        zIndex: 9999,
        transition: 'left 0.1s, top 0.1s'
      }} />

      {/* Sparkles */}
      {sparkles.map(sparkle => (
        <div
          key={sparkle.id}
          style={{
            position: 'fixed',
            left: sparkle.x,
            top: sparkle.y,
            pointerEvents: 'none',
            zIndex: 9998,
            animation: 'sparkleFloat 1s ease-out forwards'
          }}
        >
          ✦
        </div>
      ))}

      {/* Header */}
      <div style={{
        textAlign: 'center',
        marginBottom: '3rem',
        position: 'relative',
        zIndex: 10
      }}>
        <h1 style={{
          fontFamily: "'VT323', monospace",
          fontSize: '4rem',
          color: '#f2c879',
          margin: 0,
          textShadow: '0 0 20px rgba(242, 200, 121, 0.5)'
        }}>
          characters that breathe
        </h1>
        <p style={{
          color: '#b8b2a7',
          fontStyle: 'italic',
          maxWidth: '600px',
          margin: '1rem auto 0',
          lineHeight: 1.6
        }}>
          officially, these are original characters.<br/>
          unofficially… they are people who left fingerprints on me.
        </p>
      </div>

      {/* Main layout */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '300px 1fr',
        gap: '3rem',
        maxWidth: '1400px',
        margin: '0 auto',
        position: 'relative'
      }}>
        
        {/* Left sidebar - Character roster */}
        <div style={{
          position: 'sticky',
          top: '2rem',
          height: 'fit-content'
        }}>
          <div style={{
            background: 'rgba(18, 27, 51, 0.8)',
            backdropFilter: 'blur(10px)',
            border: '2px solid #2a355c',
            borderRadius: '12px',
            padding: '1.5rem',
            boxShadow: '0 8px 32px rgba(0,0,0,0.3)'
          }}>
            <div style={{
              fontFamily: "'VT323', monospace",
              fontSize: '1.5rem',
              color: '#f2c879',
              marginBottom: '1rem',
              display: 'flex',
              alignItems: 'center',
              gap: '0.5rem'
            }}>
              <Sparkles size={20} />
              roster
            </div>
            
            {characters.map(char => (
              <div
                key={char.id}
                onClick={() => handleCharacterSelect(char)}
                style={{
                  padding: '1rem',
                  marginBottom: '0.5rem',
                  background: selectedChar.id === char.id 
                    ? `linear-gradient(135deg, ${char.color}33, transparent)` 
                    : 'transparent',
                  border: `2px solid ${selectedChar.id === char.id ? char.color : '#2a355c'}`,
                  borderRadius: '8px',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease',
                  transform: selectedChar.id === char.id ? 'translateX(5px)' : 'none'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = `linear-gradient(135deg, ${char.color}33, transparent)`;
                  e.currentTarget.style.borderColor = char.color;
                }}
                onMouseLeave={(e) => {
                  if (selectedChar.id !== char.id) {
                    e.currentTarget.style.background = 'transparent';
                    e.currentTarget.style.borderColor = '#2a355c';
                  }
                }}
              >
                <div style={{
                  fontFamily: "'VT323', monospace",
                  fontSize: '1.3rem',
                  color: '#f2c879',
                  marginBottom: '0.3rem'
                }}>
                  {char.name}
                </div>
                <div style={{
                  fontSize: '0.8rem',
                  color: '#b8b2a7',
                  fontStyle: 'italic'
                }}>
                  {char.tag}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right content area - Character details */}
        <div style={{
          position: 'relative',
          minHeight: '600px'
        }}>
          {/* Floating card stack */}
          <div style={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: '400px',
            height: '500px',
            perspective: '1000px'
          }}>
            {/* Character image card */}
            <div style={{
              position: 'absolute',
              width: '100%',
              height: '100%',
              background: `linear-gradient(135deg, ${selectedChar.color}22, #121b33)`,
              border: `3px solid ${selectedChar.color}`,
              borderRadius: '16px',
              overflow: 'hidden',
              boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
              transform: 'rotate(-2deg)',
              transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
            }}>
              <img 
                src={selectedChar.image}
                alt={selectedChar.name}
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  filter: 'grayscale(30%) contrast(1.1)'
                }}
              />
              <div style={{
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                padding: '1.5rem',
                background: 'linear-gradient(to top, rgba(0,0,0,0.9), transparent)',
              }}>
                <div style={{
                  fontFamily: "'VT323', monospace",
                  fontSize: '2rem',
                  color: selectedChar.color
                }}>
                  {selectedChar.name}
                </div>
              </div>
            </div>
          </div>

          {/* Floating info panels */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '1.5rem',
            maxWidth: '600px'
          }}>
            {/* Windows-style tabs */}
            <div style={{
              background: 'rgba(18, 27, 51, 0.9)',
              backdropFilter: 'blur(10px)',
              border: '2px solid #2a355c',
              borderRadius: '12px',
              overflow: 'hidden',
              boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
              transform: 'rotate(0.5deg)'
            }}>
              {/* Tab headers */}
              <div style={{
                display: 'flex',
                borderBottom: '2px solid #2a355c',
                background: 'rgba(42, 53, 92, 0.3)'
              }}>
                {['about', 'details', 'secret'].map(tab => (
                  <div
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    style={{
                      flex: 1,
                      padding: '0.8rem',
                      textAlign: 'center',
                      fontFamily: "'VT323', monospace",
                      fontSize: '1.2rem',
                      color: activeTab === tab ? selectedChar.color : '#b8b2a7',
                      background: activeTab === tab ? 'rgba(15, 22, 41, 0.8)' : 'transparent',
                      borderBottom: activeTab === tab ? `3px solid ${selectedChar.color}` : 'none',
                      cursor: 'pointer',
                      transition: 'all 0.3s ease',
                      textTransform: 'uppercase'
                    }}
                    onMouseEnter={(e) => {
                      if (activeTab !== tab) {
                        e.currentTarget.style.color = selectedChar.color;
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (activeTab !== tab) {
                        e.currentTarget.style.color = '#b8b2a7';
                      }
                    }}
                  >
                    {tab}
                  </div>
                ))}
              </div>

              {/* Tab content */}
              <div style={{ padding: '1.5rem' }}>
                {activeTab === 'about' && (
                  <div style={{
                    color: '#e6e1d8',
                    lineHeight: 1.8,
                    fontSize: '1.1rem'
                  }}>
                    {selectedChar.desc}
                  </div>
                )}

                {activeTab === 'details' && (
                  <div>
                    {selectedChar.details.map((detail, i) => (
                      <div
                        key={i}
                        style={{
                          padding: '0.8rem',
                          marginBottom: '0.5rem',
                          background: 'rgba(42, 53, 92, 0.3)',
                          borderLeft: `3px solid ${selectedChar.color}`,
                          borderRadius: '4px',
                          color: '#e6e1d8',
                          fontFamily: "'Courier Prime', monospace"
                        }}
                      >
                        {detail}
                      </div>
                    ))}
                  </div>
                )}

                {activeTab === 'secret' && (
                  <div>
                    {!showSecret ? (
                      <div
                        onClick={() => setShowSecret(true)}
                        style={{
                          padding: '2rem',
                          textAlign: 'center',
                          cursor: 'pointer',
                          background: 'rgba(42, 53, 92, 0.3)',
                          border: `2px dashed ${selectedChar.color}`,
                          borderRadius: '8px',
                          color: selectedChar.color,
                          fontFamily: "'VT323', monospace",
                          fontSize: '1.3rem',
                          transition: 'all 0.3s ease'
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.background = `${selectedChar.color}22`;
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.background = 'rgba(42, 53, 92, 0.3)';
                        }}
                      >
                        ▼ click to reveal ▼<br/>
                        <span style={{ fontSize: '0.9rem', opacity: 0.7 }}>
                          (you probably shouldn't)
                        </span>
                      </div>
                    ) : (
                      <div style={{
                        padding: '1.5rem',
                        background: `linear-gradient(135deg, ${selectedChar.color}22, transparent)`,
                        border: `2px solid ${selectedChar.color}`,
                        borderRadius: '8px',
                        color: '#e6e1d8',
                        fontStyle: 'italic',
                        lineHeight: 1.8,
                        animation: 'fadeIn 0.5s ease'
                      }}>
                        {selectedChar.secret}
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>

            {/* Quick stats card */}
            <div style={{
              background: 'rgba(18, 27, 51, 0.9)',
              backdropFilter: 'blur(10px)',
              border: '2px solid #2a355c',
              borderRadius: '12px',
              padding: '1.5rem',
              boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
              transform: 'rotate(-0.5deg)'
            }}>
              <div style={{
                fontFamily: "'VT323', monospace",
                fontSize: '1.5rem',
                color: '#f2c879',
                marginBottom: '1rem'
              }}>
                signature
              </div>
              <div style={{
                fontSize: '0.9rem',
                color: '#b8b2a7',
                fontStyle: 'italic',
                marginBottom: '0.5rem'
              }}>
                "{selectedChar.tag}"
              </div>
              <div style={{
                marginTop: '1rem',
                padding: '1rem',
                background: `linear-gradient(90deg, ${selectedChar.color}33, transparent)`,
                borderLeft: `4px solid ${selectedChar.color}`,
                borderRadius: '4px',
                fontFamily: "'Indie Flower', cursive",
                fontSize: '1.2rem',
                color: '#e6e1d8'
              }}>
                ~ {selectedChar.name}
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes sparkleFloat {
          0% { opacity: 0; transform: translate(0, 0) scale(0); }
          50% { opacity: 1; transform: translate(20px, -30px) scale(1); }
          100% { opacity: 0; transform: translate(40px, -60px) scale(0); }
        }
        
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
};

export default OCSShowcase;