import React from 'react';
import styled from 'styled-components';
import { HiSearch } from 'react-icons/hi';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button, Input } from '@/shared/components/ui';

const Hero = styled.form`
  display: grid;
  gap: ${({ theme }) => theme.spacing[4]};
  margin-bottom: 0;
`;

const SearchShell = styled.div`
  padding: ${({ theme }) => theme.spacing[5]};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  background: ${({ theme }) => theme.colors.surfaceElevated};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  box-shadow: ${({ theme }) => theme.shadows.md};
`;

const SearchRow = styled.div`
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: ${({ theme }) => theme.layout.toolbarGap};
  align-items: end;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: ${({ theme }) => theme.spacing[4]};
  }
`;

const SearchIconWrap = styled.span`
  position: relative;
  display: block;
  width: 100%;

  svg {
    position: absolute;
    inset-inline-start: ${({ theme }) => theme.spacing[4]};
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: ${({ theme }) => theme.colors.text.tertiary};
    pointer-events: none;
  }

  input {
    padding-inline-start: calc(${({ theme }) => theme.spacing[4]} + 28px);
    min-height: 56px;
    font-size: ${({ theme }) => theme.typography.fontSize.lg};
    border-radius: ${({ theme }) => theme.borderRadius.xl};
    box-shadow: ${({ theme }) => theme.shadows.inner};
    border-color: ${({ theme }) => theme.colors.borderSoft};
  }
`;

interface SearchHeroProps {
  query: string;
  loading?: boolean;
  onQueryChange: (value: string) => void;
  onSubmit: (event?: React.FormEvent) => void;
}

export const SearchHero: React.FC<SearchHeroProps> = ({
  query,
  loading = false,
  onQueryChange,
  onSubmit,
}) => {
  const { t } = useLocale();

  return (
    <Hero onSubmit={onSubmit}>
      <SearchShell>
        <SearchRow>
          <SearchIconWrap>
            <HiSearch aria-hidden />
            <Input
              label={t('search:keyword.label')}
              placeholder={t('search:keyword.placeholder')}
              value={query}
              onChange={(event) => onQueryChange(event.target.value)}
              fullWidth
            />
          </SearchIconWrap>
          <Button type="submit" variant="primary" size="lg" loading={loading}>
            {t('search:actions.search')}
          </Button>
        </SearchRow>
      </SearchShell>
    </Hero>
  );
};