task-team/apps/tasks/components/TaskForm.tsx

"use client";

import { useState } from "react";
import { Group, Task } from "@/lib/api";
import { useTranslation } from "@/lib/i18n";

interface TaskFormProps {
  groups: Group[];
  initial?: Partial<Task>;
  onSubmit: (data: Partial<Task>) => Promise<void>;
  onCancel: () => void;
  submitLabel?: string;
}

export default function TaskForm({
  groups,
  initial,
  onSubmit,
  onCancel,
  submitLabel,
}: TaskFormProps) {
  const { t } = useTranslation();
  const [title, setTitle] = useState(initial?.title || "");
  const [description, setDescription] = useState(initial?.description || "");
  const [status, setStatus] = useState(initial?.status || "pending");
  const [priority, setPriority] = useState(initial?.priority || "medium");
  const [groupId, setGroupId] = useState(initial?.group_id || "");
  const [dueAt, setDueAt] = useState(
    initial?.due_at ? initial.due_at.slice(0, 16) : ""
  );
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const STATUSES = [
    { value: "pending", label: t("tasks.status.pending") },
    { value: "in_progress", label: t("tasks.status.in_progress") },
    { value: "done", label: t("tasks.status.done") },
    { value: "cancelled", label: t("tasks.status.cancelled") },
  ];

  const PRIORITIES = [
    { value: "low", label: t("tasks.priority.low") },
    { value: "medium", label: t("tasks.priority.medium") },
    { value: "high", label: t("tasks.priority.high") },
    { value: "urgent", label: t("tasks.priority.urgent") },
  ];

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim()) {
      setError(t("tasks.form.titleRequired"));
      return;
    }
    setLoading(true);
    setError("");
    try {
      await onSubmit({
        title: title.trim(),
        description: description.trim(),
        status: status as Task["status"],
        priority: priority as Task["priority"],
        group_id: groupId || null,
        due_at: dueAt ? new Date(dueAt).toISOString() : null,
      });
    } catch (err) {
      setError(
        err instanceof Error ? err.message : t("tasks.form.saveError")
      );
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {error && (
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      <div>
        <label className="block text-sm font-medium mb-1">{t("tasks.form.title")} *</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-shadow"
          placeholder={t("tasks.form.placeholder")}
          autoFocus
        />
      </div>

      <div>
        <label className="block text-sm font-medium mb-1">{t("tasks.form.description")}</label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={3}
          className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none transition-shadow"
          placeholder={t("tasks.form.descPlaceholder")}
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">{t("tasks.form.status")}</label>
          <select
            value={status}
            onChange={(e) =>
              setStatus(
                e.target.value as
                  | "pending"
                  | "in_progress"
                  | "done"
                  | "cancelled"
              )
            }
            className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
          >
            {STATUSES.map((s) => (
              <option key={s.value} value={s.value}>
                {s.label}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">{t("tasks.form.priority")}</label>
          <select
            value={priority}
            onChange={(e) => setPriority(e.target.value as any)}
            className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
          >
            {PRIORITIES.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">{t("tasks.form.group")}</label>
          <select
            value={groupId}
            onChange={(e) => setGroupId(e.target.value as any)}
            className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
          >
            <option value="">{t("tasks.form.noGroup")}</option>
            {groups.map((g) => (
              <option key={g.id} value={g.id}>
                {g.icon ? `${g.icon} ` : ""}{g.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">{t("tasks.form.dueDate")}</label>
          <input
            type="datetime-local"
            value={dueAt}
            onChange={(e) => setDueAt(e.target.value)}
            className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 outline-none min-h-[44px]"
          />
        </div>
      </div>

      <div className="flex gap-3 pt-2">
        <button
          type="submit"
          disabled={loading}
          className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors disabled:opacity-50 min-h-[44px]"
        >
          {loading ? t("tasks.form.saving") : (submitLabel || t("tasks.form.save"))}
        </button>
        <button
          type="button"
          onClick={onCancel}
          className="px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px]"
        >
          {t("tasks.form.cancel")}
        </button>
      </div>
    </form>
  );
}