TTMT.ManageWebGUI/src/components/forms/command-form.tsx

"use client";

import { useForm } from "@tanstack/react-form";
import { z } from "zod";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Info } from "lucide-react";
import { useState } from "react";

export interface ShellCommandData {
  command: string;
  qos: 0 | 1 | 2;
  isRetained: boolean;
}

interface ShellCommandFormProps {
  command: string;
  onCommandChange: (value: string) => void;
  qos?: 0 | 1 | 2;
  onQoSChange?: (value: 0 | 1 | 2) => void;
  isRetained?: boolean;
  onIsRetainedChange?: (value: boolean) => void;
  disabled?: boolean;
}

const QoSDescriptions = {
  0: {
    name: "At Most Once (Fire and Forget)",
    description:
      "Gửi lệnh một lần mà không đảm bảo. Nhanh nhất, tiêu tốn ít tài nguyên.",
  },
  1: {
    name: "At Least Once",
    description:
      "Đảm bảo lệnh sẽ được nhận ít nhất một lần. Cân bằng giữa tốc độ và độ tin cậy.",
  },
  2: {
    name: "Exactly Once",
    description:
      "Đảm bảo lệnh được nhận chính xác một lần. Chậm nhất nhưng đáng tin cậy nhất.",
  },
};

export function ShellCommandForm({
  command,
  onCommandChange,
  qos = 0,
  onQoSChange,
  isRetained = false,
  onIsRetainedChange,
  disabled,
}: ShellCommandFormProps) {
  const [selectedQoS, setSelectedQoS] = useState<0 | 1 | 2>(qos);

  const form = useForm({
    defaultValues: { command },
    onSubmit: () => {},
  });

  const handleQoSChange = (value: string) => {
    const newQoS = Number(value) as 0 | 1 | 2;
    setSelectedQoS(newQoS);
    onQoSChange?.(newQoS);
  };

  const handleRetainedChange = (checked: boolean) => {
    onIsRetainedChange?.(checked);
  };

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        form.handleSubmit();
      }}
      className="space-y-5"
    >
      {/* Command Input */}
      <form.Field
        name="command"
        validators={{
          onChange: ({ value }: { value: string }) => {
            const schema = z
              .string()
              .min(1, "Nhập command để thực thi")
              .max(500, "Command quá dài");
            const result = schema.safeParse(value);
            if (!result.success) {
              return result.error.issues.map((i) => i.message);
            }
            return [];
          },
        }}
        children={(field) => (
          <div className="w-full space-y-2">
            <Label>Nội Dung Lệnh *</Label>
            <Textarea
              className="w-full h-[20vh] font-mono"
              placeholder="VD: shutdown /s /t 60 /c 'Máy sẽ tắt trong 60 giây'"
              value={field.state.value}
              onChange={(e) => {
                field.handleChange(e.target.value);
                onCommandChange(e.target.value);
              }}
              disabled={disabled}
            />
            {field.state.meta.errors?.length > 0 && (
              <p className="text-sm text-red-500">
                {String(field.state.meta.errors[0])}
              </p>
            )}
          </div>
        )}
      />

      {/* QoS Selection */}
      <div className="space-y-2">
        <Label>QoS (Quality of Service) *</Label>
        <select
          value={selectedQoS}
          onChange={(e) => handleQoSChange(e.target.value)}
          disabled={disabled}
          className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          <option value="0">QoS 0 - At Most Once (Tốc độ cao)</option>
          <option value="1">QoS 1 - At Least Once (Cân bằng)</option>
          <option value="2">QoS 2 - Exactly Once (Độ tin cậy cao)</option>
        </select>

        {/* QoS Description */}
        <Alert className="border-l-4 border-l-blue-500 bg-blue-50 mt-2">
          <Info className="h-4 w-4 text-blue-600" />
          <AlertDescription className="text-sm text-blue-800 mt-1">
            <div className="font-semibold">
              {QoSDescriptions[selectedQoS].name}
            </div>
            <div className="mt-1">{QoSDescriptions[selectedQoS].description}</div>
          </AlertDescription>
        </Alert>
      </div>

      {/* Retained Checkbox */}
      <div className="flex items-center gap-3 rounded-lg border p-4">
        <Checkbox
          id="retained"
          checked={isRetained}
          onCheckedChange={handleRetainedChange}
          disabled={disabled}
        />
        <div className="flex-1">
          <Label htmlFor="retained" className="text-base cursor-pointer">
            Lưu giữ lệnh (Retained)
          </Label>
          <p className="text-sm text-muted-foreground mt-1">
            Broker MQTT sẽ lưu lệnh này và gửi cho client mới khi kết nối. Hữu ích
            cho các lệnh cấu hình cần duy trì trạng thái.
          </p>
        </div>
      </div>
    </form>
  );
}