import * as React from "react"
import { Settings2 } from "lucide-react"

import type { RoleView, WorkflowConfig } from "@/App"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"

type SystemSettingsProps = {
  roleView: RoleView
  onRoleViewChange: (role: RoleView) => void
  workflowConfig: WorkflowConfig
  onWorkflowConfigChange: (next: WorkflowConfig) => void
  auditLogs: string[]
}

export function SystemSettings({
  roleView,
  onRoleViewChange,
  workflowConfig,
  onWorkflowConfigChange,
  auditLogs,
}: SystemSettingsProps) {
  return (
    <div className="flex flex-col gap-6 p-8">
      <div className="flex flex-col gap-1">
        <h1 className="text-3xl font-bold tracking-tight">系统设置</h1>
        <p className="text-muted-foreground">管理角色视角、可选发布能力、私有云账号与导出迁移准备。</p>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">角色视角切换</CardTitle>
            <CardDescription>切换后将影响车型库中的可见操作与可执行动作。</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            <Button
              variant={roleView === "content-ops" ? "default" : "outline"}
              onClick={() => onRoleViewChange("content-ops")}
            >
              内容运营专员
            </Button>
            <Button
              variant={roleView === "biz-market" ? "default" : "outline"}
              onClick={() => onRoleViewChange("biz-market")}
            >
              业务/市场负责人
            </Button>
            <Button
              variant={roleView === "pm-ops" ? "default" : "outline"}
              onClick={() => onRoleViewChange("pm-ops")}
            >
              项目与运维负责人
            </Button>
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">可选发布能力</CardTitle>
            <CardDescription>以下能力用于展示成熟平台的扩展性，均不作为本期上线阻断项。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>启用预发布</span>
              <Button
                size="sm"
                variant={workflowConfig.enablePrePublish ? "default" : "outline"}
                onClick={() =>
                  onWorkflowConfigChange({
                    ...workflowConfig,
                    enablePrePublish: !workflowConfig.enablePrePublish,
                  })
                }
              >
                {workflowConfig.enablePrePublish ? "已开启" : "已关闭"}
              </Button>
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>允许发布后撤回</span>
              <Button
                size="sm"
                variant={workflowConfig.allowRecall ? "default" : "outline"}
                onClick={() =>
                  onWorkflowConfigChange({
                    ...workflowConfig,
                    allowRecall: !workflowConfig.allowRecall,
                  })
                }
              >
                {workflowConfig.allowRecall ? "已开启" : "已关闭"}
              </Button>
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>发布方式</span>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant={workflowConfig.publishStrategy === "manual" ? "default" : "outline"}
                  onClick={() =>
                    onWorkflowConfigChange({ ...workflowConfig, publishStrategy: "manual" })
                  }
                >
                  手动发布
                </Button>
                <Button
                  size="sm"
                  variant={workflowConfig.publishStrategy === "scheduled" ? "default" : "outline"}
                  onClick={() =>
                    onWorkflowConfigChange({ ...workflowConfig, publishStrategy: "scheduled" })
                  }
                >
                  定时发布
                </Button>
              </div>
            </div>
            {workflowConfig.publishStrategy === "scheduled" && (
              <div className="grid gap-2 rounded-lg border p-3">
                <span className="text-muted-foreground">默认发布时间（用于新建内容）</span>
                <Input
                  type="time"
                  value={workflowConfig.defaultPublishTime}
                  onChange={(e) =>
                    onWorkflowConfigChange({
                      ...workflowConfig,
                      defaultPublishTime: e.target.value,
                    })
                  }
                />
              </div>
            )}
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">官网周更规则</CardTitle>
            <CardDescription>当前口径为每周人工巡检和人工更新，不展示自动日更能力。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="grid gap-2">
              <span className="text-muted-foreground">执行频率</span>
              <Badge variant="outline" className="w-fit">固定为每周人工巡检</Badge>
            </div>
            <div className="grid gap-2">
              <span className="text-muted-foreground">建议执行时间</span>
              <Input
                type="time"
                value={workflowConfig.syncExecutionTime}
                onChange={(e) =>
                  onWorkflowConfigChange({
                    ...workflowConfig,
                    syncExecutionTime: e.target.value,
                  })
                }
              />
            </div>
            <div className="grid gap-2">
              <span className="text-muted-foreground">异常重试次数</span>
              <Input
                type="number"
                min={0}
                max={5}
                value={workflowConfig.retryCount}
                onChange={(e) =>
                  onWorkflowConfigChange({
                    ...workflowConfig,
                    retryCount: Number(e.target.value || 0),
                  })
                }
              />
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>更新后人工确认</span>
              <Button
                size="sm"
                variant={workflowConfig.manualConfirmSync ? "default" : "outline"}
                onClick={() =>
                  onWorkflowConfigChange({
                    ...workflowConfig,
                    manualConfirmSync: !workflowConfig.manualConfirmSync,
                  })
                }
              >
                {workflowConfig.manualConfirmSync ? "需要确认" : "自动通过"}
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              需要确认：周更完成后进入待确认队列，由项目与运维负责人核查差异摘要并手动放行。
            </p>
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">私有云账号与访问</CardTitle>
            <CardDescription>展示平台部署和后台登录的基础准备项。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="grid gap-2">
              <span className="text-muted-foreground">后台访问地址</span>
              <Input defaultValue="https://portal.audi-private-cloud.example" />
            </div>
            <div className="grid gap-2">
              <span className="text-muted-foreground">账号开通原则</span>
              <Input defaultValue="按角色开通账号，最小权限访问" />
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>专有云环境状态</span>
              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">已纳入部署方案</Badge>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">导出与迁移准备</CardTitle>
            <CardDescription>用于说明内容平台后续迁移到 Audi 其他平台时的交接能力。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>内容全量导出</span>
              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>素材打包导出</span>
              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
            </div>
            <div className="flex items-center justify-between rounded-lg border p-3">
              <span>配置与日志交接</span>
              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
            </div>
          </CardContent>
        </Card>

        <Card className="border-none shadow-sm bg-white">
          <CardHeader>
            <CardTitle className="text-lg font-bold">变更与审计</CardTitle>
            <CardDescription>展示最近关键操作，用于审核与回溯演示。</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center gap-2">
              <Settings2 className="h-4 w-4 text-audi-red" />
              <span className="text-sm font-medium">最近 12 条关键变更</span>
              <Badge variant="outline" className="ml-auto">
                {auditLogs.length} 条
              </Badge>
            </div>
            <div className="space-y-2">
              {auditLogs.map((item, idx) => (
                <div key={`${item}-${idx}`} className="rounded-lg border px-3 py-2 text-sm text-muted-foreground">
                  {item}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}