'use client'

import { useState } from 'react'

const TIPO_LABELS: Record<string, string> = {
  followup: 'Follow-up',
  reuniao:  'Reunião',
  retorno:  'Retorno',
  outro:    'Outro',
}

interface Props {
  cnpj?: string
  razaoSocial?: string
  onConfirm: (t: { tipo: string; descricao: string; vencimento: string; usuario_id?: number }) => Promise<void>
  onCancel: () => void
  gestorMode?: boolean
  usuarios?: { id: number; nome: string }[]
}

export function ConfirmTaskModal({ razaoSocial, onConfirm, onCancel, gestorMode = false, usuarios = [] }: Props) {
  const today = new Date()
  today.setDate(today.getDate() + 2)
  const defaultDate = today.toISOString().slice(0, 10)

  const [tipo, setTipo]           = useState('followup')
  const [descricao, setDescricao] = useState('')
  const [vencimento, setVenc]     = useState(defaultDate)
  const [usuarioId, setUsuarioId] = useState<number | undefined>(undefined)
  const [saving, setSaving]       = useState(false)

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)
    await onConfirm({ tipo, descricao, vencimento, usuario_id: usuarioId })
    setSaving(false)
  }

  return (
    <div className="modal-overlay visible" onClick={onCancel}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 420 }}>
        <h3>Criar tarefa de acompanhamento</h3>
        {razaoSocial && (
          <p className="modal-sub">Lead: <strong>{razaoSocial}</strong></p>
        )}
        <form onSubmit={submit}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field">
              <label>Tipo</label>
              <select value={tipo} onChange={e => setTipo(e.target.value)}>
                {Object.entries(TIPO_LABELS).map(([k, v]) => (
                  <option key={k} value={k}>{v}</option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>Vencimento</label>
              <input type="date" value={vencimento} onChange={e => setVenc(e.target.value)} required />
            </div>
            {gestorMode && usuarios.length > 0 && (
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>Atribuir a</label>
                <select value={usuarioId ?? ''} onChange={e => setUsuarioId(e.target.value ? Number(e.target.value) : undefined)}>
                  <option value="">Minha tarefa</option>
                  {usuarios.map(u => <option key={u.id} value={u.id}>{u.nome}</option>)}
                </select>
              </div>
            )}
            <div className="field" style={{ gridColumn: '1 / -1' }}>
              <label>Descrição (opcional)</label>
              <textarea
                rows={2}
                className="notes"
                value={descricao}
                onChange={e => setDescricao(e.target.value)}
                placeholder="Ex: Enviar follow-up dia +2 conforme combinado"
              />
            </div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn-secondary" onClick={onCancel}>Não, obrigado</button>
            <button type="submit" className="btn-primary" disabled={saving}>
              {saving ? 'Criando…' : 'Sim, criar tarefa'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}