// react
import React, { useCallback } from "react";
// third-party
import { useForm } from "react-hook-form";
import { ISucursal } from "~/admin/interfaces/sucursal";
import {
  formatWhatsAppInput,
  isValidWhatsAppFormat,
} from "~/admin/utils/whatsappFormat";
import { VENEZUELA_STATES } from "~/admin/constants/venezuelaStates";

interface Props {
  sucursal?: ISucursal | null;
  onSave: (sucursal: ISucursal) => void;
  onCancel: () => void;
}

const WHATSAPP_MAX_LENGTH = 14; // 58XXX-XXXXXXX

export const SucursalForm = ({ sucursal, onSave, onCancel }: Props) => {
  // 1. Sacamos la referencia fuera del ternario
  const urls = sucursal?.website_urls;

  const normalizedWebsiteLinks =
    Array.isArray(urls) && urls.length > 0 // 2. Aquí TS ya sabe que 'urls' es un array
      ? urls.map((item) => ({
          title: String(item?.title || "").trim(),
          url: String(item?.url || "").trim(),
        }))
      : sucursal?.url
        ? [{ title: "Pagina Web", url: sucursal.url }]
        : [{ title: "", url: "" }];

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    trigger,
    formState: { errors },
  } = useForm<ISucursal>({
    defaultValues: sucursal
      ? {
          ...sucursal,
          website_urls: normalizedWebsiteLinks,
          whatsapp: formatWhatsAppInput(sucursal.whatsapp || ""),
        }
      : {
          sucursalID: 0,
          estado: "",
          name: "",
          url: "",
          email: "",
          banner: "",
          address: "",
          phone: "",
          instagram_url: "",
          website_urls: [{ title: "", url: "" }],
          facebook_url: "",
          tiktok_url: "",
          youtube_url: "",
          mercadolibre_url: "",
          x_url: "",
          map: "",
          whatsapp: "",
        },
  });

  const websiteUrls = watch("website_urls") || [{ title: "", url: "" }];

  const onSubmit = (data: ISucursal) => {
    const cleanedLinks = (data.website_urls || [])
      .map((item) => ({
        title: String(item?.title || "").trim(),
        url: String(item?.url || "").trim(),
      }))
      .filter((item) => item.url);
    data.website_urls = cleanedLinks;
    data.url = cleanedLinks[0]?.url || "";
    onSave(data);
  };

  /** Formats WhatsApp input on keyUp and re-validates (format: 58XXX-XXXXXXX). */
  const handleWhatsAppKeyUp = useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      const input = e.currentTarget;
      const formatted = formatWhatsAppInput(input.value);
      setValue("whatsapp", formatted, { shouldValidate: true });
      void trigger("whatsapp");
    },
    [setValue, trigger],
  );

  return (
    <div className="card">
      <div className="card-header">
        <h3>Sección de Sucursal</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-12">
              <div className="form-group">
                <label>Estado (Venezuela) *</label>
                <select
                  className={`form-control ${errors.estado ? "is-invalid" : ""}`}
                  {...register("estado", {
                    required: "Selecciona el estado de la sucursal",
                  })}
                >
                  <option value="">Seleccionar estado...</option>
                  {VENEZUELA_STATES.map((state) => (
                    <option key={state} value={state}>
                      {state}
                    </option>
                  ))}
                </select>
                {errors.estado && (
                  <div className="invalid-feedback">
                    {errors.estado.message}
                  </div>
                )}
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>Nombre *</label>
                <input
                  type="text"
                  placeholder="Ej: Sucursal Maracaibo Centro"
                  className={`form-control ${errors.name ? "is-invalid" : ""}`}
                  {...register("name", {
                    required: "El nombre de la sucursal es obligatorio",
                  })}
                />
                {errors.name && (
                  <div className="invalid-feedback">{errors.name.message}</div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Páginas web (URLs)</label>
                <small className="form-text text-muted mb-2">
                  Puedes agregar varias URLs para mostrarlas en la card pública.
                </small>
                {websiteUrls.map((_, index) => (
                  <div key={`website-url-${index}`} className="mb-2">
                    <div className="row no-gutters">
                      <div className="col-md-4 pr-md-2 mb-2 mb-md-0">
                        <input
                          type="text"
                          placeholder="Nombre (ej: Pagina Web)"
                          className="form-control"
                          {...register(`website_urls.${index}.title` as const)}
                        />
                      </div>
                      <div className="col-md-7 pr-md-2 mb-2 mb-md-0">
                        <input
                          type="text"
                          placeholder="https://example.com"
                          className="form-control"
                          {...register(`website_urls.${index}.url` as const)}
                        />
                      </div>
                      <div className="col-md-1">
                        <button
                          type="button"
                          className="btn btn-outline-danger w-100"
                          onClick={() => {
                            const next = websiteUrls.filter(
                              (__, i) => i !== index,
                            );
                            setValue(
                              "website_urls",
                              next.length > 0 ? next : [{ title: "", url: "" }],
                              { shouldValidate: true },
                            );
                          }}
                          disabled={websiteUrls.length <= 1}
                          title="Eliminar URL"
                        >
                          <i className="fas fa-trash" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
                <button
                  type="button"
                  className="btn btn-outline-primary btn-sm"
                  onClick={() =>
                    setValue(
                      "website_urls",
                      [...websiteUrls, { title: "", url: "" }],
                      {
                        shouldValidate: true,
                      },
                    )
                  }
                >
                  <i className="fas fa-plus mr-1" />
                  Agregar otra URL
                </button>
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Correo electrónico</label>
                <input
                  type="email"
                  placeholder="example@gmail.com"
                  className={`form-control ${errors.email ? "is-invalid" : ""}`}
                  {...register("email")}
                />
                {errors.email && (
                  <div className="invalid-feedback">{errors.email.message}</div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Banner</label>
                <input
                  type="text"
                  placeholder="https://example.com"
                  className={`form-control ${errors.banner ? "is-invalid" : ""}`}
                  {...register("banner")}
                />
                {errors.banner && (
                  <div className="invalid-feedback">
                    {errors.banner.message}
                  </div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Dirección</label>
                <input
                  type="text"
                  placeholder="Calle 123, Maracaibo"
                  className={`form-control ${errors.address ? "is-invalid" : ""}`}
                  {...register("address")}
                />
                {errors.address && (
                  <div className="invalid-feedback">
                    {errors.address.message}
                  </div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Instagram URL</label>
                <input
                  type="text"
                  placeholder="https://instagram.com/sucursal"
                  className={`form-control ${errors.instagram_url ? "is-invalid" : ""}`}
                  {...register("instagram_url")}
                />
                {errors.instagram_url && (
                  <div className="invalid-feedback">
                    {errors.instagram_url.message}
                  </div>
                )}
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>Facebook URL (opcional)</label>
                <input
                  type="text"
                  placeholder="https://facebook.com/..."
                  className={`form-control ${errors.facebook_url ? "is-invalid" : ""}`}
                  {...register("facebook_url")}
                />
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>TikTok URL (opcional)</label>
                <input
                  type="text"
                  placeholder="https://tiktok.com/@..."
                  className={`form-control ${errors.tiktok_url ? "is-invalid" : ""}`}
                  {...register("tiktok_url")}
                />
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>YouTube URL (opcional)</label>
                <input
                  type="text"
                  placeholder="https://youtube.com/..."
                  className={`form-control ${errors.youtube_url ? "is-invalid" : ""}`}
                  {...register("youtube_url")}
                />
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>MercadoLibre URL (opcional)</label>
                <input
                  type="text"
                  placeholder="https://mercadolibre.com/..."
                  className={`form-control ${errors.mercadolibre_url ? "is-invalid" : ""}`}
                  {...register("mercadolibre_url")}
                />
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>X (Twitter) URL (opcional)</label>
                <input
                  type="text"
                  placeholder="https://x.com/..."
                  className={`form-control ${errors.x_url ? "is-invalid" : ""}`}
                  {...register("x_url")}
                />
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Teléfono</label>
                <input
                  type="text"
                  placeholder="0414-1234567"
                  maxLength={15}
                  className={`form-control ${errors.phone ? "is-invalid" : ""}`}
                  {...register("phone")}
                />
                {errors.phone && (
                  <div className="invalid-feedback">{errors.phone.message}</div>
                )}
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group">
                <label>Mapa</label>
                <input
                  type="text"
                  placeholder="https://maps.google.com"
                  className={`form-control ${errors.map ? "is-invalid" : ""}`}
                  {...register("map")}
                />
                {errors.map && (
                  <div className="invalid-feedback">{errors.map.message}</div>
                )}
              </div>
            </div>
            <div className="col-md-12">
              <div className="form-group" id="sucursal-whatsapp-group">
                <label htmlFor="sucursal-whatsapp-input">WhatsApp</label>
                <input
                  id="sucursal-whatsapp-input"
                  type="text"
                  inputMode="numeric"
                  autoComplete="tel"
                  placeholder="58414-1234567"
                  maxLength={WHATSAPP_MAX_LENGTH}
                  className={`form-control ${errors.whatsapp ? "is-invalid" : ""}`}
                  value={watch("whatsapp") ?? ""}
                  {...register("whatsapp", {
                    validate: (value) =>
                      !value ||
                      isValidWhatsAppFormat(value) ||
                      "El número debe tener el formato 58414-1234567 (código de país 58).",
                  })}
                  onKeyUp={handleWhatsAppKeyUp}
                />
                {errors.whatsapp && (
                  <div className="invalid-feedback" role="alert">
                    {errors.whatsapp.message}
                  </div>
                )}
              </div>
            </div>
          </div>
          <div className="form-actions">
            <button
              type="button"
              onClick={onCancel}
              className="btn btn-secondary mr-2"
            >
              <i className="fas fa-save" /> Cancelar
            </button>
            <button type="submit" className="btn btn-primary">
              <i className="fas fa-save" />
              {sucursal?.sucursalID ? "Actualizar" : "Guardar"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};