import { useCallback, type CSSProperties } from 'react';
import type { NPCData } from '../game/types';
import { useT } from '../i18n';

// ---- Types ----

interface NPCInteractionProps {
  npc: NPCData;
  onViewQuests: (npc: NPCData) => void;
  /** Open shop (merchant) or services (healer) dialog. */
  onOpenServiceDialog: (npc: NPCData) => void;
  onDismiss: () => void;
  /** When set, called before onDismiss for town tour (server interaction_closed). */
  onDismissTownTour?: () => void;
}

// ---- Styles ----

const panelStyle: CSSProperties = {
  position: 'absolute',
  bottom: 130,
  left: '50%',
  transform: 'translateX(-50%)',
  minWidth: 220,
  maxWidth: 320,
  backgroundColor: 'rgba(15, 15, 25, 0.94)',
  border: '1px solid rgba(255, 215, 0, 0.3)',
  borderRadius: 12,
  padding: '10px 14px 12px',
  zIndex: 120,
  pointerEvents: 'auto',
  animation: 'npc-interact-fade-in 0.25s ease-out',
  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.5)',
};

const headerRow: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  marginBottom: 8,
};

const npcIconStyle: CSSProperties = {
  width: 28,
  height: 28,
  borderRadius: 14,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: 14,
  fontWeight: 700,
};

const npcNameStyle: CSSProperties = {
  fontSize: 13,
  fontWeight: 700,
  color: '#e8e8e8',
  flex: 1,
};

const npcTypeStyle: CSSProperties = {
  fontSize: 9,
  fontWeight: 600,
  color: '#888',
  textTransform: 'uppercase',
  letterSpacing: 0.5,
};

const actionBtnStyle: CSSProperties = {
  width: '100%',
  padding: '8px 12px',
  border: 'none',
  borderRadius: 8,
  fontSize: 12,
  fontWeight: 600,
  cursor: 'pointer',
  marginBottom: 4,
  transition: 'background-color 150ms ease',
  textAlign: 'center',
};

// ---- NPC appearance ----

function isGearVendorType(t: string): boolean {
  return t === 'merchant' || t === 'armorer' || t === 'weapon' || t === 'jeweler';
}

function isQuestNPCType(t: string): boolean {
  return t === 'quest_giver' || t === 'bounty_hunter' || t === 'elder';
}

function npcColor(
  type: string,
  tr: ReturnType<typeof useT>,
): { bg: string; icon: string; text: string } {
  switch (type) {
    case 'quest_giver':
      return { bg: 'rgba(218, 165, 32, 0.2)', icon: '!', text: tr.questGiver };
    case 'bounty_hunter':
      return { bg: 'rgba(218, 165, 32, 0.2)', icon: '!', text: tr.bountyHunter };
    case 'elder':
      return { bg: 'rgba(200, 170, 120, 0.22)', icon: '\u2020', text: tr.elder };
    case 'merchant':
      return { bg: 'rgba(68, 170, 85, 0.2)', icon: '$', text: tr.merchant };
    case 'armorer':
      return { bg: 'rgba(90, 130, 200, 0.2)', icon: '\u25C9', text: tr.armorer };
    case 'weapon':
      return { bg: 'rgba(200, 120, 70, 0.2)', icon: '\u2694', text: tr.weaponSmith };
    case 'jeweler':
      return { bg: 'rgba(180, 100, 220, 0.2)', icon: '\u2666', text: tr.jeweler };
    case 'healer':
      return { bg: 'rgba(220, 80, 80, 0.2)', icon: '+', text: tr.healer };
    default:
      return { bg: 'rgba(136, 136, 170, 0.2)', icon: '?', text: tr.npc };
  }
}

// ---- Component ----

export function NPCInteraction({
  npc,
  onViewQuests,
  onOpenServiceDialog,
  onDismiss,
  onDismissTownTour,
}: NPCInteractionProps) {
  const tr = useT();
  const info = npcColor(npc.type, tr);

  const handleAction = useCallback(() => {
    if (isQuestNPCType(npc.type)) {
      onViewQuests(npc);
      return;
    }
    if (isGearVendorType(npc.type) || npc.type === 'healer') {
      onOpenServiceDialog(npc);
    }
  }, [npc, onViewQuests, onOpenServiceDialog]);

  const actionLabel = (() => {
    if (isQuestNPCType(npc.type)) return tr.viewQuests;
    if (isGearVendorType(npc.type)) return tr.openMerchantShop;
    if (npc.type === 'healer') return tr.openHealerServices;
    return tr.npcInteractTalk;
  })();

  return (
    <>
      <style>{`
        @keyframes npc-interact-fade-in {
          0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
          100% { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
      `}</style>
      <div style={panelStyle}>
        <div style={headerRow}>
          <div
            style={{
              ...npcIconStyle,
              backgroundColor: info.bg,
              color: isQuestNPCType(npc.type)
                ? '#ffd700'
                : isGearVendorType(npc.type)
                  ? '#88dd88'
                  : npc.type === 'healer'
                    ? '#ff6666'
                    : '#aaa',
            }}
          >
            {info.icon}
          </div>
          <div>
            <div style={npcNameStyle}>{npc.name}</div>
            <div style={npcTypeStyle}>{info.text}</div>
          </div>
          <button
            onClick={() => {
              onDismissTownTour?.();
              onDismiss();
            }}
            style={{
              background: 'none',
              border: 'none',
              color: '#666',
              fontSize: 16,
              cursor: 'pointer',
              padding: '2px 6px',
              lineHeight: 1,
            }}
          >
            {'\u2715'}
          </button>
        </div>

        <button
          style={{
            ...actionBtnStyle,
            backgroundColor: isQuestNPCType(npc.type)
              ? 'rgba(68, 170, 255, 0.2)'
              : isGearVendorType(npc.type)
                ? 'rgba(68, 200, 68, 0.2)'
                : npc.type === 'healer'
                  ? 'rgba(200, 68, 68, 0.2)'
                  : 'rgba(100, 100, 100, 0.15)',
            color: isQuestNPCType(npc.type)
              ? '#66bbff'
              : isGearVendorType(npc.type)
                ? '#88dd88'
                : npc.type === 'healer'
                  ? '#ff8888'
                  : '#666',
            cursor: 'pointer',
          }}
          onClick={handleAction}
          type="button"
        >
          {actionLabel}
        </button>
      </div>
    </>
  );
}
