import { Ionicons } from '@expo/vector-icons';
import { memo, useState } from 'react';
import { Pressable, StyleSheet, TextInput, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

type HeaderProps = {
  onSearchChange?: (query: string) => void;
};

export const Header = memo(function Header({ onSearchChange }: HeaderProps) {
  const [showSearch, setShowSearch] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearchChange = (text: string) => {
    setSearchQuery(text);
    onSearchChange?.(text);
  };

  const handleSearchToggle = () => {
    if (showSearch && searchQuery) {
      setSearchQuery('');
      onSearchChange?.('');
    }
    setShowSearch(!showSearch);
  };

  return (
    <View style={styles.container}>
      {showSearch ? (
        <View style={styles.searchContainer}>
          <Ionicons name="search" size={20} color="#666" />
          <TextInput
            placeholder="Search templates..."
            placeholderTextColor="#666"
            value={searchQuery}
            onChangeText={handleSearchChange}
            style={styles.searchInput}
            autoFocus
          />
          <Pressable onPress={handleSearchToggle}>
            <Ionicons name="close" size={24} color="#666" />
          </Pressable>
        </View>
      ) : (
        <>
          <Svg width={89} height={13} viewBox="0 0 89 13" style={styles.logo}>
            <Path d="M11.268 6.21003C11.736 6.35403 12.138 6.67203 12.474 7.16403C12.81 7.64403 12.978 8.19603 12.978 8.82003C12.978 10.152 12.546 11.148 11.682 11.808C10.818 12.456 9.558 12.78 7.902 12.78H0.486001C0.354001 12.78 0.240001 12.732 0.144001 12.636C0.0480012 12.54 1.2368e-06 12.426 1.2368e-06 12.294V0.666029C1.2368e-06 0.534029 0.0480012 0.420029 0.144001 0.324029C0.240001 0.228029 0.354001 0.180028 0.486001 0.180028H7.722C9.426 0.180028 10.68 0.492029 11.484 1.11603C12.3 1.72803 12.708 2.65803 12.708 3.90603V3.96003C12.708 4.53603 12.552 5.02803 12.24 5.43603C11.928 5.84403 11.604 6.10203 11.268 6.21003ZM7.83 4.06803C7.83 3.85203 7.764 3.66603 7.632 3.51003C7.512 3.35403 7.332 3.27603 7.092 3.27603H4.68V4.91403H7.092C7.332 4.91403 7.512 4.83003 7.632 4.66203C7.764 4.48203 7.83 4.28403 7.83 4.06803ZM7.29 9.68403C7.566 9.68403 7.77 9.59403 7.902 9.41403C8.046 9.22203 8.118 9.01203 8.118 8.78403V8.76603C8.118 8.53803 8.04 8.34003 7.884 8.17203C7.74 8.00403 7.542 7.92003 7.29 7.92003H4.68V9.68403H7.29ZM27.245 9.27003C27.377 9.27003 27.491 9.31803 27.587 9.41403C27.683 9.51003 27.731 9.62403 27.731 9.75603V12.294C27.731 12.426 27.683 12.54 27.587 12.636C27.491 12.732 27.377 12.78 27.245 12.78H15.869C15.737 12.78 15.623 12.732 15.527 12.636C15.431 12.54 15.383 12.426 15.383 12.294V0.666029C15.383 0.534029 15.431 0.420029 15.527 0.324029C15.623 0.228029 15.737 0.180028 15.869 0.180028H27.065C27.197 0.180028 27.311 0.228029 27.407 0.324029C27.503 0.420029 27.551 0.534029 27.551 0.666029V3.20403C27.551 3.33603 27.503 3.45003 27.407 3.54603C27.311 3.64203 27.197 3.69003 27.065 3.69003H20.063V4.82403H26.075C26.207 4.82403 26.321 4.87203 26.417 4.96803C26.513 5.06403 26.561 5.17803 26.561 5.31003V7.65003C26.561 7.78203 26.513 7.89603 26.417 7.99203C26.321 8.08803 26.207 8.13603 26.075 8.13603H20.063V9.27003H27.245ZM37.6959 4.75203C39.0159 4.89603 40.0719 5.13003 40.8639 5.45403C41.6679 5.77803 42.2499 6.20403 42.6099 6.73203C42.9699 7.26003 43.1499 7.92003 43.1499 8.71203C43.1499 9.57603 42.8679 10.332 42.3039 10.98C41.7519 11.616 40.9839 12.108 39.9999 12.456C39.0159 12.792 37.8939 12.96 36.6339 12.96C35.2299 12.96 34.0419 12.786 33.0699 12.438C32.0979 12.09 31.3719 11.628 30.8919 11.052C30.4119 10.464 30.1719 9.82203 30.1719 9.12603C30.1719 9.00603 30.2079 8.91003 30.2799 8.83803C30.3639 8.76603 30.4659 8.73003 30.5859 8.73003H34.2759C34.5279 8.73003 34.7319 8.80803 34.8879 8.96403C35.0919 9.15603 35.3199 9.28803 35.5719 9.36003C35.8239 9.42003 36.1779 9.45003 36.6339 9.45003C37.7739 9.45003 38.3439 9.27603 38.3439 8.92803C38.3439 8.78403 38.2659 8.66403 38.1099 8.56803C37.9659 8.46003 37.7019 8.37003 37.3179 8.29803C36.9459 8.21403 36.3939 8.13003 35.6619 8.04603C34.0179 7.85403 32.7579 7.44603 31.8819 6.82203C31.0059 6.18603 30.5679 5.29203 30.5679 4.14003C30.5679 3.32403 30.8139 2.60403 31.3059 1.98003C31.7979 1.35603 32.4939 0.870029 33.3939 0.522028C34.3059 0.174029 35.3619 2.86102e-05 36.5619 2.86102e-05C37.8099 2.86102e-05 38.9019 0.198029 39.8379 0.594028C40.7739 0.978029 41.4879 1.45803 41.9799 2.03403C42.4719 2.61003 42.7179 3.17403 42.7179 3.72603C42.7179 3.84603 42.6759 3.94203 42.5919 4.01403C42.5199 4.08603 42.4179 4.12203 42.2859 4.12203H38.4159C38.2119 4.12203 38.0259 4.05003 37.8579 3.90603C37.7259 3.78603 37.5699 3.69003 37.3899 3.61803C37.2099 3.54603 36.9339 3.51003 36.5619 3.51003C35.7579 3.51003 35.3559 3.67803 35.3559 4.01403C35.3559 4.19403 35.5119 4.33803 35.8239 4.44603C36.1359 4.54203 36.7599 4.64403 37.6959 4.75203ZM58.2089 0.180028C58.3409 0.180028 58.4549 0.228029 58.5509 0.324029C58.6469 0.420029 58.6949 0.534029 58.6949 0.666029V3.56403C58.6949 3.69603 58.6469 3.81003 58.5509 3.90603C58.4549 4.00203 58.3409 4.05003 58.2089 4.05003H54.3389V12.294C54.3389 12.426 54.2909 12.54 54.1949 12.636C54.0989 12.732 53.9849 12.78 53.8529 12.78H50.1449C50.0129 12.78 49.8989 12.732 49.8029 12.636C49.7069 12.54 49.6589 12.426 49.6589 12.294V4.05003H45.7889C45.6569 4.05003 45.5429 4.00203 45.4469 3.90603C45.3509 3.81003 45.3029 3.69603 45.3029 3.56403V0.666029C45.3029 0.534029 45.3509 0.420029 45.4469 0.324029C45.5429 0.228029 45.6569 0.180028 45.7889 0.180028H58.2089ZM64.6999 12.168C64.5439 12.576 64.2739 12.78 63.8899 12.78H60.4879C60.3799 12.78 60.2839 12.744 60.1999 12.672C60.1279 12.588 60.0919 12.492 60.0919 12.384L60.1099 12.276L64.0339 0.774028C64.0819 0.618029 64.1719 0.480029 64.3039 0.360028C64.4359 0.240028 64.6159 0.180028 64.8439 0.180028H69.8479C70.0759 0.180028 70.2559 0.240028 70.3879 0.360028C70.5199 0.480029 70.6099 0.618029 70.6579 0.774028L74.5819 12.276L74.5999 12.384C74.5999 12.492 74.5579 12.588 74.4739 12.672C74.4019 12.744 74.3119 12.78 74.2039 12.78H70.8019C70.4179 12.78 70.1479 12.576 69.9919 12.168L69.5419 10.908H65.1499L64.6999 12.168ZM67.3459 3.65403L66.0679 7.39803H68.6239L67.3459 3.65403ZM85.0328 9.09003H88.2908C88.4228 9.09003 88.5368 9.13803 88.6328 9.23403C88.7288 9.33003 88.7768 9.44403 88.7768 9.57603V12.294C88.7768 12.426 88.7288 12.54 88.6328 12.636C88.5368 12.732 88.4228 12.78 88.2908 12.78H76.8788C76.7468 12.78 76.6328 12.732 76.5368 12.636C76.4408 12.54 76.3928 12.426 76.3928 12.294V9.57603C76.3928 9.44403 76.4408 9.33003 76.5368 9.23403C76.6328 9.13803 76.7468 9.09003 76.8788 9.09003H80.1728V3.87003H76.8788C76.7468 3.87003 76.6328 3.82203 76.5368 3.72603C76.4408 3.63003 76.3928 3.51603 76.3928 3.38403V0.666029C76.3928 0.534029 76.4408 0.420029 76.5368 0.324029C76.6328 0.228029 76.7468 0.180028 76.8788 0.180028H88.2908C88.4228 0.180028 88.5368 0.228029 88.6328 0.324029C88.7288 0.420029 88.7768 0.534029 88.7768 0.666029V3.38403C88.7768 3.51603 88.7288 3.63003 88.6328 3.72603C88.5368 3.82203 88.4228 3.87003 88.2908 3.87003H85.0328V9.09003Z" fill="#F5F8FF"/>
          </Svg>
          <Pressable onPress={handleSearchToggle} style={styles.searchButton}>
            <Ionicons name="search" size={24} color="#F5F8FF" />
          </Pressable>
        </>
      )}
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 0,
    marginTop: 14,
    paddingHorizontal: 16,
  },
  logo: {
    width: 90,
    height: 18,
  },
  searchButton: {
    position: 'absolute',
    right: 16,
    padding: 4,
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1B1D24',
    borderRadius: 12,
    paddingHorizontal: 12,
    height: 28,
    gap: 8,
  },
  searchInput: {
    flex: 1,
    color: '#F5F8FF',
    fontSize: 12,
    height: '100%',
  },
});