/* global React */
const { useMemo } = React;

function Panel({ open, lang, locationName, phrase, fact, onClose, onReroll, accentColor, latText, lngText }) {
  if (!lang) {
    return null;
  }

  const panelStyle = {
    position: 'fixed',
    top: 0, right: 0, bottom: 0,
    width: 'min(440px, 92vw)',
    zIndex: 20,
    background: 'linear-gradient(180deg, rgba(15,19,50,0.95) 0%, rgba(8,10,28,0.96) 100%)',
    backdropFilter: 'blur(16px)',
    WebkitBackdropFilter: 'blur(16px)',
    borderLeft: '1px solid rgba(180,200,255,0.12)',
    boxShadow: '-20px 0 60px rgba(0,0,0,0.6)',
    transform: open ? 'translateX(0)' : 'translateX(100%)',
    transition: 'transform 0.55s cubic-bezier(0.22, 1, 0.36, 1)',
    display: 'flex',
    flexDirection: 'column',
    color: 'var(--ink-0)',
    fontFamily: 'Inter, sans-serif'
  };

  return (
    <aside style={panelStyle} aria-hidden={!open}>
      {/* close bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '18px 24px', borderBottom: '1px solid rgba(180,200,255,0.08)'
      }}>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11, letterSpacing: '0.14em',
          color: 'var(--ink-2)', textTransform: 'uppercase'
        }}>
          ◉ Transmission
        </span>
        <button onClick={onClose} style={closeBtnStyle} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 14 14">
            <path d="M3 3 L11 11 M11 3 L3 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
          </svg>
        </button>
      </div>

      <div style={{ padding: '28px 28px 32px', overflowY: 'auto', flex: 1 }}>
        {/* header — language name */}
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10.5, letterSpacing: '0.18em',
          color: 'var(--ink-2)', textTransform: 'uppercase',
          marginBottom: 8
        }}>
          {locationName || lang.location}
        </div>
        <h2 style={{
          margin: 0,
          fontFamily: 'Space Grotesk, sans-serif',
          fontWeight: 500,
          fontSize: 'clamp(34px, 4.2vw, 46px)',
          letterSpacing: '-0.02em',
          lineHeight: 1.02,
          color: 'var(--ink-0)'
        }}>
          {lang.language}
        </h2>

        {/* coord strip */}
        <div style={{
          display: 'flex', gap: 18,
          marginTop: 14, paddingTop: 14,
          borderTop: '1px dashed rgba(180,200,255,0.15)',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11, color: 'var(--ink-2)'
        }}>
          <span>LAT <span style={{ color: accentColor }}>{latText}</span></span>
          <span>LNG <span style={{ color: accentColor }}>{lngText}</span></span>
        </div>

        {/* PHRASE */}
        <div style={{ marginTop: 34 }}>
          <SectionHeader label="Phrase" accent={accentColor} />
          <div style={{
            marginTop: 14,
            padding: '20px 22px',
            borderRadius: 10,
            background: 'rgba(255,255,255,0.025)',
            border: '1px solid rgba(180,200,255,0.1)',
            position: 'relative'
          }}>
            <div style={{
              fontFamily: 'Space Grotesk, sans-serif',
              fontSize: 'clamp(20px, 2.4vw, 26px)',
              fontWeight: 500,
              lineHeight: 1.35,
              color: 'var(--ink-0)',
              textWrap: 'pretty'
            }}>
              {phrase?.phrase}
            </div>
            <div style={{
              marginTop: 10,
              fontSize: 14,
              color: 'var(--ink-1)',
              fontStyle: 'italic',
              lineHeight: 1.5
            }}>
              → {phrase?.translation}
            </div>
          </div>
        </div>

        {/* FACT */}
        <div style={{ marginTop: 30 }}>
          <SectionHeader label="Fact" accent={accentColor} />
          <p style={{
            marginTop: 14,
            fontSize: 15,
            lineHeight: 1.6,
            color: 'var(--ink-1)',
            textWrap: 'pretty'
          }}>
            {fact}
          </p>
        </div>

        {/* actions */}
        <div style={{ marginTop: 36, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button onClick={onReroll} style={primaryBtnStyle(accentColor)}>
            <svg width="12" height="12" viewBox="0 0 12 12" style={{ marginRight: 6 }}>
              <path d="M1 6 A5 5 0 0 1 11 6 M11 6 L8.5 4 M11 6 L8.5 8" stroke="currentColor" fill="none" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M11 6 A5 5 0 0 1 1 6 M1 6 L3.5 4 M1 6 L3.5 8" stroke="currentColor" fill="none" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" opacity="0.4"/>
            </svg>
            New phrase & fact
          </button>
        </div>

        <div style={{
          marginTop: 40,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, color: 'var(--ink-3)',
          letterSpacing: '0.1em',
          textAlign: 'right'
        }}>
          {lang.facts.length} facts · {lang.phrases.length} phrases
        </div>
      </div>
    </aside>
  );
}

function SectionHeader({ label, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 6, height: 6, background: accent, borderRadius: '50%',
        boxShadow: `0 0 10px ${accent}`
      }}/>
      <span style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10.5, letterSpacing: '0.22em',
        textTransform: 'uppercase',
        color: 'var(--ink-2)'
      }}>
        {label}
      </span>
      <span style={{
        flex: 1, height: 1, background: 'linear-gradient(to right, rgba(180,200,255,0.12), transparent)'
      }}/>
    </div>
  );
}

const closeBtnStyle = {
  width: 30, height: 30, borderRadius: '50%',
  background: 'rgba(180,200,255,0.06)',
  border: '1px solid rgba(180,200,255,0.1)',
  color: 'var(--ink-1)',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
};

const primaryBtnStyle = (accent) => ({
  display: 'inline-flex', alignItems: 'center',
  padding: '10px 16px',
  borderRadius: 999,
  border: `1px solid ${accent}`,
  background: 'transparent',
  color: accent,
  fontSize: 13,
  fontWeight: 500,
  letterSpacing: '0.02em',
  transition: 'all 0.2s',
  fontFamily: 'Inter, sans-serif'
});

window.Panel = Panel;