dashboards/apps/business/src/components/RollCallFormModal.tsx

import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Plus, Trash2, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError } from '../lib/api'
import {
  createRollCall,
  updateRollCall,
  type RollCall,
  type RollCallInput,
} from '../services/rollCallService'
import modalStyles from './VariationsModal.module.css'
import styles from './RollCallFormModal.module.css'

interface RollCallFormModalProps {
  open: boolean
  rollCall: RollCall | null
  onClose: () => void
  onSaved: (rollCall: RollCall) => void
}

const ANIMATION_MS = 220

function emptyTasks() {
  return ['']
}

export function RollCallFormModal({
  open,
  rollCall,
  onClose,
  onSaved,
}: RollCallFormModalProps) {
  const t = useT()
  const { locale, dir } = useLocale()
  const { showToast } = useToast()
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [workDate, setWorkDate] = useState('')
  const [startTime, setStartTime] = useState('09:00')
  const [endTime, setEndTime] = useState('17:00')
  const [tasks, setTasks] = useState<string[]>(emptyTasks())
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
      setError('')
      if (rollCall) {
        setWorkDate(rollCall.workDate)
        setStartTime(rollCall.startTime)
        setEndTime(rollCall.endTime)
        setTasks(
          rollCall.tasks.length > 0
            ? rollCall.tasks.map((task) => task.title)
            : emptyTasks(),
        )
      } else {
        setWorkDate(new Date().toISOString().slice(0, 10))
        setStartTime('09:00')
        setEndTime('17:00')
        setTasks(emptyTasks())
      }
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, mounted, rollCall])

  useEffect(() => {
    if (!mounted || closing) return

    const prevOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'

    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }

    document.addEventListener('keydown', onKey)
    return () => {
      document.body.style.overflow = prevOverflow
      document.removeEventListener('keydown', onKey)
    }
  }, [mounted, closing, onClose])

  if (!mounted) return null

  const isEdit = Boolean(rollCall?.id)

  function updateTask(index: number, value: string) {
    setTasks((prev) => prev.map((task, i) => (i === index ? value : task)))
  }

  function addTask() {
    setTasks((prev) => [...prev, ''])
  }

  function removeTask(index: number) {
    setTasks((prev) => {
      if (prev.length <= 1) return ['']
      return prev.filter((_, i) => i !== index)
    })
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')

    const cleanedTasks = tasks.map((task) => task.trim()).filter(Boolean)
    if (!workDate || !startTime || !endTime) {
      setError(t('rollCall.error.incomplete'))
      return
    }
    if (cleanedTasks.length === 0) {
      setError(t('rollCall.error.tasksRequired'))
      return
    }

    const input: RollCallInput = {
      workDate,
      startTime,
      endTime,
      tasks: cleanedTasks.map((title) => ({ title })),
    }

    setSaving(true)
    try {
      const result = rollCall
        ? await updateRollCall(rollCall.id, input)
        : await createRollCall(input)
      onSaved(result.rollCall)
      showToast(
        rollCall ? t('rollCall.toast.updated') : t('rollCall.toast.created'),
        'success',
      )
      onClose()
    } catch (err) {
      const message =
        err instanceof ApiError ? err.message : t('rollCall.error.save')
      setError(message)
      showToast(message, 'error')
    } finally {
      setSaving(false)
    }
  }

  return createPortal(
    <div
      className={`${modalStyles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
      onClick={onClose}
    >
      <div
        className={`${modalStyles.modal} ${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="roll-call-form-title"
        lang={locale}
        dir={dir}
      >
        <div className={modalStyles.header}>
          <div>
            <h2 id="roll-call-form-title" className={modalStyles.title}>
              {isEdit ? t('rollCall.modal.editTitle') : t('rollCall.modal.addTitle')}
            </h2>
            <p className={modalStyles.subtitle}>{t('rollCall.modal.subtitle')}</p>
          </div>
          <button
            type="button"
            className={modalStyles.closeBtn}
            onClick={onClose}
            aria-label={t('common.close')}
          >
            <X size={18} />
          </button>
        </div>

        <form className={modalStyles.body} onSubmit={handleSubmit}>
          {error && (
            <div className={styles.error} role="alert">
              {error}
            </div>
          )}

          <div className={modalStyles.field}>
            <label htmlFor="roll-call-date">{t('rollCall.field.date')}</label>
            <input
              id="roll-call-date"
              type="date"
              value={workDate}
              onChange={(e) => setWorkDate(e.target.value)}
              required
            />
          </div>

          <div className={styles.timeRow}>
            <div className={modalStyles.field}>
              <label htmlFor="roll-call-start">{t('rollCall.field.startTime')}</label>
              <input
                id="roll-call-start"
                type="time"
                value={startTime}
                onChange={(e) => setStartTime(e.target.value)}
                required
              />
            </div>
            <div className={modalStyles.field}>
              <label htmlFor="roll-call-end">{t('rollCall.field.endTime')}</label>
              <input
                id="roll-call-end"
                type="time"
                value={endTime}
                onChange={(e) => setEndTime(e.target.value)}
                required
              />
            </div>
          </div>

          <div className={styles.tasksBlock}>
            <div className={styles.tasksHeader}>
              <span className={styles.tasksLabel}>{t('rollCall.field.tasks')}</span>
            </div>

            <div className={styles.taskList}>
              {tasks.map((task, index) => (
                <div key={index} className={styles.taskRow}>
                  <input
                    type="text"
                    value={task}
                    onChange={(e) => updateTask(index, e.target.value)}
                    placeholder={t('rollCall.field.taskPlaceholder')}
                    aria-label={t('rollCall.field.taskN', { n: index + 1 })}
                  />
                  <button
                    type="button"
                    className={styles.removeTaskBtn}
                    onClick={() => removeTask(index)}
                    aria-label={t('rollCall.removeTask')}
                    disabled={tasks.length === 1 && !task.trim()}
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              ))}
              <button type="button" className={styles.addTaskRowBtn} onClick={addTask}>
                <Plus size={18} strokeWidth={2.5} />
                {t('rollCall.addTask')}
              </button>
            </div>
          </div>

          <div className={styles.actions}>
            <button
              type="button"
              className={styles.cancelBtn}
              onClick={onClose}
              disabled={saving}
            >
              {t('rollCall.cancel')}
            </button>
            <button type="submit" className={styles.saveBtn} disabled={saving}>
              {saving ? t('rollCall.saving') : t('rollCall.save')}
            </button>
          </div>
        </form>
      </div>
    </div>,
    document.body,
  )
}