import React, { useEffect, useMemo, useRef, useState } from "react";
import { Modal, Button, Form, Row, Col, Alert, Nav } from "react-bootstrap";
import Swal from "sweetalert2";
import { router } from "@inertiajs/react";
import { Cliente } from "../../../../interfaces";
import { useLoading } from "../../../../LoadingContext";
import { getLocalidades, getProvinciaConLocalidades, getProvincias, refreshClientes } from "../../../../services/dataService";
import FormDateInputEs from "../../../../Components/Common/FormDateInputEs";
import { calendarYmdFromServer } from "../../../../utils/serverCalendarDate";


interface EditarClienteModalProps {
  show: boolean;
  onHide: () => void;
  cliente: Cliente;
  onUpdated?: () => void | Promise<void>;
}

interface LocalidadOption {
  CodLoc: number;
  CPLoc: string;
  DesLoc: string;
  provincia?: {
    CodPro: number;
    DesPro: string;
  };
}

interface TipoViaOption {
  CodTipVia: number;
  DesTipVia: string;
}

interface ProvinciaOption {
  CodPro: number;
  DesPro: string;
}

const TELEPHONE_FIELDS = new Set(["TelFijCli", "TelMovCli"]);
const SHORT_TEXT_FIELDS = new Set(["BloDomFis", "EscDomFis", "PlaDomFis", "PueDomFis"]);

const toDateInput = (value: any): string => {
  if (!value) return "";
  return calendarYmdFromServer(String(value));
};

const normalizeErrors = (err: any): Record<string, string> => {
  if (!err || typeof err !== "object") return {};
  const normalized: Record<string, string> = {};
  Object.entries(err).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      normalized[key] = value[0] ? String(value[0]) : "";
      return;
    }
    normalized[key] = value ? String(value) : "";
  });
  return normalized;
};

const buildInitialForm = (source: Cliente) => ({
  CodCli: source.CodCli,
  NumCifCli: source.NumCifCli || "",
  RazSocCli: source.RazSocCli || "",
  FecIniCli: toDateInput((source as any).FecIniCli),
  TelFijCli: source.TelFijCli || "",
  TelMovCli: source.TelMovCli || "",
  EmaCli: source.EmaCli || "",
  EmaCliOpc: source.EmaCliOpc || "",
  WebCli: (source as any).WebCli || "",
  CodTipViaFis: (source as any).CodTipViaFis ?? "",
  NomViaDomFis: (source as any).NomViaDomFis || "",
  NumViaDomFis: (source as any).NumViaDomFis || "",
  BloDomFis: (source as any).BloDomFis || "",
  EscDomFis: (source as any).EscDomFis || "",
  PlaDomFis: (source as any).PlaDomFis || "",
  PueDomFis: (source as any).PueDomFis || "",
  CPLocFis: (source as any).CPLocFis || "",
  CodLocFis: (source as any).CodLocFis ?? "",
  CodProUI: (source as any)?.localidad?.provincia?.CodPro ?? "",
  CodTipCli: (source as any).CodTipCli ?? "",
  CodSecCli: (source as any).CodSecCli ?? "",
  CodCom: (source as any).CodCom ?? "",
  CodCol: (source as any).CodCol ?? "",
  EstCli: (source as any).EstCli ?? 1,
  DireccionBBDD: (source as any).DireccionBBDD || "",
  ObsCli: (source as any).ObsCli || "",
});

const EditarClienteModal: React.FC<EditarClienteModalProps> = ({ show, onHide, cliente, onUpdated }) => {
  const [form, setForm] = useState<any>(buildInitialForm(cliente));
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<{ [key: string]: string }>({});
  const [serverError, setServerError] = useState<string>("");
  const [activeTab, setActiveTab] = useState<"basicos" | "fiscal" | "otros">("basicos");
  const [localidades, setLocalidades] = useState<LocalidadOption[]>([]);
  const [provincias, setProvincias] = useState<ProvinciaOption[]>([]);
  const [tiposVia, setTiposVia] = useState<TipoViaOption[]>([]);
  const didHydrateUbicacionRef = useRef(false);
  const { showLoading, hideLoading } = useLoading();

  useEffect(() => {
    setForm(buildInitialForm(cliente));
    setActiveTab("basicos");
    didHydrateUbicacionRef.current = false;
  }, [cliente, show]);

  const resolveProvinciaDesdeLocalidad = async (codLoc: number): Promise<number | null> => {
    try {
      const response = await getLocalidades();
      const localidadesAll = Array.isArray(response?.data) ? response.data : [];
      const localidad = localidadesAll.find((item: any) => Number(item?.CodLoc) === Number(codLoc));
      return Number(localidad?.CodPro ?? localidad?.provincia?.CodPro ?? 0) || null;
    } catch {
      return null;
    }
  };

  useEffect(() => {
    if (!show) return;

    const loadCatalogos = async () => {
      try {
        const [provinciasRes, tiposViaRes] = await Promise.all([
          getProvincias(),
          fetch(route("tipo-via.listar") as string).then((r) => r.json()),
        ]);
        setProvincias(provinciasRes?.data || []);
        setTiposVia(tiposViaRes?.data || []);
      } catch {
        setServerError("No se pudieron cargar los catálogos de apoyo.");
      }
    };

    loadCatalogos();
  }, [show]);

  const handleChange = (e: React.ChangeEvent<any>) => {
    const { name, value } = e.target;
    let normalizedValue = value;
    if (TELEPHONE_FIELDS.has(name)) {
      normalizedValue = String(value || "").replace(/\D/g, "").slice(0, 9);
    } else if (SHORT_TEXT_FIELDS.has(name)) {
      normalizedValue = String(value || "").slice(0, 3);
    }
    setForm((prev: any) => ({ ...prev, [name]: normalizedValue }));
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: "" }));
    }
  };

  const localidadesFiltradas = useMemo(() => localidades, [localidades]);

  useEffect(() => {
    const codPro = Number(form.CodProUI);
    if (!codPro) {
      setLocalidades([]);
      return;
    }

    const loadLocalidades = async () => {
      try {
        const response = await getProvinciaConLocalidades(codPro);
        setLocalidades((response?.data?.localidades || []) as LocalidadOption[]);
      } catch {
        setLocalidades([]);
      }
    };

    loadLocalidades();
  }, [form.CodProUI]);

  useEffect(() => {
    if (!show || didHydrateUbicacionRef.current) return;
    didHydrateUbicacionRef.current = true;

    const codLoc = Number(form.CodLocFis);
    if (!codLoc) return;

    const hydrateUbicacion = async () => {
      let codPro = Number(form.CodProUI);

      if (!codPro) {
        codPro = (await resolveProvinciaDesdeLocalidad(codLoc)) ?? 0;
      }

      if (!codPro) return;

      try {
        const response = await getProvinciaConLocalidades(codPro);
        const locs = (response?.data?.localidades || []) as LocalidadOption[];
        setLocalidades(locs);

        const loc = locs.find((item) => Number(item.CodLoc) === codLoc);
        setForm((prev: any) => ({
          ...prev,
          CodProUI: codPro,
          CodLocFis: loc?.CodLoc ?? prev.CodLocFis,
          CPLocFis: loc?.CPLoc ?? prev.CPLocFis,
        }));
      } catch {
        // Si falla la hidratación, dejamos los valores actuales del formulario.
      }
    };

    hydrateUbicacion();
  }, [show, form.CodLocFis, form.CodProUI]);

  useEffect(() => {
    const codLoc = Number(form.CodLocFis);
    if (!codLoc || !localidades.length) return;

    const loc = localidades.find((item) => Number(item.CodLoc) === codLoc);
    if (!loc) return;

    setForm((prev: any) => ({
      ...prev,
      CPLocFis: loc.CPLoc || prev.CPLocFis,
      localidad: loc.DesLoc || "",
      provincia: loc.provincia?.DesPro || "",
    }));
  }, [form.CodLocFis, localidades]);

  const setLocalidadByCodLoc = (codLoc: string | number) => {
    const loc = localidades.find((item) => Number(item.CodLoc) === Number(codLoc));
    if (!loc) return;
    setForm((prev: any) => ({
      ...prev,
      CodLocFis: loc.CodLoc,
      CPLocFis: loc.CPLoc,
      CodProUI: loc.provincia?.CodPro || prev.CodProUI,
    }));
  };

  const handleProvinciaChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const codPro = e.target.value;
    setForm((prev: any) => ({
      ...prev,
      CodProUI: codPro,
      CodLocFis: "",
      CPLocFis: "",
    }));
    setErrors((prev) => ({ ...prev, CodLocFis: "", CPLocFis: "" }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});
    setServerError("");

    const newErrors: { [key: string]: string } = {};
    if (!form.RazSocCli) newErrors.RazSocCli = "La razón social es obligatoria.";
    if (!form.NumCifCli) newErrors.NumCifCli = "El NIF/CIF es obligatorio.";
    if (!form.CodTipViaFis) newErrors.CodTipViaFis = "El tipo de vía es obligatorio.";
    if (!form.NomViaDomFis) newErrors.NomViaDomFis = "El nombre de la vía es obligatorio.";
    if (!form.NumViaDomFis) newErrors.NumViaDomFis = "El número es obligatorio.";
    if (!form.BloDomFis) newErrors.BloDomFis = "El bloque es obligatorio.";
    if (!form.EscDomFis) newErrors.EscDomFis = "La escalera es obligatoria.";
    if (!form.PlaDomFis) newErrors.PlaDomFis = "El piso es obligatorio.";
    if (!form.PueDomFis) newErrors.PueDomFis = "La puerta es obligatoria.";
    if (!form.CPLocFis) newErrors.CPLocFis = "El código postal es obligatorio.";
    if (!form.CodLocFis) newErrors.CodLocFis = "La localidad es obligatoria.";
    if (!form.TelMovCli) newErrors.TelMovCli = "El teléfono móvil es obligatorio.";
    if (!form.EmaCli) newErrors.EmaCli = "El correo electrónico es obligatorio.";
    if (!form.FecIniCli) newErrors.FecIniCli = "La fecha de inicio es obligatoria.";

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      setServerError("Faltan campos obligatorios para guardar.");
      return;
    }

    const confirm = await Swal.fire({
      title: "¿Guardar cambios?",
      text: "¿Deseas actualizar los datos del cliente?",
      icon: "question",
      showCancelButton: true,
      confirmButtonText: "Sí, guardar",
      cancelButtonText: "Cancelar"
    });
    if (!confirm.isConfirmed) return;

    setLoading(true);
    showLoading();

    const payload: Record<string, any> = {
      RazSocCli: form.RazSocCli,
      NomComCli: form.RazSocCli,
      NumCifCli: form.NumCifCli,
      CodTipViaFis: Number(form.CodTipViaFis),
      NomViaDomFis: form.NomViaDomFis,
      NumViaDomFis: form.NumViaDomFis,
      BloDomFis: form.BloDomFis,
      EscDomFis: form.EscDomFis,
      PlaDomFis: form.PlaDomFis,
      PueDomFis: form.PueDomFis,
      CodLocFis: Number(form.CodLocFis),
      CPLocFis: form.CPLocFis,
      TelFijCli: form.TelFijCli || null,
      TelMovCli: form.TelMovCli,
      EmaCli: form.EmaCli,
      EmaCliOpc: form.EmaCliOpc || null,
      WebCli: form.WebCli || null,
      CodTipCli: form.CodTipCli ? Number(form.CodTipCli) : null,
      CodSecCli: form.CodSecCli ? Number(form.CodSecCli) : null,
      FecIniCli: form.FecIniCli,
      CodCom: form.CodCom ? Number(form.CodCom) : null,
      CodCol: form.CodCol ? Number(form.CodCol) : null,
      ObsCli: form.ObsCli || null,
      EstCli: form.EstCli === "" || form.EstCli === null ? null : Number(form.EstCli),
      DireccionBBDD: form.DireccionBBDD || null,
    };
    router.put(route("clientes.update", form.CodCli), payload, {
      preserveScroll: true,
      onSuccess: async () => {
        // Invalidar caché frontend
        refreshClientes().catch(console.error);
        setLoading(false);
        hideLoading();

        Swal.fire({
          title: "Actualizado",
          text: "Los datos del cliente han sido actualizados correctamente.",
          icon: "success",
          timer: 2000,
          showConfirmButton: false
        });
        if (onUpdated) {
          await Promise.resolve(onUpdated());
        }
        onHide();
      },
      onError: (err: any) => {
        setLoading(false);
        hideLoading();
        const parsed = normalizeErrors(err);
        if (Object.keys(parsed).length > 0) {
          setErrors(parsed);
          const first = Object.values(parsed)[0];
          setServerError(first ? `Revisa los campos requeridos: ${first}` : "Error de validación.");
        } else {
          setServerError("No se pudo actualizar el cliente.");
        }
      }
    });
  };

  return (
    <Modal show={show} onHide={onHide} size="lg" centered backdrop="static">
      <Modal.Header closeButton className="modal-title text-white">
        <Modal.Title>Editar Cliente</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {serverError && <Alert variant="danger">{serverError}</Alert>}
        <Form onSubmit={handleSubmit} autoComplete="off">
          <Nav variant="tabs" className="mb-3">
            <Nav.Item>
              <Nav.Link
                active={activeTab === "basicos"}
                onClick={() => setActiveTab("basicos")}
                style={{ cursor: "pointer" }}
              >
                Datos básicos
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link
                active={activeTab === "fiscal"}
                onClick={() => setActiveTab("fiscal")}
                style={{ cursor: "pointer" }}
              >
                Dirección fiscal
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link
                active={activeTab === "otros"}
                onClick={() => setActiveTab("otros")}
                style={{ cursor: "pointer" }}
              >
                Otros datos
              </Nav.Link>
            </Nav.Item>
          </Nav>

          {activeTab === "basicos" && (
            <>
              <h6 className="mb-3">Datos básicos</h6>
              <Row className="mb-3">
                <Col md={4}>
                  <Form.Group controlId="NumCifCli">
                    <Form.Label>CIF/NIF</Form.Label>
                    <Form.Control
                      type="text"
                      name="NumCifCli"
                      value={form.NumCifCli || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.NumCifCli}
                      required
                    />
                    <Form.Control.Feedback type="invalid">{errors.NumCifCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={4}>
                  <Form.Group controlId="FecIniCli">
                    <Form.Label>Fecha de inicio</Form.Label>
                    <FormDateInputEs
                      id="FecIniCli"
                      name="FecIniCli"
                      value={form.FecIniCli || ""}
                      onChange={(iso) =>
                        setForm((prev: any) => ({ ...prev, FecIniCli: iso }))
                      }
                      isInvalid={!!errors.FecIniCli}
                      required
                    />
                    <Form.Control.Feedback type="invalid">{errors.FecIniCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={4}>
                  <Form.Group controlId="EstCli">
                    <Form.Label>Estado</Form.Label>
                    <Form.Select
                      name="EstCli"
                      value={form.EstCli ?? ""}
                      onChange={handleChange}
                      isInvalid={!!errors.EstCli}
                    >
                      <option value="">Seleccione...</option>
                      <option value="1">Activo</option>
                      <option value="0">Inactivo</option>
                    </Form.Select>
                    <Form.Control.Feedback type="invalid">{errors.EstCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>
              <Row className="mb-3">
                <Col md={12}>
                  <Form.Group controlId="RazSocCli">
                    <Form.Label>Razón Social</Form.Label>
                    <Form.Control
                      type="text"
                      name="RazSocCli"
                      value={form.RazSocCli}
                      onChange={handleChange}
                      isInvalid={!!errors.RazSocCli}
                      required
                    />
                    <Form.Control.Feedback type="invalid">{errors.RazSocCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>
              <Row className="mb-3">
                <Col md={12}>
                  <Form.Group controlId="WebCli">
                    <Form.Label>Web</Form.Label>
                    <Form.Control
                      type="text"
                      name="WebCli"
                      value={form.WebCli || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.WebCli}
                    />
                    <Form.Control.Feedback type="invalid">{errors.WebCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>
              <Row className="mb-3">
                <Col md={6}>
                  <Form.Group controlId="TelFijCli">
                    <Form.Label>Teléfono Fijo</Form.Label>
                    <Form.Control
                      type="text"
                      name="TelFijCli"
                      value={form.TelFijCli || ""}
                      onChange={handleChange}
                      maxLength={9}
                      isInvalid={!!errors.TelFijCli}
                    />
                    <Form.Control.Feedback type="invalid">{errors.TelFijCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={6}>
                  <Form.Group controlId="TelMovCli">
                    <Form.Label>Teléfono Móvil</Form.Label>
                    <Form.Control
                      type="text"
                      name="TelMovCli"
                      value={form.TelMovCli || ""}
                      onChange={handleChange}
                      maxLength={9}
                      isInvalid={!!errors.TelMovCli}
                      required
                    />
                    <Form.Control.Feedback type="invalid">{errors.TelMovCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>
              <Row className="mb-3">
                <Col md={6}>
                  <Form.Group controlId="EmaCli">
                    <Form.Label>Email</Form.Label>
                    <Form.Control
                      type="email"
                      name="EmaCli"
                      value={form.EmaCli || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.EmaCli}
                      required
                    />
                    <Form.Control.Feedback type="invalid">{errors.EmaCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={6}>
                  <Form.Group controlId="EmaCliOpc">
                    <Form.Label>Email Opcional</Form.Label>
                    <Form.Control
                      type="email"
                      name="EmaCliOpc"
                      value={form.EmaCliOpc || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.EmaCliOpc}
                    />
                    <Form.Control.Feedback type="invalid">{errors.EmaCliOpc}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>

            </>
          )}

          {activeTab === "fiscal" && (
            <>
              <h6 className="mb-3 mt-1">Dirección fiscal (requerida)</h6>
              <Row className="mb-3">
            <Col md={4}>
              <Form.Group controlId="CodTipViaFis">
                <Form.Label>Tipo de Vía</Form.Label>
                <Form.Select
                  name="CodTipViaFis"
                  value={form.CodTipViaFis ?? ""}
                  onChange={handleChange}
                  isInvalid={!!errors.CodTipViaFis}
                  required
                >
                  <option value="">Seleccione...</option>
                  {tiposVia.map((tv) => (
                    <option key={tv.CodTipVia} value={tv.CodTipVia}>
                      {tv.DesTipVia}
                    </option>
                  ))}
                </Form.Select>
                <Form.Control.Feedback type="invalid">{errors.CodTipViaFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={8}>
              <Form.Group controlId="NomViaDomFis">
                <Form.Label>Nombre de la Vía</Form.Label>
                <Form.Control
                  type="text"
                  name="NomViaDomFis"
                  value={form.NomViaDomFis || ""}
                  onChange={handleChange}
                  isInvalid={!!errors.NomViaDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.NomViaDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
          </Row>

          <Row className="mb-3">
            <Col md={3}>
              <Form.Group controlId="NumViaDomFis">
                <Form.Label>Número</Form.Label>
                <Form.Control
                  type="text"
                  name="NumViaDomFis"
                  value={form.NumViaDomFis || ""}
                  onChange={handleChange}
                  isInvalid={!!errors.NumViaDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.NumViaDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={3}>
              <Form.Group controlId="BloDomFis">
                <Form.Label>Bloque</Form.Label>
                <Form.Control
                  type="text"
                  name="BloDomFis"
                  value={form.BloDomFis || ""}
                  onChange={handleChange}
                  maxLength={3}
                  isInvalid={!!errors.BloDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.BloDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={3}>
              <Form.Group controlId="EscDomFis">
                <Form.Label>Escalera</Form.Label>
                <Form.Control
                  type="text"
                  name="EscDomFis"
                  value={form.EscDomFis || ""}
                  onChange={handleChange}
                  maxLength={3}
                  isInvalid={!!errors.EscDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.EscDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={3}>
              <Form.Group controlId="PlaDomFis">
                <Form.Label>Piso</Form.Label>
                <Form.Control
                  type="text"
                  name="PlaDomFis"
                  value={form.PlaDomFis || ""}
                  onChange={handleChange}
                  maxLength={3}
                  isInvalid={!!errors.PlaDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.PlaDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
          </Row>

          <Row className="mb-3">
            <Col md={3}>
              <Form.Group controlId="PueDomFis">
                <Form.Label>Puerta</Form.Label>
                <Form.Control
                  type="text"
                  name="PueDomFis"
                  value={form.PueDomFis || ""}
                  onChange={handleChange}
                  maxLength={3}
                  isInvalid={!!errors.PueDomFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.PueDomFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={3}>
              <Form.Group controlId="CodProUI">
                <Form.Label>Provincia</Form.Label>
                <Form.Select
                  name="CodProUI"
                  value={form.CodProUI ?? ""}
                  onChange={handleProvinciaChange}
                  required
                >
                  <option value="">Seleccione...</option>
                  {provincias.map((prov) => (
                    <option key={prov.CodPro} value={prov.CodPro}>
                      {prov.DesPro}
                    </option>
                  ))}
                </Form.Select>
              </Form.Group>
            </Col>
            <Col md={5}>
              <Form.Group controlId="CodLocFis">
                <Form.Label>Localidad</Form.Label>
                <Form.Select
                  name="CodLocFis"
                  value={form.CodLocFis ?? ""}
                  onChange={(e) => setLocalidadByCodLoc(e.target.value)}
                  isInvalid={!!errors.CodLocFis}
                  disabled={!form.CodProUI}
                  required
                >
                  <option value="">Seleccione...</option>
                  {localidadesFiltradas.map((loc) => (
                    <option key={loc.CodLoc} value={loc.CodLoc}>
                      {loc.DesLoc} - {loc.provincia?.DesPro || "Sin provincia"} ({loc.CPLoc})
                    </option>
                  ))}
                </Form.Select>
                <Form.Control.Feedback type="invalid">{errors.CodLocFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
            <Col md={4}>
              <Form.Group controlId="CPLocFis">
                <Form.Label>Código Postal</Form.Label>
                <Form.Control
                  type="text"
                  name="CPLocFis"
                  value={form.CPLocFis || ""}
                  readOnly
                  disabled
                  isInvalid={!!errors.CPLocFis}
                  required
                />
                <Form.Control.Feedback type="invalid">{errors.CPLocFis}</Form.Control.Feedback>
              </Form.Group>
            </Col>
          </Row>
            </>
          )}

          {activeTab === "otros" && (
            <>
              <h6 className="mb-3 mt-1">Otros datos</h6>
              <Row className="mb-3">
                <Col md={3}>
                  <Form.Group controlId="CodTipCli">
                    <Form.Label>Tipo Cliente</Form.Label>
                    <Form.Control
                      type="number"
                      name="CodTipCli"
                      value={form.CodTipCli ?? ""}
                      onChange={handleChange}
                      isInvalid={!!errors.CodTipCli}
                    />
                    <Form.Control.Feedback type="invalid">{errors.CodTipCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={3}>
                  <Form.Group controlId="CodSecCli">
                    <Form.Label>Sector</Form.Label>
                    <Form.Control
                      type="number"
                      name="CodSecCli"
                      value={form.CodSecCli ?? ""}
                      onChange={handleChange}
                      isInvalid={!!errors.CodSecCli}
                    />
                    <Form.Control.Feedback type="invalid">{errors.CodSecCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={3}>
                  <Form.Group controlId="CodCom">
                    <Form.Label>Comercial</Form.Label>
                    <Form.Control
                      type="number"
                      name="CodCom"
                      value={form.CodCom ?? ""}
                      onChange={handleChange}
                      isInvalid={!!errors.CodCom}
                    />
                    <Form.Control.Feedback type="invalid">{errors.CodCom}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
                <Col md={3}>
                  <Form.Group controlId="CodCol">
                    <Form.Label>Colaborador</Form.Label>
                    <Form.Control
                      type="number"
                      name="CodCol"
                      value={form.CodCol ?? ""}
                      onChange={handleChange}
                      isInvalid={!!errors.CodCol}
                    />
                    <Form.Control.Feedback type="invalid">{errors.CodCol}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>

              <Row className="mb-3">
                <Col md={12}>
                  <Form.Group controlId="DireccionBBDD">
                    <Form.Label>Dirección BBDD</Form.Label>
                    <Form.Control
                      type="text"
                      name="DireccionBBDD"
                      value={form.DireccionBBDD || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.DireccionBBDD}
                    />
                    <Form.Control.Feedback type="invalid">{errors.DireccionBBDD}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>

              <Row className="mb-3">
                <Col md={12}>
                  <Form.Group controlId="ObsCli">
                    <Form.Label>Observaciones</Form.Label>
                    <Form.Control
                      as="textarea"
                      name="ObsCli"
                      value={form.ObsCli || ""}
                      onChange={handleChange}
                      isInvalid={!!errors.ObsCli}
                      rows={2}
                    />
                    <Form.Control.Feedback type="invalid">{errors.ObsCli}</Form.Control.Feedback>
                  </Form.Group>
                </Col>
              </Row>
            </>
          )}
          <div className="d-flex justify-content-end mt-4">
            <Button variant="secondary" onClick={onHide} className="me-2">
              Cancelar
            </Button>
            <Button type="submit" variant="primary" disabled={loading}>
              Guardar cambios
            </Button>
          </div>
        </Form>
      </Modal.Body>
    </Modal>
  );
};

export default EditarClienteModal;