'use client';

import { useState, useEffect } from 'react';
import { MessageTemplate } from '../types';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Send } from 'lucide-react';

interface MessageTemplateTestDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  testTemplate: MessageTemplate | null;
  onSendTest: (testData: TestData) => void;
}

interface TestData {
  recipient: string;
  variables: Record<string, string>;
}

export function MessageTemplateTestDialog({
  open,
  onOpenChange,
  testTemplate,
  onSendTest
}: MessageTemplateTestDialogProps) {
  const [testData, setTestData] = useState<TestData>({
    recipient: '',
    variables: {},
  });

  // 使用useEffect来管理测试数据的状态
  useEffect(() => {
    if (testTemplate && open) {
      const varsObj: Record<string, string> = {};
      testTemplate.variables.forEach(v => {
        varsObj[v] = '';
      });
      setTestData({
        recipient: '',
        variables: varsObj,
      });
    }
  }, [testTemplate, open]);

  const handleSendTest = () => {
    onSendTest(testData);
  };

  const handleVariableChange = (variable: string, value: string) => {
    setTestData({
      ...testData,
      variables: { ...testData.variables, [variable]: value }
    });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            <div className="flex items-center gap-2">
              <Send className="w-5 h-5 text-green-600" />
              发送测试消息
            </div>
          </DialogTitle>
          <DialogDescription className="sr-only">
            测试发送消息模版
          </DialogDescription>
        </DialogHeader>
        {testTemplate && (
          <div className="space-y-4">
            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-sm text-blue-900">
                模板：{testTemplate.name}
              </p>
            </div>
            <div>
              <Label>接收人 *</Label>
              <Input
                value={testData.recipient}
                onChange={(e) => setTestData({ ...testData, recipient: e.target.value })}
                placeholder={
                  testTemplate.type === 'sms' ? '手机号' :
                  testTemplate.type === 'email' ? '邮箱地址' :
                  '用户ID'
                }
              />
            </div>
            {testTemplate.variables.length > 0 && (
              <div className="space-y-3">
                <Label>填写变量值</Label>
                {testTemplate.variables.map(variable => (
                  <div key={variable}>
                    <Label className="text-sm text-muted-foreground">{variable}</Label>
                    <Input
                      value={testData.variables[variable] || ''}
                      onChange={(e) => handleVariableChange(variable, e.target.value)}
                      placeholder={`输入 ${variable} 的值`}
                    />
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSendTest}>
            <Send className="w-4 h-4 mr-2" />
            发送测试
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}