import { useCallback, useEffect, useState } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
import { ApiError, createRace, getRaceById, updateRace } from "../api";
import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
import { DatePickerField, StartTimeSelects } from "../components";
import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";

function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[«»"]/g, "")
    .replace(/[^a-zа-яё0-9]+/gi, "-")
    .replace(/(^-|-$)/g, "")
    .substring(0, 60);
}

function generateId(date: string, title: string): string {
  return `${date}-${slugify(title)}`;
}

const STATUS_OPTIONS: { value: string; label: string }[] = [
  { value: "", label: "Не указан" },
  { value: "planned", label: "Планирую" },
  { value: "registered", label: "Зарегистрирован" },
  { value: "completed", label: "Пробежал" },
];

interface FormData {
  date: string;
  title: string;
  distanceKm: string;
  status: string;
  officialUrl: string;
  coverImageUrl: string;
  startTime: string;
  clusterSchedule: string;
  bibPickup: string;
  bibNumber: string;
  finishTime: string;
  finishPlace: string;
  notes: string;
}

const EMPTY_FORM: FormData = {
  date: "",
  title: "",
  distanceKm: "",
  status: "planned",
  officialUrl: "",
  coverImageUrl: "",
  startTime: "",
  clusterSchedule: "",
  bibPickup: "",
  bibNumber: "",
  finishTime: "",
  finishPlace: "",
  notes: "",
};

function raceToFormData(race: Race): FormData {
  const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
  return {
    date: dateValue,
    title: race.title,
    distanceKm: String(race.distanceKm),
    status: race.status ?? "",
    officialUrl: race.officialUrl ?? "",
    coverImageUrl: race.coverImageUrl ?? "",
    startTime: race.startTime ?? "",
    clusterSchedule: race.clusterSchedule ?? "",
    bibPickup: race.bibPickup ?? "",
    bibNumber: race.bibNumber ?? "",
    finishTime: race.finishTime ?? "",
    finishPlace: race.finishPlace ?? "",
    notes: race.notes ?? "",
  };
}

function emptyToNull(value: string): string | null {
  const trimmed = value.trim();
  return trimmed === "" ? null : trimmed;
}

function validateForm(form: FormData): string[] {
  const errors: string[] = [];
  if (!form.date.trim()) {
    errors.push("Дата обязательна.");
  }
  if (!form.title.trim()) {
    errors.push("Название обязательно.");
  }
  const km = parseFloat(form.distanceKm);
  if (Number.isNaN(km) || km <= 0) {
    errors.push("Дистанция должна быть положительным числом.");
  }
  return errors;
}

function isRaceDateTodayOrPast(date: string): boolean {
  if (!date.trim()) {
    return false;
  }
  const today = new Date();
  const y = today.getFullYear();
  const m = String(today.getMonth() + 1).padStart(2, "0");
  const d = String(today.getDate()).padStart(2, "0");
  return isRaceDateInPast(date) || date.slice(0, 10) === `${y}-${m}-${d}`;
}

export function RaceFormPage(): JSX.Element {
  const { raceId } = useParams<{ raceId: string }>();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const isEditMode = Boolean(raceId);

  const [form, setForm] = useState<FormData>(EMPTY_FORM);
  const [isLoading, setIsLoading] = useState<boolean>(isEditMode);
  const [isSaving, setIsSaving] = useState<boolean>(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [validationErrors, setValidationErrors] = useState<string[]>([]);

  useEffect(() => {
    if (!raceId) {
      return;
    }

    let isMounted = true;

    async function loadRace(): Promise<void> {
      try {
        const race = await getRaceById(raceId!);
        if (!isMounted) {
          return;
        }
        setForm(raceToFormData(race));
        setErrorMessage(null);
      } catch (error) {
        if (!isMounted) {
          return;
        }
        setErrorMessage(error instanceof ApiError ? error.message : "Не удалось загрузить данные старта.");
      } finally {
        if (isMounted) {
          setIsLoading(false);
        }
      }
    }

    void loadRace();
    return () => {
      isMounted = false;
    };
  }, [raceId]);

  useEffect(() => {
    if (isEditMode) {
      return;
    }
    const d = searchParams.get("date");
    if (d && /^\d{4}-\d{2}-\d{2}$/.test(d)) {
      setForm((prev) => (prev.date === d ? prev : { ...prev, date: d }));
    }
  }, [isEditMode, searchParams]);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
      const { name, value } = event.target;
      setForm((prev) => {
        const next = { ...prev, [name]: value };
        if (name === "finishTime") {
          const trimmed = value.trim();
          if (trimmed !== "" && parseFinishTimeToSeconds(trimmed) !== null) {
            return { ...next, status: "completed" };
          }
        }
        return next;
      });
    },
    [],
  );

  const handleSubmit = useCallback(
    async (event: React.FormEvent) => {
      event.preventDefault();
      setErrorMessage(null);

      const errors = validateForm(form);
      setValidationErrors(errors);
      if (errors.length > 0) {
        return;
      }

      setIsSaving(true);

      try {
        const finishTrimmed = form.finishTime.trim();
        const hasParsedFinish =
          finishTrimmed !== "" && parseFinishTimeToSeconds(finishTrimmed) !== null;
        let statusValue: RaceStatus | null =
          form.status === "planned" || form.status === "registered" || form.status === "completed"
            ? form.status
            : null;
        if (hasParsedFinish) {
          statusValue = "completed";
        }

        if (isEditMode && raceId) {
          const payload: UpdateRacePayload = {
            date: form.date.trim(),
            title: form.title.trim(),
            distanceKm: parseFloat(form.distanceKm),
            status: statusValue,
            officialUrl: emptyToNull(form.officialUrl),
            coverImageUrl: emptyToNull(form.coverImageUrl),
            startTime: emptyToNull(form.startTime),
            clusterSchedule: emptyToNull(form.clusterSchedule),
            bibPickup: emptyToNull(form.bibPickup),
            bibNumber: emptyToNull(form.bibNumber),
            finishTime: emptyToNull(form.finishTime),
            finishPlace: emptyToNull(form.finishPlace),
            notes: emptyToNull(form.notes),
          };

          await updateRace(raceId, payload);
          navigate(`/races/${raceId}`);
        } else {
          const id = generateId(form.date.trim(), form.title.trim());
          const payload: CreateRacePayload = {
            id,
            date: form.date.trim(),
            title: form.title.trim(),
            distanceKm: parseFloat(form.distanceKm),
            status: statusValue,
            officialUrl: emptyToNull(form.officialUrl),
            coverImageUrl: emptyToNull(form.coverImageUrl),
            startTime: emptyToNull(form.startTime),
            clusterSchedule: emptyToNull(form.clusterSchedule),
            bibPickup: emptyToNull(form.bibPickup),
            bibNumber: emptyToNull(form.bibNumber),
            finishTime: emptyToNull(form.finishTime),
            finishPlace: emptyToNull(form.finishPlace),
            notes: emptyToNull(form.notes),
          };

          const created = await createRace(payload);
          navigate(`/races/${created.id}`);
        }
      } catch (error) {
        if (error instanceof ApiError) {
          setErrorMessage(error.details.length > 0 ? error.details.join("; ") : error.message);
        } else {
          setErrorMessage("Произошла ошибка при сохранении.");
        }
      } finally {
        setIsSaving(false);
      }
    },
    [form, isEditMode, raceId, navigate],
  );

  const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
  const showResultFields = isRaceDateTodayOrPast(form.date);
  const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";

  if (isLoading) {
    return (
      <section className="page page--race-form" aria-busy="true">
        <h1 className="page__title">{pageTitle}</h1>
        <p className="page__subtitle">Загружаем данные...</p>
      </section>
    );
  }

  return (
    <section className="page page--race-form">
      <h1 className="page__title">{pageTitle}</h1>

      {errorMessage ? (
        <p className="page__subtitle page__subtitle--error" role="alert">{errorMessage}</p>
      ) : null}

      {validationErrors.length > 0 ? (
        <ul className="form-errors" role="alert">
          {validationErrors.map((msg) => (
            <li key={msg} className="form-errors__item">{msg}</li>
          ))}
        </ul>
      ) : null}

      <form className="race-form" onSubmit={handleSubmit} noValidate>
        <fieldset className="race-form__group">
          <legend className="race-form__legend">Основная информация</legend>

          <div className="race-form__field">
            <span className="race-form__label">Дата *</span>
            <DatePickerField
              name="date"
              value={form.date}
              onChange={(next) => {
                setForm((prev) => ({ ...prev, date: next }));
              }}
              required
            />
          </div>

          <label className="race-form__field">
            <span className="race-form__label">Название *</span>
            <input
              className="race-form__input"
              type="text"
              name="title"
              value={form.title}
              onChange={handleChange}
              required
              placeholder="Казанский марафон"
            />
          </label>

          <label className="race-form__field">
            <span className="race-form__label">Дистанция, км *</span>
            <input
              className="race-form__input"
              type="number"
              name="distanceKm"
              value={form.distanceKm}
              onChange={handleChange}
              required
              min="0.1"
              step="0.001"
              placeholder="21.1"
            />
          </label>

          <label className="race-form__field">
            <span className="race-form__label">Статус</span>
            <select
              className="race-form__input"
              name="status"
              value={form.status}
              onChange={handleChange}
            >
              {STATUS_OPTIONS.map((opt) => (
                <option key={opt.value} value={opt.value}>{opt.label}</option>
              ))}
            </select>
          </label>
        </fieldset>

        <fieldset className="race-form__group">
          <legend className="race-form__legend">Организация</legend>

          {hideOrgScheduleFields ? null : (
            <label className="race-form__field">
              <span className="race-form__label">Сайт организатора</span>
              <input
                className="race-form__input"
                type="url"
                name="officialUrl"
                value={form.officialUrl}
                onChange={handleChange}
                placeholder="https://…"
              />
            </label>
          )}

          <label className="race-form__field">
            <span className="race-form__label">URL обложки</span>
            <input
              className="race-form__input"
              type="url"
              name="coverImageUrl"
              value={form.coverImageUrl}
              onChange={handleChange}
              placeholder="https://…"
            />
          </label>

          {hideOrgScheduleFields ? null : (
            <div className="race-form__field">
              <span className="race-form__label">Время старта</span>
              <StartTimeSelects
                value={form.startTime}
                onChange={(next) => {
                  setForm((prev) => ({ ...prev, startTime: next }));
                }}
              />
            </div>
          )}

          {hideOrgScheduleFields ? null : (
            <label className="race-form__field">
              <span className="race-form__label">Расписание кластеров</span>
              <input
                className="race-form__input"
                type="text"
                name="clusterSchedule"
                value={form.clusterSchedule}
                onChange={handleChange}
              />
            </label>
          )}

          {hideOrgScheduleFields ? null : (
            <label className="race-form__field">
              <span className="race-form__label">Выдача номеров</span>
              <input
                className="race-form__input"
                type="text"
                name="bibPickup"
                value={form.bibPickup}
                onChange={handleChange}
              />
            </label>
          )}

          <label className="race-form__field">
            <span className="race-form__label">Стартовый номер</span>
            <input
              className="race-form__input"
              type="text"
              name="bibNumber"
              value={form.bibNumber}
              onChange={handleChange}
              placeholder="1234"
            />
          </label>
        </fieldset>

        {showResultFields ? (
          <fieldset className="race-form__group">
            <legend className="race-form__legend">Результаты</legend>

            <label className="race-form__field">
              <span className="race-form__label">Финишное время</span>
              <input
                className="race-form__input"
                type="text"
                name="finishTime"
                value={form.finishTime}
                onChange={handleChange}
                placeholder="1:45:30"
              />
            </label>

            <label className="race-form__field">
              <span className="race-form__label">Место на финише</span>
              <input
                className="race-form__input"
                type="text"
                name="finishPlace"
                value={form.finishPlace}
                onChange={handleChange}
                placeholder="12/340"
              />
            </label>
          </fieldset>
        ) : null}

        <fieldset className="race-form__group">
          <legend className="race-form__legend">Дополнительно</legend>

          <label className="race-form__field">
            <span className="race-form__label">Заметки</span>
            <textarea
              className="race-form__input race-form__input--textarea"
              name="notes"
              value={form.notes}
              onChange={handleChange}
              rows={4}
            />
          </label>
        </fieldset>

        <div className="race-form__actions">
          <button className="btn btn--primary" type="submit" disabled={isSaving}>
            {isSaving ? "Сохраняем…" : isEditMode ? "Сохранить" : "Создать"}
          </button>
          <Link
            className="btn btn--secondary"
            to={isEditMode && raceId ? `/races/${raceId}` : "/races"}
          >
            Отмена
          </Link>
        </div>
      </form>
    </section>
  );
}