duoqi-admin/src/components/settings/PushTemplateTab.tsx

import { useState, useEffect, useCallback } from "react"
import { Plus, Pencil, Trash2, Send, FileText } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import {
  fetchPushTemplates,
  createPushTemplate,
  updatePushTemplate,
  deletePushTemplate,
  sendTestPush,
} from "@/lib/api/settings-api"
import { PUSH_TRIGGER_LABELS } from "@/lib/constants"
import type { PushTemplate, PushTriggerType, PushTemplateFormData } from "@/types/settings"

const triggerBadgeColors: Record<PushTriggerType, "default" | "secondary" | "outline"> = {
  streak: "default",
  achievement: "secondary",
  event: "outline",
  manual: "default",
}

export function PushTemplateTab() {
  const [templates, setTemplates] = useState<PushTemplate[]>([])
  const [loading, setLoading] = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
  const [editingTemplate, setEditingTemplate] = useState<PushTemplate | null>(null)
  const [deletingTemplate, setDeletingTemplate] = useState<PushTemplate | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [testSending, setTestSending] = useState(false)

  // 表单状态
  const [formData, setFormData] = useState<PushTemplateFormData>({
    name: "",
    title: "",
    body: "",
    triggerType: "manual",
  })

  const loadTemplates = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetchPushTemplates()
      setTemplates(res.data)
    } catch {
      setTemplates([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadTemplates()
  }, [loadTemplates])

  function openCreateDialog() {
    setEditingTemplate(null)
    setFormData({
      name: "",
      title: "",
      body: "",
      triggerType: "manual",
    })
    setDialogOpen(true)
  }

  function openEditDialog(template: PushTemplate) {
    setEditingTemplate(template)
    setFormData({
      name: template.name,
      title: template.title,
      body: template.body,
      triggerType: template.triggerType,
    })
    setDialogOpen(true)
  }

  function openDeleteDialog(template: PushTemplate) {
    setDeletingTemplate(template)
    setDeleteOpen(true)
  }

  async function handleSubmit() {
    setSubmitting(true)
    try {
      if (editingTemplate) {
        await updatePushTemplate(editingTemplate.id, formData)
      } else {
        await createPushTemplate(formData)
      }
      setDialogOpen(false)
      await loadTemplates()
    } finally {
      setSubmitting(false)
    }
  }

  async function handleDelete() {
    if (!deletingTemplate) return
    await deletePushTemplate(deletingTemplate.id)
    setDeleteOpen(false)
    setDeletingTemplate(null)
    await loadTemplates()
  }

  async function handleSendTest(template: PushTemplate) {
    setTestSending(true)
    try {
      await sendTestPush(template.id)
      // TODO: 显示成功提示
    } catch {
      // TODO: 显示错误提示
    } finally {
      setTestSending(false)
    }
  }

  return (
    <>
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold">推送文案模板</h2>
          <p className="text-sm text-muted-foreground">
            管理各类推送通知的文案模板，支持变量占位符
          </p>
        </div>
        <Button onClick={openCreateDialog}>
          <Plus className="size-4 mr-1" />
          新建模板
        </Button>
      </div>

      {/* 可用变量说明 */}
      <div className="rounded-lg border bg-muted/30 p-4 text-sm">
        <h3 className="font-medium mb-2">可用变量</h3>
        <p className="text-muted-foreground">
          在推送内容中使用 <code className="px-1 py-0.5 rounded bg-background">{"{{variable}}"}</code> 形式插入变量。
        </p>
        <ul className="mt-2 space-y-1 text-muted-foreground">
          <li>• <code className="px-1 py-0.5 rounded bg-background">{"{{userName}}"}</code> - 用户昵称</li>
          <li>• <code className="px-1 py-0.5 rounded bg-background">{"{{streakDays}}"}</code> - 连续签到天数</li>
          <li>• <code className="px-1 py-0.5 rounded bg-background">{"{{achievementName}}"}</code> - 成就名称</li>
          <li>• <code className="px-1 py-0.5 rounded bg-background">{"{{eventName}}"}</code> - 活动名称</li>
        </ul>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>模板名称</TableHead>
              <TableHead>触发类型</TableHead>
              <TableHead>标题</TableHead>
              <TableHead>内容预览</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                  加载中...
                </TableCell>
              </TableRow>
            ) : templates.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                  暂无推送模板
                </TableCell>
              </TableRow>
            ) : (
              templates.map((template) => (
                <TableRow key={template.id}>
                  <TableCell className="font-medium flex items-center gap-2">
                    <FileText className="size-4 text-muted-foreground" />
                    {template.name}
                  </TableCell>
                  <TableCell>
                    <Badge variant={triggerBadgeColors[template.triggerType]}>
                      {PUSH_TRIGGER_LABELS[template.triggerType]}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-sm">{template.title}</TableCell>
                  <TableCell className="text-muted-foreground text-sm max-w-xs">
                    <span className="line-clamp-1">{template.body}</span>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Button
                        variant="outline"
                        size="icon-xs"
                        onClick={() => handleSendTest(template)}
                        disabled={testSending}
                        title="发送测试推送"
                      >
                        <Send className="size-3.5" />
                      </Button>
                      <Button variant="ghost" size="icon-xs" onClick={() => openEditDialog(template)}>
                        <Pencil className="size-3.5" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon-xs"
                        className="text-destructive"
                        onClick={() => openDeleteDialog(template)}
                      >
                        <Trash2 className="size-3.5" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* 创建/编辑对话框 */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingTemplate ? "编辑模板" : "新建模板"}</DialogTitle>
            <DialogDescription>
              配置推送通知的标题和内容，支持变量占位符
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div>
              <Label htmlFor="tpl-name">模板名称</Label>
              <Input
                id="tpl-name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="例如：连胜提醒"
              />
            </div>

            <div>
              <Label htmlFor="tpl-trigger">触发类型</Label>
              <Select
                value={formData.triggerType}
                onValueChange={(val) => setFormData({ ...formData, triggerType: val as PushTriggerType })}
              >
                <SelectTrigger id="tpl-trigger">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(PUSH_TRIGGER_LABELS).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="tpl-title">推送标题</Label>
              <Input
                id="tpl-title"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="例如：恭喜获得成就！"
              />
            </div>

            <div>
              <Label htmlFor="tpl-body">推送内容</Label>
              <Textarea
                id="tpl-body"
                value={formData.body}
                onChange={(e) => setFormData({ ...formData, body: e.target.value })}
                placeholder='例如：{{userName}}，你已连续签到 {{streakDays}} 天！'
                rows={4}
              />
              <p className="text-xs text-muted-foreground mt-1">
                使用 {`{{variable}}`} 形式插入变量
              </p>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={submitting}>
              取消
            </Button>
            <Button onClick={handleSubmit} disabled={submitting}>
              {submitting ? "保存中..." : "保存"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除确认 */}
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除推送模板"{deletingTemplate?.name}"吗？此操作不可撤销。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              className="bg-destructive text-white hover:bg-destructive/90"
            >
              删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}