import React, { useState } from "react";
import axios from "axios";
import styles from "./MainPage.module.css";
import Button from "../../components/Button/Button";

interface Props {
  onSend?: (phone: string) => Promise<void>;
}

const PhoneRequest: React.FC<Props> = ({ onSend }) => {
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  // Автоформатирование "+7 (999) 999-99-99"
  const formatPhone = (value: string) => {
    const digits = value.replace(/\D/g, "");

    let result = "+7 ";
    if (digits.length > 1) result += "(" + digits.substring(1, 4);
    if (digits.length >= 4) result += ") " + digits.substring(4, 7);
    if (digits.length >= 7) result += "-" + digits.substring(7, 9);
    if (digits.length >= 9) result += "-" + digits.substring(9, 11);

    return result;
  };

  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let v = e.target.value;

    if (v.replace(/\D/g, "").length === 0) {
      setPhone("");
      return;
    }

    if (v[0] !== "+") {
      v = "+7" + v;
    }

    setPhone(formatPhone(v));
  };

  const validatePhone = (p: string) => {
    return p.replace(/\D/g, "").length === 11;
  };

  const handleSubmit = async () => {
    setError("");

    if (!validatePhone(phone)) {
      setError("Введите корректный номер телефона");
      return;
    }

    setLoading(true);

    try {
      if (onSend) {
        await onSend(phone);
      } else {
        
        await axios.post("/api/contact/send-phone", { phone });
      }

      setSuccess(true);
      setPhone("");

      setTimeout(() => setSuccess(false), 3000);
    } catch (e) {
      setError("Ошибка отправки. Попробуйте позже.");
    }

    setLoading(false);
  };

  return (
    <div className={styles.form}>
      <input
        className={styles.input}
        placeholder="+7 (___) ___-__-__"
        type="tel"
        value={phone}
        onChange={handlePhoneChange}
        maxLength={18}
      />
    <Button 
                                label="ОТПРАВИТЬ" 
                                onClick={handleSubmit}
                            />
      {/*<button
        className={styles.button}
        onClick={handleSubmit}
        disabled={loading}
      >
        {loading ? "..." : "ОТПРАВИТЬ"}
      </button>*/}

      {error && <p className={styles.error}>{error}</p>}
      {success && <p className={styles.success}>Заявка отправлена!</p>}
    </div>
  );
};

export default PhoneRequest;