import React from 'react';
import styled, {css} from 'styled-components';

export type InputState = 'default' | 'success' | 'error' | 'disabled';

interface TextInputProps {
    label?: string;
    value: string;
    onChange: (value: string) => void;
    state?: InputState;
    placeholder?: string;
    allowClear?: boolean;
    onClear?: () => void;
}

// --- Стили ---

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Arial, sans-serif;
`;

const Label = styled.label<{ $state: InputState }>`
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;

    ${({$state}) => $state === 'disabled' && css`
        color: #9e9e9e;
    `}
`;

const Wrapper = styled.div<{ $state: InputState; $allowClear: boolean }>`
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s;

    /* Default State */
    border: 1px solid #e0e0e0;

    &:focus-within {
        border-color: #b3b3b3;
    }

    /* Success State */
    ${({$state}) => $state === 'success' && css`
    border: 2px solid #4CAF50;
  `} /* Error State */ ${({$state}) => $state === 'error' && css`
    border: 2px solid #F44336;
  `} /* Disabled State */ ${({$state}) => $state === 'disabled' && css`
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
    `} /* Padding adjustments for clear button */ ${({$allowClear}) => $allowClear && css`
        input {
            padding-right: 40px;
        }
    `}
`;

const Input = styled.input<{ $state: InputState }>`
    width: 100%;
    padding: 12px 16px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #0C3B2E;

    &::placeholder {
        color: #A3ADA2;
    }

    &:hover {
        border-color: #72b541;
    }

    &:focus {
        border-color: #72b541;
    }

    ${({$state}) => $state === 'disabled' && css`
        color: #9e9e9e;
        cursor: not-allowed;
    `}
`;

const ClearButton = styled.button<{ $state: InputState }>`
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: #9e9e9e;
    cursor: pointer;
    padding: 0;
    line-height: 1;

    &:hover {
        color: #0C3B2E;
    }

    ${({$state}) => $state === 'disabled' && css`
        cursor: not-allowed;
        color: #c0c0c0;
    `}
`;

export const TextInput: React.FC<TextInputProps> = ({
                                                        label,
                                                        value,
                                                        onChange,
                                                        state = 'default',
                                                        placeholder = 'Текст',
                                                        allowClear = false,
                                                        onClear,
                                                    }) => {
    const isDisabled = state === 'disabled';

    const handleClear = () => {
        if (onClear) {
            onClear();
        } else {
            onChange('');
        }
    };

    return (
        <Container>
            {label && <Label $state={state}>{label}</Label>}

            <Wrapper $state={state} $allowClear={allowClear}>
                <Input
                    type="text"
                    value={value}
                    placeholder={placeholder}
                    disabled={isDisabled}
                    $state={state}
                    onChange={(e) => onChange(e.target.value)}
                />

                {allowClear && (
                    <ClearButton
                        type="button"
                        onClick={handleClear}
                        disabled={isDisabled}
                        $state={state}
                        aria-label="Очистить"
                    >
                        ×
                    </ClearButton>
                )}
            </Wrapper>
        </Container>
    );
};