/**
 * 邮件配置表单组件
 */
import React from 'react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import type { ConfigComponentProps } from '../config-strategies/types';

export const EmailConfigForm: React.FC<ConfigComponentProps> = ({
  register,
  errors,
  setValue,
}) => {

  return (
    <>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="smtpHost">
            SMTP服务器 <span className="text-destructive">*</span>
          </Label>
          <Input
            id="smtpHost"
            placeholder="smtp.qq.com"
            {...register('config.smtpHost')}
          />
          {errors.config?.smtpHost && (
            <p className="text-sm text-destructive">
              {errors.config.smtpHost.message}
            </p>
          )}
        </div>

        <div className="space-y-2">
          <Label htmlFor="smtpPort">
            SMTP端口 <span className="text-destructive">*</span>
          </Label>
          <Input
            id="smtpPort"
            type="number"
            placeholder="465"
            {...register('config.smtpPort', { valueAsNumber: true })}
          />
          {errors.config?.smtpPort && (
            <p className="text-sm text-destructive">
              {errors.config.smtpPort.message}
            </p>
          )}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="username">
          用户名 <span className="text-destructive">*</span>
        </Label>
        <Input
          id="username"
          placeholder="notify@example.com"
          {...register('config.username')}
        />
        {errors.config?.username && (
          <p className="text-sm text-destructive">
            {errors.config.username.message}
          </p>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="password">
          密码 <span className="text-destructive">*</span>
        </Label>
        <Input
          id="password"
          type="password"
          placeholder="请输入SMTP密码"
          {...register('config.password')}
        />
        {errors.config?.password && (
          <p className="text-sm text-destructive">
            {errors.config.password.message}
          </p>
        )}
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="from">
            发件人邮箱 <span className="text-destructive">*</span>
          </Label>
          <Input
            id="from"
            type="email"
            placeholder="notify@example.com"
            {...register('config.from')}
          />
          {errors.config?.from && (
            <p className="text-sm text-destructive">
              {errors.config.from.message}
            </p>
          )}
        </div>

        <div className="space-y-2">
          <Label htmlFor="fromName">发件人名称（可选）</Label>
          <Input
            id="fromName"
            placeholder="部署通知"
            {...register('config.fromName')}
          />
        </div>
      </div>


      <div className="flex items-center space-x-2">
        <Switch
          id="useSsl"
          defaultChecked={true}
          onCheckedChange={(checked) => {
            setValue('config.useSsl', checked);
          }}
        />
        <Label htmlFor="useSsl">使用 SSL</Label>
      </div>
    </>
  );
};
