/**
 * TopAppBar — glass-bg + backdrop-blur 상단 바 (Phase B)
 * Stitch 샘플 구조: 뒤로가기, 타이틀, 더보기 액션
 * Layout.tsx에 통합하여 세로형 페이지에서 사용
 */
import { useLocation } from 'react-router-dom';
import styled from 'styled-components';
import MatIcon from './MatIcon';

interface TopAppBarProps {
  /** 타이틀 (기본: 'pCNT') */
  title?: string;
  /** 뒤로가기 버튼 표시 여부 (기본: /home이 아닐 때만) */
  showBack?: boolean;
  /** 뒤로가기 클릭 핸들러 (기본: history.back()) */
  onBack?: () => void;
  /** 오른쪽 액션 버튼 아이콘 이름 */
  actionIcon?: string;
  /** 오른쪽 액션 클릭 핸들러 */
  onAction?: () => void;
  /** 메뉴 아이콘 토글 여부 (기본: false, more_vert) */
  showMenu?: boolean;
  /** 메뉴 토글 핸들러 (showMenu=true일 때 사용) */
  onMenuToggle?: () => void;
}

const Bar = styled.header`
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(188, 201, 198, 0.3);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04);
  z-index: 100;
  box-sizing: border-box;
`;

const Section = styled.div`
  display: flex;
  align-items: center;
  min-width: 40px;
`;

const LeftSection = styled(Section)`
  gap: 4px;
`;

const Title = styled.h1`
  font-family: 'Inter', 'Pretendard', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md3-primary);
  margin: 0;
  line-height: 1.2;
`;

const IconButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--md3-on-surface-variant);
  transition: background-color 0.2s, opacity 0.2s;

  &:hover {
    background: var(--md3-surface-variant);
    opacity: 0.8;
  }

  &:active {
    background: var(--md3-outline-variant);
  }

  @media (hover: none) and (pointer: coarse) {
    &:hover {
      background: transparent;
    }
    &:active {
      background: var(--md3-surface-variant);
    }
  }
`;

export default function TopAppBar({
  title = 'pCNT',
  showBack,
  onBack,
  actionIcon = 'more_vert',
  onAction,
  showMenu = false,
  onMenuToggle,
}: TopAppBarProps) {
  const location = useLocation();
  const shouldShowBack = showBack ?? location.pathname !== '/home';

  const handleBack = () => {
    if (onBack) {
      onBack();
      return;
    }
    window.history.back();
  };

  return (
    <Bar role="banner">
      <LeftSection>
        {shouldShowBack && (
          <IconButton type="button" onClick={handleBack} aria-label="뒤로 가기">
            <MatIcon name="arrow_back" />
          </IconButton>
        )}
        <Title>{title}</Title>
      </LeftSection>
      <Section>
        <IconButton
          type="button"
          onClick={showMenu ? onMenuToggle : onAction}
          aria-label={showMenu ? '메뉴' : '더보기'}
        >
          <MatIcon name={showMenu ? 'menu' : actionIcon} />
        </IconButton>
      </Section>
    </Bar>
  );
}