import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { HiSearch } from 'react-icons/hi';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ROUTES } from '@/shared/constants/routes';

const TriggerButton = styled.button`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[3]};
  width: 100%;
  max-width: 520px;
  min-height: 44px;
  padding: ${({ theme }) => `0 ${theme.spacing[4]}`};
  background-color: ${({ theme }) => theme.colors.surfaceInset};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  border-radius: ${({ theme }) => theme.borderRadius.xl};
  color: ${({ theme }) => theme.colors.text.tertiary};
  cursor: pointer;
  transition:
    border-color ${({ theme }) => theme.transitions.fast},
    box-shadow ${({ theme }) => theme.transitions.fast},
    color ${({ theme }) => theme.transitions.fast},
    background-color ${({ theme }) => theme.transitions.fast};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  box-shadow: ${({ theme }) => theme.shadows.inner};

  &:hover {
    border-color: ${({ theme }) => theme.colors.border};
    background-color: ${({ theme }) => theme.colors.surface};
    color: ${({ theme }) => theme.colors.text.secondary};
  }

  &:focus-visible {
    outline: 2px solid ${({ theme }) => theme.colors.primary};
    outline-offset: 2px;
  }

  svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: ${({ theme }) => theme.colors.text.tertiary};
  }
`;

const PlaceholderText = styled.span`
  flex: 1;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const Kbd = styled.kbd`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 ${({ theme }) => theme.spacing[2]};
  border-radius: ${({ theme }) => theme.borderRadius.sm};
  background: ${({ theme }) => theme.colors.surface};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  color: ${({ theme }) => theme.colors.text.tertiary};
  font-size: 0.6875rem;
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  font-family: inherit;
  line-height: 1;
  flex-shrink: 0;
`;

export const GlobalSearchTrigger: React.FC = () => {
  const navigate = useNavigate();
  const { t } = useLocale();

  return (
    <TriggerButton type="button" onClick={() => navigate(ROUTES.SEARCH)}>
      <HiSearch aria-hidden />
      <PlaceholderText>{t('search:keyword.placeholder')}</PlaceholderText>
      <Kbd aria-hidden>/</Kbd>
    </TriggerButton>
  );
};