import { useCallback, useState, type CSSProperties } from 'react';
import type { GameWebSocket } from '../network/websocket';
import { useT } from '../i18n';
import { sendHeroMeetEndConversation, sendHeroMeetMessage } from '../game/ws-handler';

const panelStyle: CSSProperties = {
  position: 'absolute',
  bottom: 130,
  left: '50%',
  transform: 'translateX(-50%)',
  minWidth: 240,
  maxWidth: 340,
  backgroundColor: 'rgba(15, 15, 25, 0.94)',
  border: '1px solid rgba(34, 211, 238, 0.35)',
  borderRadius: 12,
  padding: '10px 14px 12px',
  zIndex: 125,
  pointerEvents: 'auto',
  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
};

interface HeroMeetPanelProps {
  partnerName: string;
  anySideOnline: boolean;
  ws: GameWebSocket | null;
  maxChars?: number;
}

export function HeroMeetPanel({
  partnerName,
  anySideOnline,
  ws,
  maxChars = 140,
}: HeroMeetPanelProps) {
  const tr = useT();
  const [text, setText] = useState('');

  const send = useCallback(() => {
    const t = text.trim();
    if (!t || !ws) return;
    sendHeroMeetMessage(ws, t);
    setText('');
  }, [text, ws]);

  const endConv = useCallback(() => {
    if (ws) sendHeroMeetEndConversation(ws);
  }, [ws]);

  const len = [...text].length;

  return (
    <div style={panelStyle}>
      <div
        style={{
          fontSize: 13,
          fontWeight: 700,
          color: '#e0f7fa',
          marginBottom: 8,
          textAlign: 'center',
        }}
      >
        {tr.heroMeetTitle}: {partnerName}
      </div>
      {anySideOnline ? (
        <>
          <textarea
            value={text}
            maxLength={maxChars}
            onChange={(e) => setText(e.target.value)}
            placeholder={interpolate(tr.heroMeetPlaceholder, { max: maxChars })}
            rows={2}
            style={{
              width: '100%',
              boxSizing: 'border-box',
              resize: 'none',
              borderRadius: 8,
              border: '1px solid rgba(255,255,255,0.15)',
              background: 'rgba(0,0,0,0.35)',
              color: '#e8f8ff',
              fontSize: 13,
              padding: '8px 10px',
              marginBottom: 6,
            }}
          />
          <div style={{ fontSize: 10, color: '#7dd3fc', marginBottom: 6, textAlign: 'right' }}>
            {interpolate(tr.heroMeetCharCount, { current: len, max: maxChars })}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              type="button"
              onClick={send}
              style={{
                flex: 1,
                padding: '8px 10px',
                borderRadius: 8,
                border: 'none',
                fontWeight: 600,
                fontSize: 12,
                cursor: 'pointer',
                background: 'rgba(34, 211, 238, 0.25)',
                color: '#a5f3fc',
              }}
            >
              {tr.heroMeetSend}
            </button>
            <button
              type="button"
              onClick={endConv}
              style={{
                flex: 1,
                padding: '8px 10px',
                borderRadius: 8,
                border: '1px solid rgba(248, 113, 113, 0.4)',
                fontWeight: 600,
                fontSize: 12,
                cursor: 'pointer',
                background: 'rgba(248, 113, 113, 0.12)',
                color: '#fecaca',
              }}
            >
              {tr.heroMeetEndConversation}
            </button>
          </div>
        </>
      ) : (
        <div style={{ fontSize: 11, color: '#94a3b8', textAlign: 'center' }}>
          {partnerName}
        </div>
      )}
    </div>
  );
}

function interpolate(template: string, vars: Record<string, string | number>): string {
  let s = template;
  for (const [k, v] of Object.entries(vars)) {
    const needle = `{${k}}`;
    s = s.split(needle).join(String(v));
  }
  return s;
}
