import { useState } from 'react';
import { Empresa } from './Empresa';

const statusOpciones = [
  { value: 'Borrador', label: 'Borrador', variant: 'default' },
  { value: 'Activa', label: 'Activa', variant: 'success' },
  { value: 'Inactiva', label: 'Inactiva', variant: 'neutral' },
  { value: 'Suspendida', label: 'Suspendida', variant: 'error' },
];

const tipoIdentificacionOpciones = [
  { value: 'CUIT', label: 'CUIT' },
  { value: 'CUIL', label: 'CUIL' },
  { value: 'DNI', label: 'DNI' },
];

const paisOpciones = [
  { value: 'AR', label: 'Argentina' },
  { value: 'MX', label: 'México' },
  { value: 'ES', label: 'España' },
];

export default {
  title: 'Layout/Empresa',
  component: Empresa,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['C', 'E', 'create', 'edit'],
      description: 'C = crear (NUEVA EMPRESA, Borrador). E = editar (EMPRESA, Activo, datos cargados).',
    },
    title: { control: 'text', description: 'Título de la card' },
    statusBadgeText: { control: 'text', description: 'Texto del Badge (ej. Borrador, Activo)' },
    showStatusBadge: { control: 'boolean' },
    statusBadgeVariant: {
      control: 'select',
      options: ['primary', 'success', 'default', 'warning', 'danger'],
      description: 'Estilo del badge según estado (primary=Borrador, success=Activa, etc.)',
    },
    statusOptions: { control: false, description: 'Opciones del dropdown; definir en proyecto consumidor' },
    nombreFantasiaLabel: { control: 'text' },
    nombreFantasiaError: { control: 'text', description: 'Mensaje de error del input Nombre de fantasía' },
    tipoIdentificacionError: { control: 'text', description: 'Mensaje de error del select Tipo de identificación' },
    idTributarioError: { control: 'text', description: 'Mensaje de error del input ID tributario' },
    razonSocialError: { control: 'text', description: 'Mensaje de error del input Razón social' },
    paisError: { control: 'text', description: 'Mensaje de error del select País' },
    discardButtonText: { control: 'text' },
    submitButtonText: { control: 'text' },
    submitButtonDisabled: { control: 'boolean' },
    onSubmit: {
      description: 'Al guardar: (event, { variant: "C"|"E", payload }) => void. C → crear (POST). E → editar (PUT). payload: { nombreFantasia, tipoIdentificacion, idTributario, razonSocial, pais, status }.',
    },
    onDiscard: { action: 'discard' },
    uploadButtonOnClick: { action: 'upload' },
    logoError: {
      control: 'text',
      description: 'Error de logo: truthy muestra la caja (mismo mensaje que tenant). Si es string se usa como título; si no, el default "La imagen seleccionada, no cumple las especificaciones."',
    },
    logoErrorSubtitle: {
      control: 'text',
      description: 'Subtítulo del error de logo (mismo default que ConfiguracionMarcaTenant: "Inténtelo nuevamente.").',
    },
  },
};

/** Variante C (crear): formulario nuevo, título NUEVA EMPRESA, badge Borrador, campos vacíos. */
export const Create = {
  args: {
    variant: 'C',
    title: 'NUEVA EMPRESA',
    statusBadgeText: 'Borrador',
    showStatusBadge: true,
    statusBadgeVariant: 'primary',
    statusValue: 'Borrador',
    onStatusChange: (value) => console.log('status', value),
    statusOptions: statusOpciones,
    nombreFantasiaPlaceholder: 'Ej. Nucleus S.A.',
    tipoIdentificacionOptions: tipoIdentificacionOpciones,
    tipoIdentificacionValue: '',
    tipoIdentificacionOnChange: (e) => console.log('tipo ID', e.target.value),
    idTributarioPlaceholder: 'Identificación tributaria de su país',
    idTributarioOnChange: (e) => console.log('ID trib', e.target.value),
    razonSocialPlaceholder: 'Ej. Nucleus Corporate Group',
    razonSocialOnChange: (e) => console.log('razón social', e.target.value),
    paisOptions: paisOpciones,
    paisValue: '',
    paisOnChange: (e) => console.log('país', e.target.value),
    discardButtonText: 'Descartar',
    submitButtonText: 'Guardar',
    nombreFantasiaOnChange: (e) => console.log('nombre fantasía', e.target.value),
    onDiscard: () => console.log('Descartar'),
    onSubmit: (e, { variant, payload }) => {
      e?.preventDefault?.();
      if (variant === 'C') {
        console.log('Crear empresa → POST /api/empresas', payload);
        // fetch('/api/empresas', { method: 'POST', body: JSON.stringify(payload), ... })
      } else {
        console.log('Editar empresa → PUT /api/empresas/:id', payload);
        // fetch(`/api/empresas/${id}`, { method: 'PUT', body: JSON.stringify(payload), ... })
      }
    },
    uploadButtonOnClick: () => console.log('Subir imagen'),
  },
};

/** Crear empresa con error de logo (mismo mensaje que tenant al subir imagen). */
export const CreateWithLogoError = {
  args: {
    ...Create.args,
    logoError: true,
  },
};

/** Variante E (editar): mismo formulario con datos cargados y badge Activo (success). */
export const Edit = {
  args: {
    variant: 'E',
    title: 'EMPRESA',
    statusBadgeText: 'Activo',
    showStatusBadge: true,
    statusBadgeVariant: 'success',
    statusValue: 'Activa',
    onStatusChange: (value) => console.log('status', value),
    statusOptions: statusOpciones,
    nombreFantasiaValue: 'Nucleus S.A.',
    nombreFantasiaOnChange: (e) => console.log('nombre fantasía', e.target.value),
    nombreFantasiaPlaceholder: 'Ej. Nucleus S.A.',
    tipoIdentificacionOptions: tipoIdentificacionOpciones,
    tipoIdentificacionValue: 'CUIT',
    tipoIdentificacionOnChange: (e) => console.log('tipo ID', e.target.value),
    idTributarioValue: '30-71234567-8',
    idTributarioOnChange: (e) => console.log('ID trib', e.target.value),
    idTributarioPlaceholder: 'Identificación tributaria de su país',
    razonSocialValue: 'Nucleus Corporate Group S.A.',
    razonSocialOnChange: (e) => console.log('razón social', e.target.value),
    razonSocialPlaceholder: 'Ej. Nucleus Corporate Group',
    paisOptions: paisOpciones,
    paisValue: 'AR',
    paisOnChange: (e) => console.log('país', e.target.value),
    discardButtonText: 'Descartar',
    submitButtonText: 'Guardar',
    onDiscard: () => console.log('Descartar'),
    onSubmit: (e, { variant, payload }) => {
      e?.preventDefault?.();
      if (variant === 'C') {
        console.log('Crear empresa → POST /api/empresas', payload);
      } else {
        console.log('Editar empresa → PUT /api/empresas/:id', payload);
      }
    },
    uploadButtonOnClick: () => console.log('Subir imagen'),
  },
};

export const ConEstadoConStatus = () => {
  const [status, setStatus] = useState('Borrador');
  const [nombreFantasia, setNombreFantasia] = useState('');
  const [tipoId, setTipoId] = useState('CUIT');
  const [idTrib, setIdTrib] = useState('');
  const [razonSocial, setRazonSocial] = useState('');
  const [pais, setPais] = useState('AR');

  const statusToBadgeVariant = (v) =>
    v === 'Activa' ? 'success' : v === 'Suspendida' ? 'danger' : v === 'Inactiva' ? 'default' : 'primary';

  return (
    <Empresa
      variant="C"
      title="NUEVA EMPRESA"
      statusBadgeText={status}
      statusBadgeVariant={statusToBadgeVariant(status)}
      statusValue={status}
      statusOptions={statusOpciones}
      onStatusChange={setStatus}
      nombreFantasiaValue={nombreFantasia}
      nombreFantasiaOnChange={(e) => setNombreFantasia(e.target.value)}
      nombreFantasiaPlaceholder="Ej. Nucleus S.A."
      tipoIdentificacionOptions={tipoIdentificacionOpciones}
      tipoIdentificacionValue={tipoId}
      tipoIdentificacionOnChange={(e) => setTipoId(e.target.value)}
      idTributarioValue={idTrib}
      idTributarioOnChange={(e) => setIdTrib(e.target.value)}
      idTributarioPlaceholder="Identificación tributaria de su país"
      razonSocialValue={razonSocial}
      razonSocialOnChange={(e) => setRazonSocial(e.target.value)}
      razonSocialPlaceholder="Ej. Nucleus Corporate Group"
      paisOptions={paisOpciones}
      paisValue={pais}
      paisOnChange={(e) => setPais(e.target.value)}
      discardButtonText="Descartar"
      submitButtonText="Guardar"
      submitButtonDisabled={!nombreFantasia.trim()}
      onDiscard={() => console.log('Descartar')}
      onSubmit={(e) => {
        e.preventDefault();
        console.log({ status, nombreFantasia, tipoId, idTrib, razonSocial, pais });
      }}
      uploadButtonOnClick={() => console.log('Subir imagen')}
    />
  );
};

export const ConEstado = () => {
  const [nombreFantasia, setNombreFantasia] = useState('');
  const [tipoId, setTipoId] = useState('CUIT');
  const [idTrib, setIdTrib] = useState('');
  const [razonSocial, setRazonSocial] = useState('');
  const [pais, setPais] = useState('AR');

  return (
    <Empresa
      variant="C"
      title="NUEVA EMPRESA"
      statusBadgeText="Borrador"
      statusBadgeVariant="primary"
      statusValue="Borrador"
      statusOptions={statusOpciones}
      onStatusChange={(v) => console.log('status', v)}
      nombreFantasiaValue={nombreFantasia}
      nombreFantasiaOnChange={(e) => setNombreFantasia(e.target.value)}
      nombreFantasiaPlaceholder="Ej. Nucleus S.A."
      tipoIdentificacionOptions={tipoIdentificacionOpciones}
      tipoIdentificacionValue={tipoId}
      tipoIdentificacionOnChange={(e) => setTipoId(e.target.value)}
      idTributarioValue={idTrib}
      idTributarioOnChange={(e) => setIdTrib(e.target.value)}
      idTributarioPlaceholder="Identificación tributaria de su país"
      razonSocialValue={razonSocial}
      razonSocialOnChange={(e) => setRazonSocial(e.target.value)}
      razonSocialPlaceholder="Ej. Nucleus Corporate Group"
      paisOptions={paisOpciones}
      paisValue={pais}
      paisOnChange={(e) => setPais(e.target.value)}
      discardButtonText="Descartar"
      submitButtonText="Guardar"
      submitButtonDisabled={!nombreFantasia.trim()}
      onDiscard={() => console.log('Descartar')}
      onSubmit={(e) => {
        e.preventDefault();
        console.log({ nombreFantasia, tipoId, idTrib, razonSocial, pais });
      }}
      uploadButtonOnClick={() => console.log('Subir imagen')}
    />
  );
};

export const Loading = {
  args: {
    variant: 'C',
    loading: true,
    title: 'NUEVA EMPRESA',
  },
};

export const ConErrores = {
  args: {
    ...Create.args,
    nombreFantasiaError: 'El nombre de fantasía es obligatorio',
    tipoIdentificacionError: 'Seleccione un tipo de identificación',
    idTributarioError: 'Ingrese un ID tributario válido',
    razonSocialError: 'La razón social es requerida',
    paisError: 'Seleccione un país',
  },
};
