"use client";

import { useState } from "react";

type FieldErrors = {
  company?: string;
  phone?: string;
  email?: string;
};

function getPhoneDigits(input: string) {
  return input.replace(/\D/g, "").slice(0, 11);
}

function formatRussianPhoneInput(input: string) {
  const digits = getPhoneDigits(input);

  if (!digits) {
    return "";
  }

  let normalized = digits;

  if (normalized[0] === "8") {
    normalized = `7${normalized.slice(1)}`;
  }

  if (normalized[0] !== "7") {
    normalized = `7${normalized.slice(0, 10)}`;
  }

  normalized = normalized.slice(0, 11);

  const country = "+7";
  const part1 = normalized.slice(1, 4);
  const part2 = normalized.slice(4, 7);
  const part3 = normalized.slice(7, 9);
  const part4 = normalized.slice(9, 11);

  let result = country;

  if (part1) {
    result += ` (${part1}`;
  }

  if (part1.length === 3) {
    result += ")";
  }

  if (part2) {
    result += ` ${part2}`;
  }

  if (part3) {
    result += `-${part3}`;
  }

  if (part4) {
    result += `-${part4}`;
  }

  return result;
}

function normalizePhone(input: string) {
  const digits = getPhoneDigits(input);

  if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
    return `7${digits.slice(1)}`;
  }

  if (digits.length === 10) {
    return `7${digits}`;
  }

  return null;
}

function isValidEmail(email: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

type LeadFormProps = {
  id?: string;
  title?: string;
  description?: string;
  compact?: boolean;
};

export default function LeadForm({
  id,
  title,
  description,
  compact = false,
}: LeadFormProps) {
  const [company, setCompany] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [resultMessage, setResultMessage] = useState("");
  const [submitError, setSubmitError] = useState(false);
  const [errors, setErrors] = useState<FieldErrors>({});

  function validateFields() {
    const nextErrors: FieldErrors = {};
    const normalizedPhone = normalizePhone(phone);
    const trimmedCompany = company.trim();
    const trimmedEmail = email.trim();

    if (trimmedCompany.length < 2) {
      nextErrors.company = "Укажите название объекта или компании";
    }

    if (!normalizedPhone) {
      nextErrors.phone = "Введите российский номер в формате +7";
    }

    if (!trimmedEmail) {
      nextErrors.email = "Введите email";
    } else if (!isValidEmail(trimmedEmail)) {
      nextErrors.email = "Проверьте корректность email";
    }

    return {
      nextErrors,
      normalizedPhone,
      trimmedCompany,
      trimmedEmail,
    };
  }

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setResultMessage("");
    setSubmitError(false);

    const { nextErrors, normalizedPhone, trimmedCompany, trimmedEmail } =
      validateFields();

    if (Object.keys(nextErrors).length > 0 || !normalizedPhone) {
      setErrors(nextErrors);
      return;
    }

    setErrors({});
    setIsSubmitting(true);

    try {
      const response = await fetch("/api/leads", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          company: trimmedCompany,
          phone: normalizedPhone,
          email: trimmedEmail,
          message: message.trim(),
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        setSubmitError(true);
        setResultMessage(data.error || "Ошибка отправки");
        return;
      }

      setSubmitError(false);
      setResultMessage("Заявка отправлена. Мы свяжемся с вами.");
      setCompany("");
      setPhone("");
      setEmail("");
      setMessage("");
    } catch {
      setSubmitError(true);
      setResultMessage("Не удалось сохранить заявку");
    } finally {
      setIsSubmitting(false);
    }
  }

  const fieldClassName =
    "w-full rounded-2xl border bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4";
  const labelClassName = "mb-2 block text-sm font-medium text-neutral-200";
  const helperClassName = "mt-2 text-xs text-neutral-500";
  const errorClassName = "mt-2 text-xs text-rose-300";

  return (
    <div id={id}>
      {(title || description) && (
        <div className={compact ? "mb-6" : "mb-8"}>
          {title && (
            <h3 className="text-2xl font-semibold tracking-[-0.03em] sm:text-3xl">
              {title}
            </h3>
          )}
          {description && (
            <p className="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-400 sm:text-base">
              {description}
            </p>
          )}
        </div>
      )}

      <form onSubmit={handleSubmit} className="grid gap-4 sm:gap-5" noValidate>
        <div>
          <label htmlFor="lead-company" className={labelClassName}>
            Объект или компания
          </label>
          <input
            id="lead-company"
            type="text"
            placeholder="Например: ЖК Сокол, ТСЖ Север, УК Домсервис"
            value={company}
            onChange={(e) => {
              setCompany(e.target.value);
              if (errors.company) {
                setErrors((current) => ({ ...current, company: undefined }));
              }
            }}
            className={`${fieldClassName} ${errors.company ? "border-rose-400/70" : "border-white/10"}`}
            autoComplete="organization"
            required
          />
          {errors.company ? (
            <p className={errorClassName}>{errors.company}</p>
          ) : (
            <p className={helperClassName}>Укажите ЖК, ТСЖ, УК или адрес объекта</p>
          )}
        </div>

        <div>
          <label htmlFor="lead-phone" className={labelClassName}>
            Телефон
          </label>
          <input
            id="lead-phone"
            type="tel"
            placeholder="+7 (999) 123-45-67"
            value={phone}
            onChange={(e) => {
              setPhone(formatRussianPhoneInput(e.target.value));
              if (errors.phone) {
                setErrors((current) => ({ ...current, phone: undefined }));
              }
            }}
            className={`${fieldClassName} ${errors.phone ? "border-rose-400/70" : "border-white/10"}`}
            inputMode="numeric"
            autoComplete="tel"
            required
          />
          {errors.phone ? (
            <p className={errorClassName}>{errors.phone}</p>
          ) : (
            <p className={helperClassName}>Только мобильные и городские номера РФ</p>
          )}
        </div>

        <div>
          <label htmlFor="lead-email" className={labelClassName}>
            Email
          </label>
          <input
            id="lead-email"
            type="email"
            placeholder="name@company.ru"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
              if (errors.email) {
                setErrors((current) => ({ ...current, email: undefined }));
              }
            }}
            className={`${fieldClassName} ${errors.email ? "border-rose-400/70" : "border-white/10"}`}
            autoComplete="email"
            required
          />
          {errors.email ? (
            <p className={errorClassName}>{errors.email}</p>
          ) : (
            <p className={helperClassName}>Отправим ответ и детали по этому адресу</p>
          )}
        </div>

        <div>
          <label htmlFor="lead-message" className={labelClassName}>
            Комментарий
          </label>
          <textarea
            id="lead-message"
            placeholder="Коротко опишите объект, текущий шлагбаум и что хотите улучшить"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-4 py-3.5 text-white outline-none transition-colors placeholder:text-neutral-500 focus:border-emerald-500 sm:px-5 sm:py-4"
          />
        </div>

        <button
          type="submit"
          disabled={isSubmitting}
          className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold transition-colors hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60"
        >
          {isSubmitting ? "Отправка..." : "Оставить заявку"}
        </button>

        {resultMessage && (
          <p className={`text-sm ${submitError ? "text-rose-300" : "text-emerald-300"}`}>
            {resultMessage}
          </p>
        )}
      </form>
    </div>
  );
}