// Modal editor for a notification channel — used for both create and edit,
// mirroring NodeEditDialog. Holds a local draft until 保存 (cancel discards).
// The channel id is the stable key per-account opt-ins reference, so it's
// editable only on create and locked on edit.
import { useState } from 'react';
import {
    DEFAULT_WEBHOOK_BODY,
    DEFAULT_EMAIL_BODY,
    DEFAULT_EMAIL_SUBJECT,
} from '@snowluma/common/notification-templates';
import { Plus, Trash2 } from 'lucide-react';
import { Modal } from '@/components/interior/modal';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { PasswordVisibilityIcon } from '@/components/ui/password-visibility-icon';
import { Textarea } from '@/components/ui/textarea';
import { ToggleSwitch } from '@/components/ui/toggle-switch';
import { useTheme } from '@/contexts/ThemeContext';
import { cn } from '@/lib/utils';
import {
    notificationChannelType,
    type NotificationChannel,
    type NotificationChannelType,
} from '@/types';

interface HeaderRow {
    name: string;
    value: string;
}

function headersToRows(headers?: Record<string, string>): HeaderRow[] {
    const rows = Object.entries(headers ?? {}).map(([name, value]) => ({ name, value }));
    return rows.length > 0 ? rows : [{ name: '', value: '' }];
}

function rowsToHeaders(rows: HeaderRow[]): Record<string, string> | undefined {
    const out: Record<string, string> = {};

    for (const row of rows) {
        const name = row.name.trim();
        const value = row.value.trim();

        if (!name || !value) {
            continue;
        }

        out[name] = value;
    }

    return Object.keys(out).length > 0 ? out : undefined;
}

const CHANNEL_ID_RE = /^[\w.-]+$/;

function isHttpUrl(u: string): boolean {
    try {
        const x = new URL(u.trim());
        return x.protocol === 'http:' || x.protocol === 'https:';
    } catch {
        return false;
    }
}

function looksLikeEmail(value: string): boolean {
    return /^[^\s<>@]+@[^\s<>@]+$/.test(value.trim()) || /<[^<>@\s]+@[^<>@\s]+>/.test(value);
}

function hasRecipient(value: string): boolean {
    return value.split(/[,;\n]+/).some((part) => looksLikeEmail(part));
}

export function applyType(
    draft: NotificationChannel,
    type: NotificationChannelType,
): NotificationChannel {
    if (type === notificationChannelType(draft)) {
        return { ...draft, type };
    }

    if (type === 'email') {
        const keepBody = draft.bodyTemplate && draft.bodyTemplate !== DEFAULT_WEBHOOK_BODY;
        return {
            ...draft,
            type,
            url: '',
            headers: undefined,
            smtpHost: draft.smtpHost ?? '',
            smtpPort: draft.smtpPort ?? 465,
            smtpSecure: draft.smtpSecure ?? true,
            smtpUser: draft.smtpUser ?? '',
            smtpPass: draft.smtpPass ?? '',
            from: draft.from ?? '',
            to: draft.to ?? '',
            subjectTemplate: draft.subjectTemplate || DEFAULT_EMAIL_SUBJECT,
            bodyTemplate: keepBody ? draft.bodyTemplate : DEFAULT_EMAIL_BODY,
        };
    }

    const keepBody = draft.bodyTemplate && draft.bodyTemplate !== DEFAULT_EMAIL_BODY;
    return {
        id: draft.id,
        name: draft.name,
        type: 'webhook',
        url: draft.url,
        bodyTemplate: keepBody ? draft.bodyTemplate : DEFAULT_WEBHOOK_BODY,
        enabled: draft.enabled,
    };
}

export function toChannel(
    draft: NotificationChannel,
    headerRows: HeaderRow[],
): NotificationChannel {
    const id = draft.id.trim();
    const name = draft.name.trim();
    const enabled = draft.enabled;

    if (notificationChannelType(draft) === 'email') {
        return {
            id,
            name,
            type: 'email',
            url: '',
            bodyTemplate: draft.bodyTemplate,
            enabled,
            smtpHost: draft.smtpHost?.trim() ?? '',
            smtpPort: draft.smtpPort ?? 465,
            smtpSecure: draft.smtpSecure ?? true,
            smtpUser: draft.smtpUser?.trim() || undefined,
            smtpPass: draft.smtpPass || undefined,
            from: draft.from?.trim() ?? '',
            to: draft.to?.trim() ?? '',
            subjectTemplate: draft.subjectTemplate?.trim() || DEFAULT_EMAIL_SUBJECT,
        };
    }

    return {
        id,
        name,
        type: 'webhook',
        url: draft.url.trim(),
        bodyTemplate: draft.bodyTemplate,
        enabled,
        headers: rowsToHeaders(headerRows),
    };
}

interface NotificationChannelDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    isEdit: boolean;
    /** Seed draft — a blank channel for create, the existing one for edit. */
    initial: NotificationChannel;
    /** Ids of every other channel, for the duplicate check. */
    otherIds: string[];
    onSubmit: (channel: NotificationChannel) => void;
}

export function NotificationChannelDialog(props: NotificationChannelDialogProps) {
    const { open, onOpenChange, isEdit, initial, otherIds, onSubmit } = props;
    // Parent unmounts on close, so each open re-seeds via lazy init.
    const [draft, setDraft] = useState<NotificationChannel>(() => ({
        ...initial,
        type: notificationChannelType(initial),
    }));
    const [headerRows, setHeaderRows] = useState<HeaderRow[]>(() => headersToRows(initial.headers));
    const [showPass, setShowPass] = useState(false);
    const reduce = useTheme().appearance.disableMotion;
    const patch = (p: Partial<NotificationChannel>) => setDraft({ ...draft, ...p });

    const patchHeader = (index: number, p: Partial<HeaderRow>) => {
        setHeaderRows(headerRows.map((row, i) => (i === index ? { ...row, ...p } : row)));
    };

    const type = notificationChannelType(draft);
    const id = draft.id.trim();
    const idBlank = id.length === 0;
    const idBad = !idBlank && (!CHANNEL_ID_RE.test(id) || id.length > 64);
    const idDup = !idBlank && otherIds.includes(id);
    const urlBlank = draft.url.trim().length === 0;
    const urlBad = !urlBlank && !isHttpUrl(draft.url);
    const hostBlank = !(draft.smtpHost ?? '').trim();
    const fromBlank = !(draft.from ?? '').trim();
    const fromBad = !fromBlank && !looksLikeEmail(draft.from ?? '');
    const toBlank = !(draft.to ?? '').trim();
    const toBad = !toBlank && !hasRecipient(draft.to ?? '');
    const port = draft.smtpPort ?? 465;
    const portBad = !Number.isInteger(port) || port < 1 || port > 65535;
    const canSave =
        type === 'email'
            ? !idBlank &&
              !idBad &&
              !idDup &&
              !hostBlank &&
              !fromBlank &&
              !fromBad &&
              !toBlank &&
              !toBad &&
              !portBad
            : !idBlank && !idBad && !idDup && !urlBlank && !urlBad;

    const idError = idBlank
        ? '请填写渠道 ID'
        : idBad
          ? '只能用字母 / 数字 / . _ - ，≤64 字符'
          : idDup
            ? 'ID 与其它渠道重复'
            : undefined;
    const urlError = urlBlank ? '请填写 Webhook URL' : urlBad ? '必须是 http(s) 地址' : undefined;
    const hostError = hostBlank ? '请填写 SMTP 主机' : undefined;
    const fromError = fromBlank ? '请填写发件人' : fromBad ? '必须是邮箱地址' : undefined;
    const toError = toBlank ? '请填写收件人' : toBad ? '至少填写一个邮箱' : undefined;
    const portError = portBad ? '端口 1–65535' : undefined;

    return (
        <Modal
            open={open}
            onClose={() => onOpenChange(false)}
            title={isEdit ? '编辑渠道' : '新建渠道'}
            closeLabel="关闭渠道编辑弹窗"
            maxWidth={576}
            maxHeight="min(86dvh, 780px)"
            footer={
                <>
                    <Button variant="outline" onClick={() => onOpenChange(false)}>
                        取消
                    </Button>
                    <Button
                        disabled={!canSave}
                        onClick={() => {
                            onSubmit(toChannel(draft, headerRows));
                            onOpenChange(false);
                        }}
                    >
                        {isEdit ? '保存修改' : '创建渠道'}
                    </Button>
                </>
            }
        >
            <div className="flex flex-col gap-3">
                <div className="grid grid-cols-2 gap-1 rounded-lg border bg-muted/40 p-1">
                    {(
                        [
                            ['webhook', 'Webhook'],
                            ['email', '邮件'],
                        ] as const
                    ).map(([value, label]) => (
                        <button
                            key={value}
                            type="button"
                            aria-pressed={type === value}
                            onClick={() => setDraft(applyType(draft, value))}
                            className={cn(
                                'rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                                type === value
                                    ? 'bg-background text-foreground shadow-sm'
                                    : 'text-muted-foreground hover:text-foreground',
                            )}
                        >
                            {label}
                        </button>
                    ))}
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                    <Field
                        label="渠道 ID"
                        placeholder="dingtalk"
                        value={draft.id}
                        disabled={isEdit}
                        hint={isEdit ? '创建后不可更改' : '账号据此勾选；字母/数字/. _ -'}
                        error={idError}
                        onChange={(v) => patch({ id: v })}
                    />
                    <Field
                        label="显示名"
                        placeholder={type === 'email' ? '运维邮箱' : '钉钉群机器人'}
                        value={draft.name}
                        onChange={(v) => patch({ name: v })}
                    />
                </div>

                {type === 'webhook' ? (
                    <>
                        <Field
                            label="Webhook URL"
                            type="url"
                            placeholder="https://oapi.dingtalk.com/robot/send?access_token=…"
                            value={draft.url}
                            error={urlError}
                            onChange={(v) => patch({ url: v })}
                        />

                        <div className="flex flex-col gap-1.5">
                            <div className="flex items-center justify-between gap-2">
                                <Label>请求头</Label>
                                <Button
                                    type="button"
                                    variant="ghost"
                                    size="sm"
                                    onClick={() =>
                                        setHeaderRows([...headerRows, { name: '', value: '' }])
                                    }
                                >
                                    <Plus className="size-3.5" />
                                    添加
                                </Button>
                            </div>
                            <div className="flex flex-col gap-2">
                                {headerRows.map((row, i) => (
                                    <div key={i} className="flex items-center gap-2">
                                        <Input
                                            value={row.name}
                                            placeholder="Authorization"
                                            spellCheck={false}
                                            onChange={(e) =>
                                                patchHeader(i, { name: e.target.value })
                                            }
                                            className="font-mono text-xs"
                                        />
                                        <Input
                                            value={row.value}
                                            placeholder="Bearer …"
                                            spellCheck={false}
                                            onChange={(e) =>
                                                patchHeader(i, { value: e.target.value })
                                            }
                                            className="font-mono text-xs"
                                        />
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="icon-sm"
                                            aria-label="删除请求头"
                                            onClick={() => {
                                                const next = headerRows.filter(
                                                    (_, idx) => idx !== i,
                                                );
                                                setHeaderRows(
                                                    next.length > 0
                                                        ? next
                                                        : [{ name: '', value: '' }],
                                                );
                                            }}
                                            className="shrink-0 text-muted-foreground hover:text-foreground"
                                        >
                                            <Trash2 className="size-3.5" />
                                        </Button>
                                    </div>
                                ))}
                            </div>
                            <p className="text-xs leading-relaxed text-muted-foreground">
                                可选，默认 Content-Type 为 application/json。
                            </p>
                        </div>
                    </>
                ) : (
                    <>
                        <div className="grid gap-3 sm:grid-cols-[1fr_7rem]">
                            <Field
                                label="SMTP 主机"
                                placeholder="smtp.qq.com"
                                value={draft.smtpHost ?? ''}
                                error={hostError}
                                onChange={(v) => patch({ smtpHost: v })}
                            />
                            <Field
                                label="端口"
                                type="number"
                                placeholder="465"
                                value={String(draft.smtpPort ?? 465)}
                                error={portError}
                                onChange={(v) => {
                                    const n = Math.trunc(Number(v));

                                    if (!Number.isFinite(n)) {
                                        patch({ smtpPort: 465 });
                                        return;
                                    }

                                    patch({
                                        smtpPort: n,
                                        smtpSecure:
                                            n === 465 ? true : n === 587 ? false : draft.smtpSecure,
                                    });
                                }}
                            />
                        </div>

                        <div className="grid gap-3 sm:grid-cols-2">
                            <Field
                                label="SMTP 用户名"
                                placeholder="bot@qq.com"
                                value={draft.smtpUser ?? ''}
                                hint="部分内网中继可不填"
                                onChange={(v) => patch({ smtpUser: v })}
                            />
                            <div className="flex flex-col gap-1.5">
                                <Label>SMTP 密码</Label>
                                <div className="relative">
                                    <Input
                                        type={showPass ? 'text' : 'password'}
                                        value={draft.smtpPass ?? ''}
                                        autoComplete="new-password"
                                        spellCheck={false}
                                        placeholder="授权码 / 密码"
                                        onChange={(e) => patch({ smtpPass: e.target.value })}
                                        className="pr-11 font-mono text-xs"
                                    />
                                    <button
                                        type="button"
                                        onClick={() => setShowPass((v) => !v)}
                                        className="absolute right-1.5 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
                                        tabIndex={-1}
                                        aria-label={showPass ? '隐藏密码' : '显示密码'}
                                    >
                                        <PasswordVisibilityIcon
                                            visible={showPass}
                                            reduceMotion={reduce}
                                        />
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div className="flex items-center justify-between rounded-lg border bg-card/40 p-3">
                            <div className="min-w-0">
                                <Label className="text-sm">隐式 TLS</Label>
                                <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                                    465 开启，587 关闭（STARTTLS）。
                                </p>
                            </div>
                            <ToggleSwitch
                                value={draft.smtpSecure ?? true}
                                onChange={(v) => patch({ smtpSecure: v })}
                                ariaLabel="隐式 TLS"
                            />
                        </div>

                        <div className="grid gap-3 sm:grid-cols-2">
                            <Field
                                label="发件人"
                                placeholder="SnowLuma <bot@qq.com>"
                                value={draft.from ?? ''}
                                error={fromError}
                                onChange={(v) => patch({ from: v })}
                            />
                            <Field
                                label="收件人"
                                placeholder="ops@example.com, a@b.com"
                                value={draft.to ?? ''}
                                error={toError}
                                hint="多个地址用逗号或分号分隔"
                                onChange={(v) => patch({ to: v })}
                            />
                        </div>

                        <Field
                            label="主题模板"
                            placeholder={DEFAULT_EMAIL_SUBJECT}
                            value={draft.subjectTemplate ?? DEFAULT_EMAIL_SUBJECT}
                            onChange={(v) => patch({ subjectTemplate: v })}
                        />
                    </>
                )}

                <div className="flex flex-col gap-1.5">
                    <Label>{type === 'email' ? '正文模板' : 'Body 模板'}</Label>
                    <Textarea
                        value={draft.bodyTemplate}
                        rows={type === 'email' ? 6 : 3}
                        spellCheck={false}
                        onChange={(e) => patch({ bodyTemplate: e.target.value })}
                        className="font-mono text-xs leading-relaxed"
                    />
                    <p className="text-xs leading-relaxed text-muted-foreground">
                        变量：<code className="font-mono">{'{uin}'}</code>{' '}
                        <code className="font-mono">{'{nickname}'}</code>{' '}
                        <code className="font-mono">{'{event}'}</code>（offline/online）{' '}
                        <code className="font-mono">{'{time}'}</code>{' '}
                        <code className="font-mono">{'{status}'}</code>（Hook 状态）{' '}
                        <code className="font-mono">{'{pid}'}</code>（进程 ID）{' '}
                        <code className="font-mono">{'{error}'}</code>（进程错误）
                        。进程信息为空表示未知。
                        {type === 'email' ? '正文以 < 开头时按 HTML 发送。' : ''}
                    </p>
                </div>

                <div className="flex items-center justify-between rounded-lg border bg-card/40 p-3">
                    <div className="min-w-0">
                        <Label className="text-sm">启用</Label>
                        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                            关闭后停止推送，保留配置。
                        </p>
                    </div>
                    <ToggleSwitch
                        value={draft.enabled}
                        onChange={(v) => patch({ enabled: v })}
                        ariaLabel="启用渠道"
                    />
                </div>
            </div>
        </Modal>
    );
}

interface FieldProps {
    label: string;
    value: string;
    onChange: (v: string) => void;
    placeholder?: string;
    type?: 'text' | 'url' | 'number';
    error?: string;
    hint?: string;
    disabled?: boolean;
}

function Field({
    label,
    value,
    onChange,
    placeholder,
    type = 'text',
    error,
    hint,
    disabled,
}: FieldProps) {
    return (
        <div className="flex flex-col gap-1.5">
            <Label>{label}</Label>
            <Input
                type={type}
                value={value}
                disabled={disabled}
                placeholder={placeholder}
                onChange={(e) => onChange(e.target.value)}
                className={cn(
                    error && 'border-destructive focus-visible:ring-destructive/40',
                    disabled && 'opacity-60',
                )}
            />
            {error ? (
                <p className="text-xs text-destructive">{error}</p>
            ) : hint ? (
                <p className="text-xs text-muted-foreground">{hint}</p>
            ) : null}
        </div>
    );
}