project.linkedcorp.net/frontend/src/pages/Proyectos/NewProjectAiDialog.jsx

import { useState } from 'react';
import { Sparkles, Check, ArrowLeft } from 'lucide-react';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { Button } from '../../components/Button.jsx';
import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { InfoBar } from '../../components/InfoBar.jsx';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { proposeNewProject, createNewProject } from '../../services/ai.js';

const today = () => new Date().toISOString().slice(0, 10);

// Asistente por pasos: 1) objetivo + departamento + fecha (validados aqui, antes de gastar tokens);
// 2) una sola llamada a la IA; 3) revision y creacion. Estado, responsable y miembros los fija el
// backend (Planificado / quien crea). Si el texto no es un proyecto, la IA lo rechaza.
export function NewProjectAiDialog({ open, deptOptions, minLength = 20, onClose, onCreated }) {
  const { t, lang } = useUi();
  const { user } = useAuth();
  const [objective, setObjective] = useState('');
  const [departmentId, setDepartmentId] = useState(user?.departmentId || '');
  const [startDate, setStartDate] = useState(today());
  const [proposal, setProposal] = useState(null);
  const [name, setName] = useState('');
  const [selected, setSelected] = useState([]);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  const objectiveOk = objective.trim().length >= minLength;
  const dateOk = /^\d{4}-\d{2}-\d{2}$/.test(startDate);
  const canGenerate = objectiveOk && departmentId && dateOk && !busy;

  function close() {
    if (busy) return;
    setProposal(null); setSelected([]); setError(''); setObjective(''); setName(''); setStartDate(today());
    onClose();
  }

  async function generate() {
    setBusy(true); setError('');
    try {
      const p = await proposeNewProject({ objective, startDate, lang });
      setProposal(p);
      setName(p.name);
      setSelected(p.activities.map((_, i) => i));
    } catch (err) {
      setError(err.message);
    } finally {
      setBusy(false);
    }
  }

  async function create() {
    setBusy(true); setError('');
    try {
      const r = await createNewProject({
        objective: proposal.objective || objective, startDate, name, description: proposal.description, projectTypeId: proposal.projectTypeId,
        requestingDepartmentId: departmentId, activities: proposal.activities.filter((_, i) => selected.includes(i)),
      });
      setBusy(false);
      close();
      onCreated(r);
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  const toggle = (i) => setSelected((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i]));

  return (
    <DetailPopup open={open} title={t('ai_new_project_title')} onClose={close} width={760} height={680}>
      {error && <InfoBar tone="error">{error}</InfoBar>}
      {!proposal ? (
        <>
          <Field label={t('ai_new_project_objective')} hint={`${objective.trim().length}/${minLength} ${t('ai_new_project_min_chars')}`}>
            <textarea className="input" rows={5} maxLength={2000} value={objective} onChange={(e) => setObjective(e.target.value)} placeholder={t('ai_new_project_placeholder')} autoFocus />
          </Field>
          <FieldRow>
            <Field label={t('project_requesting_department')}>
              <ComboBox options={deptOptions} value={departmentId} onChange={setDepartmentId} />
            </Field>
            <Field label={t('ai_new_project_start')}>
              <input className="input" type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
            </Field>
          </FieldRow>
          <p className="text-muted" style={{ fontSize: '.8rem' }}>{t('ai_new_project_fixed')}</p>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="accent" icon={Sparkles} onClick={generate} disabled={!canGenerate}>{busy ? t('ai_plan_generating') : t('ai_plan_generate')}</Button>
            <Button variant="standard" onClick={close} disabled={busy}>{t('common_cancel')}</Button>
          </div>
        </>
      ) : (
        <>
          <Field label={t('common_name')}>
            <input className="input" value={name} maxLength={200} onChange={(e) => setName(e.target.value)} />
          </Field>
          <p className="text-muted" style={{ marginTop: 0, fontSize: '.8rem' }}>
            {proposal.projectTypeName && <>{t('ai_new_project_type')}: <strong>{proposal.projectTypeName}</strong> · </>}
            {t('ai_new_project_end')}: <strong>{proposal.estimatedEndDate}</strong>
          </p>
          <p style={{ fontSize: '.85rem', marginBottom: 4 }}><strong>{t('ai_new_project_goal')}:</strong> {proposal.objective}</p>
          {proposal.description && <p style={{ fontSize: '.85rem', marginTop: 0 }}><strong>{t('ai_new_project_desc')}:</strong> {proposal.description}</p>}
          <p className="text-muted" style={{ fontSize: '.8rem' }}>{t('ai_new_project_review')}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
            {proposal.activities.map((a, i) => (
              <label key={i} className="panel-card" style={{ display: 'flex', gap: 10, alignItems: 'flex-start', margin: 0 }}>
                <input type="checkbox" checked={selected.includes(i)} onChange={() => toggle(i)} style={{ marginTop: 4 }} />
                <div>
                  <strong>{a.name}</strong> <span className="text-muted">· {a.durationDays} {t(a.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')}</span>
                  <ul style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: '.82rem' }}>
                    {a.tasks.map((task, j) => <li key={j}>{task.name} <span className="text-muted">({task.durationDays} {t(task.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')})</span></li>)}
                  </ul>
                </div>
              </label>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="accent" icon={Check} onClick={create} disabled={busy || !selected.length || !name.trim()}>
              {busy ? t('ai_plan_creating') : t('ai_new_project_create')}
            </Button>
            <Button variant="standard" icon={ArrowLeft} onClick={() => setProposal(null)} disabled={busy}>{t('ai_plan_back')}</Button>
          </div>
        </>
      )}
    </DetailPopup>
  );
}