// Copyright 2026 Arctel.net
// SPDX-License-Identifier: Apache-2.0

'use client';

import * as React from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';

import { Edit2, Loader2, Play, Plus, Settings, Trash2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

import { ErrorInline } from '@/components/layout/error';
import { LoadingStateWithBorder } from '@/components/layout/loading';

import type {
  ChannelDefinition,
  CreateChannelRequest,
  PushChannel,
  UpdateChannelRequest,
} from '@/lib/services/push';
import { PushService } from '@/lib/services/push';

export function SettingsTab() {
  const queryClient = useQueryClient();

  // --- 获取所有自定义消息通道 ---
  const channelsQuery = useQuery({
    queryKey: ['admin', 'push-channels'],
    queryFn: () => PushService.listChannels(),
  });

  // --- 获取动态通道表单字段定义 ---
  const definitionsQuery = useQuery({
    queryKey: ['admin', 'push-channels-definitions'],
    queryFn: () => PushService.listChannelDefinitions(),
  });

  // --- 消息通道 CRUD Mutations ---
  const createChannelMutation = useMutation({
    mutationFn: (data: CreateChannelRequest) => PushService.createChannel(data),
    onSuccess: () => {
      toast.success('通道创建成功');
      queryClient.invalidateQueries({ queryKey: ['admin', 'push-channels'] });
      setChannelDialogOpen(false);
    },
    onError: (err: unknown) => {
      toast.error('通道创建失败: ' + (err as Error).message);
    },
  });

  const updateChannelMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: UpdateChannelRequest }) =>
      PushService.updateChannel(id, data),
    onSuccess: () => {
      toast.success('通道更新成功');
      queryClient.invalidateQueries({ queryKey: ['admin', 'push-channels'] });
      setChannelDialogOpen(false);
    },
    onError: (err: unknown) => {
      toast.error('通道更新失败: ' + (err as Error).message);
    },
  });

  const deleteChannelMutation = useMutation({
    mutationFn: (id: number) => PushService.deleteChannel(id),
    onSuccess: () => {
      toast.success('通道删除成功');
      queryClient.invalidateQueries({ queryKey: ['admin', 'push-channels'] });
    },
    onError: (err: unknown) => {
      toast.error('通道删除失败: ' + (err as Error).message);
    },
  });

  // --- 消息通道与设置相关 State ---
  const [channelDialogOpen, setChannelDialogOpen] = React.useState(false);
  const [editingChannel, setEditingChannel] =
    React.useState<PushChannel | null>(null);
  const [channelName, setChannelName] = React.useState('');
  const [channelDescription, setChannelDescription] = React.useState('');
  const [channelType, setChannelType] = React.useState('custom');
  const [channelToken, setChannelToken] = React.useState('');
  const [channelUrl, setChannelUrl] = React.useState('');
  const [channelOther, setChannelOther] = React.useState('');

  const activeDef = React.useMemo<ChannelDefinition | undefined>(() => {
    return (definitionsQuery.data ?? []).find((d) => d.type === channelType);
  }, [definitionsQuery.data, channelType]);

  const [testChannelOpen, setTestChannelOpen] = React.useState(false);
  const [testChannelName, setTestChannelName] = React.useState('');
  const [testChannelTarget, setTestChannelTarget] = React.useState('');
  const [isTestingChannel, setIsTestingChannel] = React.useState(false);

  const handleChannelTypeChange = (newType: string) => {
    setChannelType(newType);
    setChannelUrl('');
    setChannelToken('');
    if (newType === 'custom') {
      setChannelOther(
        JSON.stringify(
          {
            title: '$title',
            description: '$description',
            content: '$content',
            url: '$url',
            to: '$to',
          },
          null,
          2,
        ),
      );
    } else {
      setChannelOther('');
    }
  };

  const handleCreateChannelClick = () => {
    setEditingChannel(null);
    setChannelName('');
    setChannelDescription('');
    setChannelType('custom');
    setChannelToken('');
    setChannelUrl('');
    setChannelOther(
      JSON.stringify(
        {
          title: '$title',
          description: '$description',
          content: '$content',
          url: '$url',
          to: '$to',
        },
        null,
        2,
      ),
    );
    setChannelDialogOpen(true);
  };

  const handleEditChannelClick = (channel: PushChannel) => {
    setEditingChannel(channel);
    setChannelName(channel.name);
    setChannelDescription(channel.description ?? '');
    setChannelType(channel.type);
    setChannelToken(channel.token ?? '');
    setChannelUrl(channel.url);
    setChannelOther(channel.other);
    setChannelDialogOpen(true);
  };

  const handleSaveChannel = () => {
    if (!channelName && !editingChannel) {
      toast.error('通道名称不能为空');
      return;
    }
    if (!/^[a-zA-Z_0-9]+$/.test(channelName)) {
      toast.error('通道名称只能使用英文字母、数字和下划线');
      return;
    }

    if (!activeDef) {
      toast.error('无效的通道类型');
      return;
    }

    // 动态字段必填性校验
    for (const field of activeDef.fields) {
      const value =
        field.key === 'url'
          ? channelUrl
          : field.key === 'token'
            ? channelToken
            : channelOther;
      if (field.required && !value.trim()) {
        toast.error(`${field.label}不能为空`);
        return;
      }
    }

    // 协议安全校验（非邮件服务且配置了地址时，强制 HTTPS 协议）
    if (channelType !== 'email') {
      if (channelUrl && !channelUrl.startsWith('https://')) {
        toast.error('地址必须以 https:// 开头以确保安全性');
        return;
      }
    }

    // JSON 结构格式校验
    if (channelType === 'custom') {
      try {
        JSON.parse(channelOther);
      } catch {
        toast.error('请求体必须是合法的 JSON 格式');
        return;
      }
    } else if (channelType === 'lark' && channelOther) {
      try {
        JSON.parse(channelOther);
      } catch {
        toast.error('自定义卡片模版必须是合法的 JSON 格式');
        return;
      }
    }

    if (editingChannel) {
      updateChannelMutation.mutate({
        id: editingChannel.id,
        data: {
          description: channelDescription,
          type: channelType,
          token: channelToken || undefined,
          url: channelUrl,
          other: channelOther,
          enabled: editingChannel.enabled,
        },
      });
    } else {
      createChannelMutation.mutate({
        name: channelName,
        description: channelDescription,
        type: channelType,
        token: channelToken || undefined,
        url: channelUrl,
        other: channelOther,
        enabled: true,
      });
    }
  };

  const handleTestChannelClick = (name: string) => {
    setTestChannelName(name);
    setTestChannelTarget('');
    setTestChannelOpen(true);
  };

  const handleSendChannelTest = async () => {
    try {
      setIsTestingChannel(true);
      toast.info('正在发送测试推送...');
      await PushService.testChannel({
        name: testChannelName,
        target: testChannelTarget || undefined,
      });
      toast.success('测试推送发送成功，请前往对应平台确认。');
      setTestChannelOpen(false);
    } catch (err: unknown) {
      toast.error('连通性测试失败: ' + (err as Error).message);
    } finally {
      setIsTestingChannel(false);
    }
  };

  return (
    <div className='pt-4 space-y-4'>
      <div className='flex items-center justify-between'>
        <div>
          <h2 className='text-sm font-semibold'>自定义推送通道</h2>
          <p className='text-[11px] text-muted-foreground mt-0.5'>
            添加、配置及管理用于第三方 Webhook 对接的自定义数据推送通道
          </p>
        </div>
        <Button
          size='sm'
          onClick={handleCreateChannelClick}
          className='text-xs'
        >
          <Plus className='size-3.5 mr-1' />
          新建消息通道
        </Button>
      </div>

      {channelsQuery.isLoading ? (
        <LoadingStateWithBorder
          icon={Settings}
          description='加载消息通道中...'
        />
      ) : channelsQuery.isError ? (
        <div className='p-8 border border-dashed rounded-xl bg-card'>
          <ErrorInline
            error={channelsQuery.error}
            onRetry={() => channelsQuery.refetch()}
            className='justify-center'
          />
        </div>
      ) : (channelsQuery.data ?? []).length === 0 ? (
        <div className='py-12 border border-dashed rounded-lg flex flex-col items-center justify-center text-muted-foreground'>
          <Settings
            className='size-8 mb-2 opacity-30 animate-spin'
            style={{ animationDuration: '3s' }}
          />
          <span className='text-xs font-medium'>
            暂无自定义通道配置，请点击右上角新建
          </span>
        </div>
      ) : (
        <div className='border border-dashed shadow-none rounded-lg overflow-hidden'>
          <Table className='w-full caption-bottom text-sm min-w-full'>
            <TableHeader className='sticky top-0 z-20 bg-background'>
              <TableRow className='border-b border-dashed hover:bg-transparent'>
                <TableHead className='w-[120px] whitespace-nowrap py-2 h-8'>
                  名称
                </TableHead>
                <TableHead className='w-[100px] whitespace-nowrap py-2 h-8'>
                  类型
                </TableHead>
                <TableHead className='whitespace-nowrap py-2 h-8'>
                  备注
                </TableHead>
                <TableHead className='w-[80px] text-center whitespace-nowrap py-2 h-8'>
                  状态
                </TableHead>
                <TableHead className='sticky right-0 text-center bg-background z-10 w-[180px] py-2 h-8'>
                  操作
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(channelsQuery.data ?? []).map((ch) => (
                <TableRow
                  key={ch.id}
                  className='border-dashed hover:bg-muted/30 cursor-pointer group'
                  onClick={() => handleEditChannelClick(ch)}
                >
                  <TableCell className='text-xs font-mono font-bold py-1'>
                    {ch.name}
                  </TableCell>
                  <TableCell className='py-1'>
                    <Badge
                      variant='outline'
                      className='text-[10px] py-0 px-1.5 h-4.5 whitespace-nowrap'
                    >
                      {(definitionsQuery.data ?? []).find(
                        (d) => d.type === ch.type,
                      )?.name ?? ch.type}
                    </Badge>
                  </TableCell>
                  <TableCell className='text-xs text-muted-foreground max-w-[200px] truncate py-1'>
                    {ch.description || <span className='italic'>无备注</span>}
                  </TableCell>
                  <TableCell
                    className='text-center py-1'
                    onClick={(e) => e.stopPropagation()}
                  >
                    <Switch
                      checked={ch.enabled}
                      onCheckedChange={(checked) => {
                        updateChannelMutation.mutate({
                          id: ch.id,
                          data: {
                            description: ch.description,
                            type: ch.type,
                            token: ch.token,
                            url: ch.url,
                            other: ch.other,
                            enabled: checked,
                          },
                        });
                      }}
                      className='scale-75'
                    />
                  </TableCell>
                  <TableCell
                    className='sticky right-0 text-center bg-background z-10 py-1'
                    onClick={(e) => e.stopPropagation()}
                  >
                    <div className='flex items-center justify-center gap-1'>
                      <Button
                        variant='ghost'
                        size='sm'
                        onClick={() => handleTestChannelClick(ch.name)}
                        className='h-6 px-2 text-[10px] text-primary hover:text-primary hover:bg-primary/10'
                      >
                        <Play className='size-2.5 mr-1' />
                        测试
                      </Button>
                      <Button
                        variant='ghost'
                        size='sm'
                        onClick={() => handleEditChannelClick(ch)}
                        className='h-6 px-2 text-[10px] text-muted-foreground hover:text-foreground'
                      >
                        <Edit2 className='size-2.5 mr-1' />
                        编辑
                      </Button>
                      <Button
                        variant='ghost'
                        size='sm'
                        disabled={deleteChannelMutation.isPending}
                        onClick={() => {
                          if (confirm(`确定要删除通道 "${ch.name}" 吗？`)) {
                            deleteChannelMutation.mutate(ch.id);
                          }
                        }}
                        className='h-6 px-2 text-[10px] text-destructive hover:text-destructive hover:bg-destructive/10'
                      >
                        <Trash2 className='size-2.5 mr-1' />
                        删除
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/* ==================== 对话框：新增/编辑消息通道 ==================== */}
      <Dialog open={channelDialogOpen} onOpenChange={setChannelDialogOpen}>
        <DialogContent className='sm:max-w-[600px] max-h-[85vh] overflow-y-auto'>
          <DialogHeader>
            <DialogTitle>
              {editingChannel ? '编辑消息通道' : '新建消息通道'}
            </DialogTitle>
            <DialogDescription>
              配置自定义通知推送通道，支持以 POST 请求方式向第三方 Webhook
              或推送服务投递数据
            </DialogDescription>
          </DialogHeader>

          <div className='space-y-4 py-4'>
            <div className='space-y-1.5'>
              <Label className='text-xs font-semibold'>名称</Label>
              <Input
                type='text'
                placeholder='请输入通道名称，请仅使用英文字母和下划线，该名称必须唯一'
                value={channelName}
                onChange={(e) => setChannelName(e.target.value)}
                disabled={!!editingChannel}
                className='text-xs h-9 font-mono'
              />
              <p className='text-[10px] text-muted-foreground'>
                通道唯一标识，创建后不可修改
              </p>
            </div>

            <div className='space-y-1.5'>
              <Label className='text-xs font-semibold'>备注</Label>
              <Input
                type='text'
                placeholder='请输入备注信息'
                value={channelDescription}
                onChange={(e) => setChannelDescription(e.target.value)}
                className='text-xs h-9'
              />
            </div>

            <div className='space-y-1.5'>
              <Label className='text-xs font-semibold'>通道类型</Label>
              <Select
                value={channelType}
                onValueChange={handleChannelTypeChange}
              >
                <SelectTrigger className='text-xs h-9'>
                  <SelectValue placeholder='选择通道类型' />
                </SelectTrigger>
                <SelectContent>
                  {(definitionsQuery.data ?? []).map((d) => (
                    <SelectItem key={d.type} value={d.type} className='text-xs'>
                      {d.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {activeDef && (
              <>
                <div className='p-3.5 border rounded-lg bg-muted/20 space-y-1.5'>
                  <div className='text-xs font-semibold'>
                    {activeDef.name}配置说明
                  </div>
                  <p className='text-[11px] text-muted-foreground leading-relaxed'>
                    {activeDef.description}
                  </p>
                </div>

                {activeDef.fields.map((field) => {
                  const value =
                    field.key === 'url'
                      ? channelUrl
                      : field.key === 'token'
                        ? channelToken
                        : channelOther;
                  const onChange = (val: string) => {
                    if (field.key === 'url') setChannelUrl(val);
                    else if (field.key === 'token') setChannelToken(val);
                    else setChannelOther(val);
                  };

                  return (
                    <div key={field.key} className='space-y-1.5'>
                      <Label className='text-xs font-semibold'>
                        {field.label}
                        {field.required && (
                          <span className='text-destructive ml-0.5'>*</span>
                        )}
                      </Label>

                      {field.type === 'textarea' ? (
                        <Textarea
                          placeholder={field.placeholder}
                          value={value}
                          onChange={(e) => onChange(e.target.value)}
                          rows={
                            field.key === 'other' && channelType === 'custom'
                              ? 6
                              : 4
                          }
                          className='text-xs font-mono'
                        />
                      ) : (
                        <Input
                          type={field.type}
                          placeholder={field.placeholder}
                          value={value}
                          onChange={(e) => onChange(e.target.value)}
                          className='text-xs h-9 font-mono'
                        />
                      )}
                      {field.description && (
                        <p className='text-[10px] text-muted-foreground'>
                          {field.description}
                        </p>
                      )}
                    </div>
                  );
                })}

                {/* Custom post helper templates card */}
                {channelType === 'custom' && (
                  <div className='p-3.5 border rounded-lg bg-muted/20 space-y-2.5'>
                    <Label className='text-[11px] font-semibold'>
                      快捷加载常用模版实例：
                    </Label>
                    <div className='flex flex-wrap gap-1.5'>
                      <Button
                        variant='outline'
                        size='sm'
                        className='h-7 text-[10px] px-2 py-0'
                        type='button'
                        onClick={() => {
                          setChannelUrl(
                            'https://open.feishu.cn/open-apis/bot/v2/hook/YOUR_TOKEN',
                          );
                          setChannelOther(
                            JSON.stringify(
                              {
                                msg_type: 'text',
                                content: {
                                  text: '$title\n$description\n$content\n$url',
                                },
                              },
                              null,
                              2,
                            ),
                          );
                          toast.success('已加载飞书 Webhook 模版');
                        }}
                      >
                        飞书 Webhook
                      </Button>
                      <Button
                        variant='outline'
                        size='sm'
                        className='h-7 text-[10px] px-2 py-0'
                        type='button'
                        onClick={() => {
                          setChannelUrl(
                            'https://oapi.dingtalk.com/robot/send?access_token=YOUR_TOKEN',
                          );
                          setChannelOther(
                            JSON.stringify(
                              {
                                msgtype: 'markdown',
                                markdown: {
                                  title: '$title',
                                  text: '### $title\n$content\n\n[查看详情]($url)',
                                },
                              },
                              null,
                              2,
                            ),
                          );
                          toast.success('已加载钉钉机器人模版');
                        }}
                      >
                        钉钉群机器人
                      </Button>
                      <Button
                        variant='outline'
                        size='sm'
                        className='h-7 text-[10px] px-2 py-0'
                        type='button'
                        onClick={() => {
                          setChannelUrl(
                            'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=YOUR_KEY',
                          );
                          setChannelOther(
                            JSON.stringify(
                              {
                                msgtype: 'markdown',
                                markdown: {
                                  content:
                                    '### $title\n$content\n\n[查看详情]($url)',
                                },
                              },
                              null,
                              2,
                            ),
                          );
                          toast.success('已加载企业微信机器人模版');
                        }}
                      >
                        企业微信群机器人
                      </Button>
                      <Button
                        variant='outline'
                        size='sm'
                        className='h-7 text-[10px] px-2 py-0'
                        type='button'
                        onClick={() => {
                          setChannelUrl('https://api.day.app/push');
                          setChannelOther(
                            JSON.stringify(
                              {
                                device_key: '$to',
                                title: '$title',
                                body: '$content',
                                url: '$url',
                              },
                              null,
                              2,
                            ),
                          );
                          toast.success('已加载 Bark App 模版');
                        }}
                      >
                        Bark App
                      </Button>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>

          <DialogFooter>
            <Button
              variant='outline'
              size='sm'
              onClick={() => setChannelDialogOpen(false)}
              className='h-9 text-xs'
            >
              取消
            </Button>
            <Button
              variant='default'
              size='sm'
              disabled={
                createChannelMutation.isPending ||
                updateChannelMutation.isPending
              }
              onClick={handleSaveChannel}
              className='h-9 px-5 text-xs'
            >
              {(createChannelMutation.isPending ||
                updateChannelMutation.isPending) && (
                <Loader2 className='size-3 animate-spin mr-1' />
              )}
              确定
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ==================== 对话框：测试渠道连通性 ==================== */}
      <Dialog open={testChannelOpen} onOpenChange={setTestChannelOpen}>
        <DialogContent className='sm:max-w-[450px]'>
          <DialogHeader>
            <DialogTitle>发送测试通知</DialogTitle>
            <DialogDescription>
              请输入消息测试的接收目标，点击发送后系统将通过此通道执行连通性推送测试
            </DialogDescription>
          </DialogHeader>

          <div className='space-y-4 py-3'>
            <div className='space-y-1.5'>
              <Label className='text-xs'>推送通道名称</Label>
              <Input
                type='text'
                value={testChannelName}
                disabled
                className='text-xs h-9 bg-muted font-mono'
              />
            </div>
            <div className='space-y-1.5'>
              <Label className='text-xs'>测试推送目标 (对应模板变量 $to)</Label>
              <Input
                type='text'
                placeholder='请输入测试推送接收人/目标标识，如 Bark Token、邮箱等'
                value={testChannelTarget}
                onChange={(e) => setTestChannelTarget(e.target.value)}
                className='text-xs h-9'
              />
            </div>
          </div>

          <DialogFooter>
            <Button
              variant='outline'
              size='sm'
              onClick={() => setTestChannelOpen(false)}
              className='h-9 text-xs'
            >
              取消
            </Button>
            <Button
              variant='default'
              size='sm'
              disabled={isTestingChannel}
              onClick={handleSendChannelTest}
              className='h-9 px-5 text-xs'
            >
              {isTestingChannel && (
                <Loader2 className='size-3 animate-spin mr-1' />
              )}
              发送测试
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}