// src/components/Input.tsx
import React from "react";
import styled from "styled-components";

type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> & {
  label: string;
  fullWidth?: boolean;
  errorText?: string;
};

/* сначала сам input — чтобы им можно было пользоваться в других стилях */
const InputEl = styled.input`
  height: 56px;
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 8px;
  background: #f5f8fb;
  padding: 18px 16px 0; /* место под плавающий лейбл */
  color: #24303b;

  font-family: "GTAmerica", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;

  transition: box-shadow 0.18s ease, background 0.18s ease;

  /* нужен пустой placeholder, чтобы работал :placeholder-shown */
  &::placeholder { color: transparent; }

  &:focus {
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
  }
`;

/* лейбл НЕ ссылается на Field, чтобы избежать циклов типов */
const Label = styled.label`
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left top;

  color: #1d2023;
  font-family: "GTAmerica", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;

  pointer-events: none;
  transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, line-height 0.18s ease;

  /* плавающее состояние — при фокусе или когда поле не пустое */
  ${InputEl}:focus + &,
  ${InputEl}:not(:placeholder-shown) + & {
    top: 8px;
    transform: none;
    font-size: 12px;
    line-height: 16px;
  }
`;

const Field = styled.div<{ $full?: boolean; $error?: boolean }>`
  position: relative;
  width: ${({ $full }) => ($full ? "100%" : "auto")};

  /* подсветка ошибки без ссылок из Label на Field */
  ${({ $error }) =>
    $error
      ? `
      ${InputEl} { box-shadow: 0 0 0 2px rgba(220, 38, 38, .25); }
      ${Label}   { color: #dc2626; }
    `
      : ""}
`;

const ErrorText = styled.div`
  margin-top: 6px;
  color: #dc2626;
  font-family: "GTAmerica", sans-serif;
  font-size: 12px;
  line-height: 16px;
`;

const Input = React.forwardRef<HTMLInputElement, Props>(
  ({ label, id, fullWidth, errorText, ...rest }, ref) => {
    // хук всегда вызывается — а потом выбираем id
    const autoId = React.useId();
    const inputId = id ?? autoId;

    return (
      <Field $full={fullWidth} $error={!!errorText}>
        {/* placeholder=" " — чтобы работал :placeholder-shown */}
        <InputEl id={inputId} ref={ref} placeholder=" " {...rest} />
        <Label htmlFor={inputId}>{label}</Label>
        {errorText && <ErrorText>{errorText}</ErrorText>}
      </Field>
    );
  }
);

Input.displayName = "Input";
export default Input;
