import { css } from '@emotion/react';
import { memo, useEffect, useRef, useState } from 'react';
import { adaptive } from '../../styles/adaptive';
import { FloatingOverlay } from '../FloatingOverlay';
import { useFloatingItems } from '../../hooks/useFloatingItems';
import elementsData from '../../data/elements.json';
import { CharacterSprite } from '../CharacterSprite';
import {
  calcEffectiveIdleRate,
  calcEnhanceCost,
  calcSpawnRate,
  ENHANCE_MAX_LEVEL,
  isElementUnlocked,
  useGameStore,
} from '../../store/useGameStore';

// 원소 상태 분류
type ElementState = 'obtained' | 'locked' | 'undiscovered';

function getElementState(
  elementId: string,
  elements: Record<string, number>
): ElementState {
  const count = elements[elementId] ?? 0;
  if (count > 0) return 'obtained';
  if (isElementUnlocked(elementId, elements)) return 'locked';
  return 'undiscovered';
}

// 골드 금액 표시 포맷
function formatGold(amount: number): string {
  if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(1)}M`;
  if (amount >= 1_000) return `${(amount / 1_000).toFixed(1)}K`;
  return String(amount);
}

// ────────────────────────────────────────────────────────────
// Styles
// ────────────────────────────────────────────────────────────

const containerStyle = css`
  padding: 20px;
  background: ${adaptive.background};
  min-height: 100%;
`;

const headerStyle = css`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
`;

const titleStyle = css`
  font-size: 20px;
  font-weight: 700;
  color: ${adaptive.grey900};
  margin: 0;
`;

const goldBadgeStyle = css`
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #5a3200;
`;

const progressBarWrapStyle = css`
  background: ${adaptive.greyBackground};
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
`;

const progressHeaderStyle = css`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const progressLabelStyle = css`
  font-size: 12px;
  color: ${adaptive.grey500};
  font-weight: 500;
`;

const progressCountStyle = css`
  font-size: 13px;
  font-weight: 700;
  color: ${adaptive.blue500};
`;

const progressTrackStyle = css`
  height: 6px;
  background: ${adaptive.grey200};
  border-radius: 3px;
  overflow: hidden;
`;

const progressFillStyle = (ratio: number) => css`
  height: 100%;
  width: ${(ratio * 100).toFixed(1)}%;
  background: linear-gradient(90deg, #3182f6, #7c4dff);
  border-radius: 3px;
  transition: width 0.3s ease;
`;

const idleInfoStyle = css`
  background: ${adaptive.greyBackground};
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
`;

const idleStatStyle = css`
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const idleLabelStyle = css`
  font-size: 11px;
  color: ${adaptive.grey500};
`;

const idleValueStyle = css`
  font-size: 13px;
  font-weight: 700;
  color: ${adaptive.blue500};
`;

const tierSectionStyle = css`
  margin-bottom: 20px;
`;

const tierLabelStyle = css`
  font-size: 12px;
  font-weight: 600;
  color: ${adaptive.grey500};
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
`;

const elementGridStyle = css`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
`;

const elementCardBaseStyle = `
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 14px;
  padding: 12px 6px 10px;
  gap: 5px;
  position: relative;
`;

const obtainedCardStyle = css`
  ${elementCardBaseStyle}
  background: ${adaptive.background};
  border: 1.5px solid ${adaptive.grey200};
  cursor: pointer;
  &:active {
    transform: scale(0.96);
  }
`;

const lockedCardStyle = css`
  ${elementCardBaseStyle}
  background: ${adaptive.greyBackground};
  border: 1.5px solid ${adaptive.grey200};
  opacity: 0.75;
  cursor: default;
`;

const undiscoveredCardStyle = css`
  ${elementCardBaseStyle}
  background: ${adaptive.greyBackground};
  border: 1.5px dashed ${adaptive.grey300};
  opacity: 0.4;
  cursor: default;
  justify-content: center;
  min-height: 80px;
`;

const spriteWrapStyle = css`
  width: 56px;
  height: 56px;
  flex-shrink: 0;
`;

const elementNameStyle = css`
  font-size: 10px;
  font-weight: 600;
  color: ${adaptive.grey900};
  text-align: center;
  line-height: 1.2;
`;

const undiscoveredNameStyle = css`
  font-size: 10px;
  color: ${adaptive.grey400};
  text-align: center;
`;

const elementCountStyle = css`
  font-size: 11px;
  color: ${adaptive.blue500};
  font-weight: 700;
`;

const lockIconStyle = css`
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
`;

const spawnRateStyle = css`
  font-size: 9px;
  color: ${adaptive.grey400};
`;

// ────────────────────────────────────────────────────────────
// 상세 정보 패널
// ────────────────────────────────────────────────────────────

const overlayStyle = css`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: flex-end;
`;

const detailPanelStyle = css`
  width: 100%;
  background: ${adaptive.background};
  border-radius: 20px 20px 0 0;
  padding: 20px;
  padding-bottom: 32px;
`;

const detailHandleStyle = css`
  width: 36px;
  height: 4px;
  background: ${adaptive.grey300};
  border-radius: 2px;
  margin: 0 auto 16px;
`;

const detailHeaderStyle = css`
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
`;

const detailSpriteStyle = css`
  width: 72px;
  height: 72px;
  flex-shrink: 0;
`;

const detailTitleBlockStyle = css`
  flex: 1;
`;

const detailNameStyle = css`
  font-size: 18px;
  font-weight: 700;
  color: ${adaptive.grey900};
  margin: 0 0 2px;
`;

const detailTierStyle = css`
  font-size: 12px;
  color: ${adaptive.grey500};
`;

const detailGridStyle = css`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
`;

const detailStatCardStyle = css`
  background: ${adaptive.greyBackground};
  border-radius: 12px;
  padding: 10px 12px;
`;

const detailStatLabelStyle = css`
  font-size: 11px;
  color: ${adaptive.grey500};
  margin-bottom: 4px;
`;

const detailStatValueStyle = css`
  font-size: 15px;
  font-weight: 700;
  color: ${adaptive.grey900};
`;

const enhanceRowStyle = css`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: ${adaptive.greyBackground};
  border-radius: 12px;
  padding: 12px 16px;
`;

const enhanceLabelStyle = css`
  font-size: 13px;
  font-weight: 600;
  color: ${adaptive.grey700};
  margin-bottom: 6px;
`;

const enhanceDotRowStyle = css`
  display: flex;
  gap: 5px;
  align-items: center;
`;

const enhanceDotStyle = (filled: boolean) => css`
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: ${filled ? adaptive.blue500 : adaptive.grey300};
`;

const enhanceCostStyle = css`
  font-size: 12px;
  font-weight: 600;
  color: ${adaptive.blue500};
`;

const enhanceMaxStyle = css`
  font-size: 12px;
  color: ${adaptive.grey400};
`;

const detailCountBadgeStyle = css`
  font-size: 14px;
  font-weight: 700;
  color: ${adaptive.blue500};
`;

// ────────────────────────────────────────────────────────────
// Tier labels
// ────────────────────────────────────────────────────────────

const TIER_LABELS: Record<number, string> = {
  1: 'Tier 1 — 기본 원소',
  2: 'Tier 2 — 2차 원소',
  3: 'Tier 3 — 희귀 원소',
  4: 'Tier 4 — 에픽 원소',
  5: 'Tier 5 — 전설 원소',
};

// ────────────────────────────────────────────────────────────
// DetailPanel 컴포넌트
// ────────────────────────────────────────────────────────────

type ElementData = (typeof elementsData)[number];

interface DetailPanelProps {
  el: ElementData;
  count: number;
  level: number;
  onClose: () => void;
}

function DetailPanel({ el, count, level, onClose }: DetailPanelProps) {
  const spawnRate = calcSpawnRate(el.id, level);
  const idleRate = calcEffectiveIdleRate(el.id, level);
  const isMaxLevel = level >= ENHANCE_MAX_LEVEL;
  const nextCost = isMaxLevel ? null : calcEnhanceCost(level);

  return (
    <div css={overlayStyle} onClick={onClose}>
      <div css={detailPanelStyle} onClick={(e) => e.stopPropagation()}>
        <div css={detailHandleStyle} />

        <div css={detailHeaderStyle}>
          <div css={detailSpriteStyle}>
            <CharacterSprite
              elementId={el.id}
              elementColor={el.color}
              tier={el.tier}
              size={72}
              state="obtained"
            />
          </div>
          <div css={detailTitleBlockStyle}>
            <p css={detailNameStyle}>{el.name}</p>
            <span css={detailTierStyle}>
              Tier {el.tier} · {el.rarity} · {el.nameEn}
            </span>
          </div>
          <span css={detailCountBadgeStyle}>×{count.toLocaleString()}</span>
        </div>

        <div css={detailGridStyle}>
          <div css={detailStatCardStyle}>
            <div css={detailStatLabelStyle}>생산 속도</div>
            <div css={detailStatValueStyle}>+{spawnRate.toFixed(3)}/s</div>
          </div>
          <div css={detailStatCardStyle}>
            <div css={detailStatLabelStyle}>골드 수입</div>
            <div css={detailStatValueStyle}>+{idleRate.toFixed(2)}/s</div>
          </div>
          <div css={detailStatCardStyle}>
            <div css={detailStatLabelStyle}>기본 수입률</div>
            <div css={detailStatValueStyle}>{el.idleIncomeRate}/s</div>
          </div>
          <div css={detailStatCardStyle}>
            <div css={detailStatLabelStyle}>보유 수량</div>
            <div css={detailStatValueStyle}>{count.toLocaleString()}</div>
          </div>
        </div>

        <div css={enhanceRowStyle}>
          <div>
            <div css={enhanceLabelStyle}>강화 레벨 Lv.{level}</div>
            <div css={enhanceDotRowStyle}>
              {Array.from({ length: ENHANCE_MAX_LEVEL }, (_, i) => (
                <span key={i} css={enhanceDotStyle(i < level)} />
              ))}
            </div>
          </div>
          {isMaxLevel ? (
            <span css={enhanceMaxStyle}>MAX</span>
          ) : (
            <span css={enhanceCostStyle}>
              다음 강화 💰{formatGold(nextCost!)}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// ElementCard (메모이제이션 — count/level 동일하면 리렌더 안 함)
// ────────────────────────────────────────────────────────────

interface ElementCardProps {
  el: ElementData;
  state: ElementState;
  count: number;
  level: number;
  onSelect: (el: ElementData) => void;
  isTutorialTarget?: boolean;
}

const ElementCard = memo(function ElementCard({ el, state, count, level, onSelect, isTutorialTarget }: ElementCardProps) {
  const spawnRate = calcSpawnRate(el.id, level);

  if (state === 'undiscovered') {
    return (
      <div css={undiscoveredCardStyle}>
        <div css={spriteWrapStyle}>
          <CharacterSprite elementId={el.id} elementColor={el.color} tier={el.tier} size={56} state="undiscovered" />
        </div>
        <span css={undiscoveredNameStyle}>???</span>
      </div>
    );
  }

  if (state === 'locked') {
    return (
      <div css={lockedCardStyle}>
        <span css={lockIconStyle}>🔒</span>
        <div css={spriteWrapStyle}>
          <CharacterSprite elementId={el.id} elementColor={el.color} tier={el.tier} size={56} state="locked" />
        </div>
        <span css={elementNameStyle}>{el.name}</span>
      </div>
    );
  }

  return (
    <div
      css={obtainedCardStyle}
      onClick={() => onSelect(el)}
      data-tutorial={isTutorialTarget ? 'elements-first-card' : undefined}
    >
      <div css={spriteWrapStyle}>
        <CharacterSprite elementId={el.id} elementColor={el.color} tier={el.tier} size={56} state="obtained" />
      </div>
      <span css={elementNameStyle}>{el.name}</span>
      <span css={elementCountStyle}>×{count.toLocaleString()}</span>
      <span css={spawnRateStyle}>+{spawnRate.toFixed(2)}/s</span>
    </div>
  );
});

// ────────────────────────────────────────────────────────────
// ElementsScreen (메인)
// ────────────────────────────────────────────────────────────

export function ElementsScreen() {
  // 전체 store 구독 대신 필요한 slice만 selector로 구독 (불필요한 리렌더 방지)
  const gold = useGameStore((s) => s.gold);
  const elements = useGameStore((s) => s.elements);
  const elementLevels = useGameStore((s) => s.elementLevels);
  const [selectedEl, setSelectedEl] = useState<ElementData | null>(null);
  const { items: floatItems, add: addFloat } = useFloatingItems(1100);
  const prevElements = useRef<Record<string, number>>({});
  const prevGold = useRef<number>(-1);
  const floatCount = useRef<number>(0);

  // 자동 수집 플로팅 이펙트: 원소 수 또는 골드 증가 감지
  useEffect(() => {
    const W = window.innerWidth;
    const H = window.innerHeight;
    let showed = 0;

    // 원소 증가 감지 (idle tick에서 발생)
    for (const el of elementsData) {
      const prev = prevElements.current[el.id] ?? -1;
      const curr = elements[el.id] ?? 0;
      if (prev >= 0 && curr > prev) {
        // 최대 2개까지만 표시 (너무 많으면 지저분)
        if (showed < 2) {
          addFloat({
            text: `${el.emoji} +${curr - prev}`,
            x: W * 0.15 + Math.random() * W * 0.7,
            y: H * 0.2 + Math.random() * H * 0.4,
            color: el.color,
            fontSize: 16,
          });
          showed++;
        }
      }
    }
    prevElements.current = { ...elements };

    // 골드 증가 감지
    if (prevGold.current >= 0 && gold > prevGold.current) {
      const gained = gold - prevGold.current;
      // 매 3번 tick마다 1번만 표시 (너무 잦지 않게)
      floatCount.current = (floatCount.current + 1) % 3;
      if (floatCount.current === 0) {
        addFloat({
          text: `+${gained} 💰`,
          x: W * 0.3 + Math.random() * W * 0.4,
          y: H * 0.15 + Math.random() * H * 0.15,
          color: '#F7C12A',
          fontSize: 13,
        });
      }
    }
    prevGold.current = gold;
  }, [elements, gold]); // eslint-disable-line react-hooks/exhaustive-deps

  const totalElements = elementsData.length;

  const obtainedElements = elementsData.filter(
    (el) => (elements[el.id] ?? 0) > 0
  );

  const unlockedElements = elementsData.filter((el) =>
    isElementUnlocked(el.id, elements)
  );

  const totalSpawnPerSec = obtainedElements.reduce(
    (sum, el) => sum + calcSpawnRate(el.id, elementLevels[el.id] ?? 0),
    0
  );

  const totalGoldPerSec = obtainedElements.reduce(
    (sum, el) => sum + calcEffectiveIdleRate(el.id, elementLevels[el.id] ?? 0),
    0
  );

  const tierGroups = [1, 2, 3, 4, 5].map((tier) => ({
    tier,
    items: elementsData.filter((el) => el.tier === tier),
  }));

  // 첫 번째 obtained 원소 ID (튜토리얼 스포트라이트용)
  const firstObtainedId = obtainedElements[0]?.id ?? null;

  const unlockRatio = obtainedElements.length / totalElements;

  return (
    <div css={containerStyle}>
      <div css={headerStyle}>
        <h1 css={titleStyle}>원소</h1>
        <div css={goldBadgeStyle}>💰 {gold.toLocaleString()}</div>
      </div>

      {/* 합성 진행 상황 프로그레스 바 */}
      <div css={progressBarWrapStyle}>
        <div css={progressHeaderStyle}>
          <span css={progressLabelStyle}>원소 해금 진행</span>
          <span css={progressCountStyle}>
            {obtainedElements.length} / {totalElements}
          </span>
        </div>
        <div css={progressTrackStyle}>
          <div css={progressFillStyle(unlockRatio)} />
        </div>
      </div>

      {/* 방치 수입 요약 */}
      <div css={idleInfoStyle}>
        <div css={idleStatStyle}>
          <span css={idleLabelStyle}>원소 수집</span>
          <span css={idleValueStyle}>+{totalSpawnPerSec.toFixed(2)}/s</span>
        </div>
        <div css={idleStatStyle}>
          <span css={idleLabelStyle}>골드 수입</span>
          <span css={idleValueStyle}>+{totalGoldPerSec.toFixed(1)}/s</span>
        </div>
        <div css={idleStatStyle}>
          <span css={idleLabelStyle}>발견 가능</span>
          <span css={idleValueStyle}>{unlockedElements.length}종</span>
        </div>
      </div>

      {/* 티어별 원소 그리드 */}
      {tierGroups.map(({ tier, items }) => (
        <div key={tier} css={tierSectionStyle}>
          <div css={tierLabelStyle}>{TIER_LABELS[tier]}</div>
          <div css={elementGridStyle}>
            {items.map((el) => (
              <ElementCard
                key={el.id}
                el={el}
                state={getElementState(el.id, elements)}
                count={elements[el.id] ?? 0}
                level={elementLevels[el.id] ?? 0}
                onSelect={setSelectedEl}
                isTutorialTarget={el.id === firstObtainedId}
              />
            ))}
          </div>
        </div>
      ))}

      {/* 원소 상세 정보 패널 */}
      {selectedEl !== null && (
        <DetailPanel
          el={selectedEl}
          count={elements[selectedEl.id] ?? 0}
          level={elementLevels[selectedEl.id] ?? 0}
          onClose={() => setSelectedEl(null)}
        />
      )}

      {/* 자동 수집 플로팅 이펙트 */}
      <FloatingOverlay items={floatItems} />
    </div>
  );
}
