/* ============================================================
   GENERAR CONTRATO
   ============================================================ */

const CONTRACT_TYPES = [
  { v: 'servicios',       l: 'Prestación de servicios' },
  { v: 'arrendamiento',   l: 'Arrendamiento' },
  { v: 'compraventa',     l: 'Compraventa' },
  { v: 'confidencialidad',l: 'Confidencialidad (NDA)' },
  { v: 'laboral',         l: 'Laboral' },
];

/* Esquema de campos por tipo de contrato.
   - role: etiquetas de las dos partes
   - fields: campos adicionales propios de ese contrato
     cada campo: { k: clave, label, placeholder, required, type ('input'|'textarea'|'select'), opts?, half? }
   "half: true" coloca el campo en una fila de dos columnas. */
const CONTRACT_SCHEMA = {
  servicios: {
    partyA: 'Prestador del servicio',
    partyB: 'Cliente',
    fields: [
      { k: 'objeto', label: 'Servicios a prestar', placeholder: 'Describe los servicios: diseño web, consultoría, etc.', required: true, type: 'textarea' },
      { k: 'precio', label: 'Honorarios', placeholder: 'Ej. 1.500 € + IVA', required: true, half: true },
      { k: 'formaPago', label: 'Forma de pago', placeholder: 'Ej. mensual, 50% por adelantado', required: false, half: true },
      { k: 'duracion', label: 'Duración', placeholder: 'Ej. 6 meses', required: false, half: true },
      { k: 'propiedad', label: 'Propiedad del trabajo', placeholder: '¿Quién conserva los derechos?', required: false, half: true },
    ],
  },
  arrendamiento: {
    partyA: 'Arrendador (propietario)',
    partyB: 'Arrendatario (inquilino)',
    fields: [
      { k: 'inmueble', label: 'Inmueble y dirección', placeholder: 'Ej. local comercial en C/ Mayor 3, Granollers', required: true, type: 'textarea' },
      { k: 'uso', label: 'Uso del inmueble', placeholder: 'Vivienda / local de negocio / oficina', required: true, type: 'select', opts: ['Vivienda', 'Local de negocio', 'Oficina', 'Plaza de garaje', 'Otro'] },
      { k: 'renta', label: 'Renta mensual', placeholder: 'Ej. 800 €/mes', required: true, half: true },
      { k: 'fianza', label: 'Fianza', placeholder: 'Ej. 2 mensualidades', required: false, half: true },
      { k: 'duracion', label: 'Duración del arrendamiento', placeholder: 'Ej. 5 años', required: true, half: true },
      { k: 'actualizacion', label: 'Actualización de renta', placeholder: 'Ej. según IPC anual', required: false, half: true },
    ],
  },
  compraventa: {
    partyA: 'Vendedor',
    partyB: 'Comprador',
    fields: [
      { k: 'bien', label: 'Bien objeto de la venta', placeholder: 'Describe el bien: vehículo, maquinaria, inmueble…', required: true, type: 'textarea' },
      { k: 'precio', label: 'Precio de venta', placeholder: 'Ej. 12.000 €', required: true, half: true },
      { k: 'formaPago', label: 'Forma de pago', placeholder: 'Ej. transferencia, al contado', required: true, half: true },
      { k: 'entrega', label: 'Lugar y fecha de entrega', placeholder: 'Ej. en el domicilio del comprador', required: false, half: true },
      { k: 'garantia', label: 'Garantía', placeholder: 'Ej. 1 año, estado actual…', required: false, half: true },
    ],
  },
  confidencialidad: {
    partyA: 'Parte que revela la información',
    partyB: 'Parte que la recibe',
    fields: [
      { k: 'objeto', label: 'Información confidencial protegida', placeholder: 'Describe qué información se protege: datos comerciales, técnicos…', required: true, type: 'textarea' },
      { k: 'finalidad', label: 'Finalidad de la divulgación', placeholder: '¿Para qué se comparte la información?', required: true, type: 'textarea' },
      { k: 'duracion', label: 'Duración de la obligación', placeholder: 'Ej. 3 años desde la firma', required: true, half: true },
      { k: 'penalizacion', label: 'Penalización por incumplimiento', placeholder: 'Ej. indemnización por daños', required: false, half: true },
      { k: 'mutuo', label: 'Tipo de acuerdo', placeholder: '', required: false, half: true, type: 'select', opts: ['Unilateral (una parte revela)', 'Mutuo (ambas revelan)'] },
    ],
  },
  laboral: {
    partyA: 'Empleador (empresa)',
    partyB: 'Trabajador',
    fields: [
      { k: 'puesto', label: 'Puesto de trabajo', placeholder: 'Ej. desarrollador, administrativo…', required: true, half: true },
      { k: 'tipoContrato', label: 'Tipo de contrato', placeholder: '', required: true, half: true, type: 'select', opts: ['Indefinido', 'Temporal', 'Por obra y servicio', 'Prácticas', 'Formación'] },
      { k: 'jornada', label: 'Jornada', placeholder: '', required: true, half: true, type: 'select', opts: ['Completa', 'Parcial'] },
      { k: 'salario', label: 'Salario bruto anual', placeholder: 'Ej. 24.000 € brutos/año', required: true, half: true },
      { k: 'funciones', label: 'Funciones del puesto', placeholder: 'Describe las tareas principales', required: true, type: 'textarea' },
      { k: 'inicio', label: 'Fecha de inicio', placeholder: 'Ej. 1 de septiembre de 2026', required: false, half: true },
      { k: 'prueba', label: 'Periodo de prueba', placeholder: 'Ej. 2 meses', required: false, half: true },
      { k: 'convenio', label: 'Convenio colectivo aplicable', placeholder: 'Si lo conoces', required: false, type: 'input' },
    ],
  },
};

/* Renderiza un campo individual del esquema, respetando las clases CSS existentes. */
function renderField(f, form, set) {
  const optTag = f.required ? null : <span className="opt">· opcional</span>;
  if (f.type === 'textarea') {
    return (
      <div className="field" key={f.k}>
        <label>{f.label} {optTag}</label>
        <textarea className="textarea" rows={3} placeholder={f.placeholder} value={form[f.k] || ''} onChange={set(f.k)} />
      </div>
    );
  }
  if (f.type === 'select') {
    return (
      <div className="field" key={f.k}>
        <label>{f.label} {optTag}</label>
        <select className="select" value={form[f.k] || ''} onChange={set(f.k)}>
          <option value="">Selecciona…</option>
          {f.opts.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    );
  }
  return (
    <div className="field" key={f.k}>
      <label>{f.label} {optTag}</label>
      <input className="input" placeholder={f.placeholder} value={form[f.k] || ''} onChange={set(f.k)} />
    </div>
  );
}

function GenerarContrato({ preset, initialContract, session, onRegister, onGoSettings }) {
  const initialType = preset?.tipo || initialContract?.type || 'servicios';
  const [form, setForm] = useState({
    tipo: initialType, parteA: '', parteB: '',
  });
  const [result, setResult] = useState(initialContract?.content || '');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const usage = useUsage();
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  // Control de límite del plan (centralizado en store.jsx).
  const quota = lxCanUse(session, 'contract');
  const planLabel = lxPlanLabel(quota.plan, 'es');

  const schema = CONTRACT_SCHEMA[form.tipo] || CONTRACT_SCHEMA.servicios;
  const typeLabel = CONTRACT_TYPES.find(t => t.v === form.tipo)?.l || form.tipo;

  // Al cambiar de tipo, limpiamos los campos específicos para no arrastrar datos de otro contrato.
  const changeType = (e) => {
    const tipo = e.target.value;
    setForm({ tipo, parteA: form.parteA, parteB: form.parteB });
  };

  // Validación dinámica: las partes siempre + los campos required del esquema.
  const requiredFields = schema.fields.filter(f => f.required).map(f => f.k);
  const canGenerate = form.parteA.trim() && form.parteB.trim()
    && requiredFields.every(k => (form[k] || '').trim());

  const generate = async () => {
    if (!canGenerate || loading) return;
    // Control de límite del plan: bloquea si se ha alcanzado el tope mensual.
    // Esto cubre TODOS los caminos (generador directo y biblioteca legal),
    // porque ambos usan este mismo componente.
    const check = lxCanUse(session, 'contract');
    if (!check.allowed) {
      setError('LIMIT');
      return;
    }
    setError(null); setLoading(true); setResult('');

    // Construimos la lista de datos a partir de los campos rellenados del esquema.
    const datosEspecificos = schema.fields
      .filter(f => (form[f.k] || '').trim())
      .map(f => `- ${f.label}: ${form[f.k]}`)
      .join('\n');

    const prompt = `Redacta un contrato de ${typeLabel.toLowerCase()} completo y profesional conforme al ordenamiento jurídico español, listo para firmar.

Datos:
- Tipo: ${typeLabel}
- ${schema.partyA}: ${form.parteA}
- ${schema.partyB}: ${form.parteB}
${datosEspecificos}

Estructura el contrato con: encabezado, REUNIDOS, EXPONEN, y CLÁUSULAS numeradas adaptadas específicamente a este tipo de contrato (${typeLabel}), incluyendo todas las cláusulas legalmente necesarias y propias de este contrato según el derecho español. Incluye espacios para fecha, lugar y firmas. Usa lenguaje jurídico formal pero claro y CONCISO: cláusulas completas pero sin redacción excesivamente larga, para que el contrato quepa entero. No añadas comentarios fuera del contrato.

Cuando hayas terminado por completo el contrato (después del apartado de firmas), escribe en la última línea la marca [FIN]. No escribas [FIN] si el contrato aún no está completo.`;
    const sys = 'Eres Lexly, un redactor jurídico experto en derecho español. Redactas contratos formales, completos y conformes a la legislación española vigente. Adaptas las cláusulas al tipo concreto de contrato solicitado. Devuelves únicamente el texto del contrato en TEXTO PLANO, sin formato markdown (no uses #, ni asteriscos ** **, ni guiones de lista): usa MAYÚSCULAS para el título y los encabezados de cláusula. Sin notas ni disclaimers.';
    try {
      // Una sola llamada con max_tokens alto evita el timeout 504 del bucle.
      const chunk = await callLexly([{ role: 'user', content: prompt }], sys, 3000);
      const full = chunk.replace(/\[FIN\]/g, '').replace(/\s+$/, '');
      setResult(full);
      if (!full) throw new Error('empty');
      // Registrar el consumo de un contrato (cuenta para el límite mensual).
      lxRegisterUse('contract');
      // Guardar en historial (additive)
      lxAddContract({
        id: lxId(),
        title: `Contrato de ${typeLabel}`,
        typeLabel,
        type: form.tipo,
        content: full,
        createdAt: Date.now(),
      });
    } catch (e) {
      setError(e.message === 'NO_API'
        ? 'No se ha podido conectar con el servicio. Revisa tu conexión e inténtalo de nuevo.'
        : 'No se ha podido generar el contrato. Inténtalo de nuevo.');
    } finally {
      setLoading(false);
    }
  };

  const downloadPDF = () => {
    const title = `Contrato de ${typeLabel}`;
    const w = window.open('', '_blank');
    if (!w) return;
    w.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>${title}</title>
      <style>
        @page { margin: 2.2cm; }
        body { font-family: 'Times New Roman', Georgia, serif; font-size: 12pt; line-height: 1.6; color: #111; max-width: 720px; margin: 0 auto; }
        h1 { font-size: 15pt; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
        pre { white-space: pre-wrap; font-family: inherit; font-size: 12pt; }
      </style></head><body><pre>${result.replace(/</g,'&lt;')}</pre></body></html>`);
    w.document.close();
    setTimeout(() => w.print(), 350);
  };

  const copyText = () => navigator.clipboard?.writeText(result);

  return (
    <div className="section-pad fade-up">
      <div className="eyebrow">Documentos</div>
      <h1 className="h-title">Generar contrato</h1>
      <p className="h-sub">Completa los datos y Lexly redactará un contrato conforme a la legislación española, listo para revisar y descargar.</p>

      {preset && (
        <div className="preset-note">
          <Icon name="book" size={14} /> Plantilla cargada desde la biblioteca: <b>{typeLabel}</b>. Completa los datos para generarla.
          <style>{`
            .preset-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--violet-soft); background: var(--violet-dim); border: 1px solid var(--violet-line); border-radius: 11px; padding: 10px 14px; margin-top: 16px; }
            .preset-note .ic { color: var(--violet-soft); flex-shrink: 0; }
            .preset-note b { color: var(--white); font-weight: 600; }
          `}</style>
        </div>
      )}
      {initialContract && (
        <div className="preset-note">
          <Icon name="history" size={14} /> Has reabierto un contrato guardado. Puedes editarlo y descargarlo de nuevo.
        </div>
      )}

      <div className="gen-grid">
        {/* Form */}
        <div className="card gen-form">
          <div className="field">
            <label>Tipo de contrato</label>
            <select className="select" value={form.tipo} onChange={changeType}>
              {CONTRACT_TYPES.map(t => <option key={t.v} value={t.v}>{t.l}</option>)}
            </select>
          </div>
          <div className="field-row">
            <div className="field">
              <label>{schema.partyA}</label>
              <input className="input" placeholder="Nombre / razón social" value={form.parteA} onChange={set('parteA')} />
            </div>
            <div className="field">
              <label>{schema.partyB}</label>
              <input className="input" placeholder="Nombre / razón social" value={form.parteB} onChange={set('parteB')} />
            </div>
          </div>

          {/* Campos específicos del tipo de contrato, renderizados dinámicamente.
              Los campos "half" se agrupan de dos en dos en una fila. */}
          {(() => {
            const rows = [];
            let i = 0;
            const fields = schema.fields;
            while (i < fields.length) {
              const f = fields[i];
              if (f.half && fields[i + 1] && fields[i + 1].half) {
                rows.push(
                  <div className="field-row" key={f.k}>
                    {renderField(fields[i], form, set)}
                    {renderField(fields[i + 1], form, set)}
                  </div>
                );
                i += 2;
              } else {
                rows.push(<div key={f.k}>{renderField(f, form, set)}</div>);
                i += 1;
              }
            }
            return rows;
          })()}

          {quota.limit !== Infinity && (
            <p className="gen-quota">
              {quota.remaining > 0
                ? `Te quedan ${quota.remaining} de ${quota.limit} contratos este mes en tu ${planLabel}.`
                : `Has alcanzado el límite de ${quota.limit} contratos de tu ${planLabel} este mes.`}
            </p>
          )}

          <button className="btn btn-primary gen-btn" disabled={!canGenerate || loading || !quota.allowed} onClick={generate}>
            {loading ? <><Spinner /> Redactando…</> : <><Icon name="sparkle" size={16} /> Generar contrato</>}
          </button>
          {!canGenerate && quota.allowed && <p className="gen-note">Completa los campos obligatorios del contrato.</p>}
          {error === 'LIMIT' || !quota.allowed ? (
            <div className="gen-limit">
              <Icon name="lock" size={15} />
              <div>
                <strong>Has alcanzado el límite de tu plan</strong>
                <p>Mejora tu plan para generar contratos sin límite, o espera al próximo mes.</p>
                <button onClick={onGoSettings}>Ver planes</button>
              </div>
            </div>
          ) : error && <ErrorNote onRetry={generate}>{error}</ErrorNote>}
        </div>

        <style>{`
          .gen-quota { font-size: 12px; color: var(--text-2); text-align: center; margin-top: 12px; padding: 8px; background: var(--surface); border-radius: 9px; }
          .gen-limit { display: flex; gap: 12px; align-items: flex-start; background: var(--violet-dim); border: 1px solid var(--violet-line); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
          .gen-limit .ic { color: var(--violet-soft); flex-shrink: 0; margin-top: 2px; }
          .gen-limit strong { font-size: 13.5px; color: var(--white); display: block; margin-bottom: 4px; }
          .gen-limit p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 10px; }
          .gen-limit button { font-size: 12.5px; font-weight: 600; color: var(--violet-soft); background: none; border: none; cursor: pointer; padding: 0; }
        `}</style>

        {/* Output */}
        <div className="card gen-output">
          <div className="gen-output-head">
            <div className="goh-left">
              <Icon name="file" size={15} />
              <span>{result ? `Contrato de ${typeLabel}` : 'Documento'}</span>
            </div>
            {result && (
              <div className="goh-actions">
                <button className="icon-btn" title="Copiar" onClick={copyText}><Icon name="copy" size={15} /></button>
                <button className="btn btn-ghost goh-dl" onClick={downloadPDF}><Icon name="download" size={15} /> Descargar PDF</button>
              </div>
            )}
          </div>
          {result ? (
            <textarea
              className="gen-doc"
              value={result}
              onChange={(e) => setResult(e.target.value)}
              spellCheck={false}
            />
          ) : (
            <div className="gen-empty">
              {loading ? (
                <>
                  <div className="gen-skel"><span></span><span></span><span></span><span></span><span></span></div>
                  <p>Lexly está redactando tu contrato…</p>
                </>
              ) : (
                <>
                  <div className="gen-empty-ic"><Icon name="contract" size={26} /></div>
                  <p>El contrato generado aparecerá aquí.<br/>Podrás editarlo y descargarlo en PDF.</p>
                </>
              )}
            </div>
          )}
        </div>
      </div>

      <style>{`
        .gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; align-items: start; }
        .gen-form { padding: 22px; }
        .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .gen-btn { width: 100%; margin-top: 6px; padding: 12px; }
        .gen-note { font-size: 11.5px; color: var(--text-3); text-align: center; margin-top: 10px; }

        .gen-output { display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
        .gen-output-head {
          display: flex; align-items: center; justify-content: space-between;
          padding: 13px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
        }
        .goh-left { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); }
        .goh-left .ic { color: var(--violet-soft); }
        .goh-actions { display: flex; align-items: center; gap: 8px; }
        .icon-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--line); transition: .15s; }
        .icon-btn:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
        .goh-dl { padding: 7px 12px; font-size: 12.5px; }
        .gen-doc {
          flex: 1; width: 100%; resize: none; border: none; outline: none;
          background: var(--bg-2); color: var(--text);
          font-family: var(--serif); font-size: 14px; line-height: 1.7;
          padding: 22px 24px;
        }
        .gen-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 16px; }
        .gen-empty-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
        .gen-empty p { font-size: 13px; color: var(--text-3); line-height: 1.6; }
        .gen-skel { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 11px; }
        .gen-skel span { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
        .gen-skel span:nth-child(2) { width: 80%; } .gen-skel span:nth-child(4) { width: 90%; } .gen-skel span:nth-child(5) { width: 60%; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        @media (max-width: 860px) {
          .gen-grid { grid-template-columns: 1fr; }
          .gen-output { min-height: 380px; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { GenerarContrato });