"use client"

import { useState } from "react"
import { ChevronLeft, Copy, FileText, Play, Info, Link } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { toast } from "@/components/ui/use-toast"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// 获取渠道中文名称
const getChannelName = (channel: string) => {
  const channelMap: Record<string, string> = {
    douyin: "抖音",
    kuaishou: "快手",
    xiaohongshu: "小红书",
    weibo: "微博",
    haibao: "海报",
    phone: "电话",
  }
  return channelMap[channel] || channel
}

export default function ApiManagementPage({ params }: { params: { channel: string } }) {
  const router = useRouter()
  const channel = params.channel
  const channelName = getChannelName(channel)

  // 示例数据
  const apiKey = `api_1_b9805j8q`
  const apiUrl = `https://kzmoqjnwgjc9q2xbj4np.lite.vusercontent.net/api/scenarios/${channel}/1/webhook`
  const testUrl = `${apiUrl}?name=测试客户&phone=13800138000`

  // 对话框状态
  const [showDocDialog, setShowDocDialog] = useState(false)
  const [showTestDialog, setShowTestDialog] = useState(false)

  return (
    <div className="flex-1 bg-white min-h-screen pb-20">
      <header className="sticky top-0 z-10 bg-white shadow-sm">
        <div className="flex items-center p-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-medium ml-2">{channelName}获客接口</h1>
        </div>
      </header>

      <div className="p-4 max-w-md mx-auto space-y-5">
        {/* 接口位置提示 */}
        <div className="bg-blue-50 rounded-lg p-3 flex items-start">
          <Info className="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" />
          <div className="ml-2">
            <p className="text-sm text-blue-700">
              <span className="font-medium">接口位置：</span>场景获客 → {channelName}获客 → 选择计划 → 右上角菜单 →
              计划接口
            </p>
          </div>
        </div>

        <Tabs defaultValue="api" className="w-full">
          <TabsList className="grid w-full grid-cols-2 mb-4">
            <TabsTrigger value="api">接口信息</TabsTrigger>
            <TabsTrigger value="params">参数说明</TabsTrigger>
          </TabsList>

          <TabsContent value="api" className="space-y-4">
            {/* API密钥部分 */}
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <h2 className="text-base font-medium">API密钥</h2>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-6 w-6 ml-1">
                          <Info className="h-4 w-4 text-gray-400" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p className="text-xs">用于接口身份验证</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
                <div className="flex space-x-2">
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-8 w-8"
                          onClick={() => setShowDocDialog(true)}
                        >
                          <FileText className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>查看接口文档</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>

                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-8 w-8"
                          onClick={() => setShowTestDialog(true)}
                        >
                          <Play className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>快速测试</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
              </div>

              <Card className="overflow-hidden border-gray-200">
                <CardContent className="p-3">
                  <div className="relative w-full">
                    <Input value={apiKey} readOnly className="font-mono text-sm pr-10 border-gray-200" />
                    <Button
                      variant="ghost"
                      size="icon"
                      className="absolute right-0 top-0 h-full"
                      onClick={() => {
                        navigator.clipboard.writeText(apiKey)
                        toast({
                          title: "已复制",
                          description: "API密钥已复制到剪贴板",
                        })
                      }}
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 接口地址部分 */}
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <h2 className="text-base font-medium">接口地址</h2>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-6 w-6 ml-1">
                          <Link className="h-4 w-4 text-gray-400" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p className="text-xs">发送POST请求到此地址</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-7 text-xs px-2 border-blue-200 text-blue-600 hover:bg-blue-50"
                  onClick={() => {
                    navigator.clipboard.writeText(apiUrl)
                    toast({
                      title: "已复制",
                      description: "接口地址已复制到剪贴板",
                    })
                  }}
                >
                  <Copy className="h-3 w-3 mr-1" />
                  复制
                </Button>
              </div>

              <Card className="overflow-hidden border-gray-200">
                <CardContent className="p-3">
                  <div className="w-full">
                    <div className="font-mono text-xs bg-gray-50 p-2 rounded border border-gray-200 break-all">
                      {apiUrl}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="params" className="space-y-4">
            {/* 必要参数部分 */}
            <div className="space-y-2">
              <h2 className="text-base font-medium flex items-center">
                必要参数
                <span className="text-xs text-red-500 ml-1">*</span>
              </h2>
              <Card className="overflow-hidden border-gray-200">
                <CardContent className="p-3">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-blue-600">name</span>
                        <span className="text-sm text-gray-500 ml-2">(姓名)</span>
                      </div>
                      <span className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded">字符串</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-blue-600">phone</span>
                        <span className="text-sm text-gray-500 ml-2">(电话)</span>
                      </div>
                      <span className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded">字符串</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 可选参数部分 */}
            <div className="space-y-2">
              <h2 className="text-base font-medium">可选参数</h2>
              <Card className="overflow-hidden border-gray-200">
                <CardContent className="p-3">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-gray-600">source</span>
                        <span className="text-sm text-gray-500 ml-2">(来源)</span>
                      </div>
                      <span className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">字符串</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-gray-600">remark</span>
                        <span className="text-sm text-gray-500 ml-2">(备注)</span>
                      </div>
                      <span className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">字符串</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium text-gray-600">tags</span>
                        <span className="text-sm text-gray-500 ml-2">(标签)</span>
                      </div>
                      <span className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">数组</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 示例代码部分 */}
            <div className="space-y-2">
              <h2 className="text-base font-medium">请求示例</h2>
              <Card className="overflow-hidden border-gray-200">
                <CardContent className="p-3">
                  <pre className="text-xs bg-gray-50 p-2 rounded border border-gray-200 overflow-x-auto">
                    {`POST ${apiUrl}
Content-Type: application/json
Authorization: Bearer ${apiKey}

{
  "name": "张三",
  "phone": "13800138000",
  "source": "官网",
  "remark": "有意向",
  "tags": ["高意向", "新客户"]
}`}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      {/* 接口文档对话框 */}
      <Dialog open={showDocDialog} onOpenChange={setShowDocDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>接口文档</DialogTitle>
            <DialogDescription>查看详细的接口文档与集成指南</DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <h3 className="font-medium">接口说明</h3>
              <p className="text-sm text-gray-600">
                本接口用于向{channelName}获客计划添加新的客户信息。通过HTTP POST请求发送客户数据。
              </p>
            </div>

            <div className="space-y-2">
              <h3 className="font-medium">请求格式</h3>
              <pre className="text-xs bg-gray-50 p-3 rounded border overflow-x-auto">
                POST {apiUrl}
                <br />
                Content-Type: application/json
                <br />
                Authorization: Bearer {apiKey}
                <br />
                <br />
                {`{
  "name": "客户姓名",
  "phone": "13800138000",
  "source": "广告投放",
  "remark": "有意向购买",
  "tags": ["高意向", "新客户"]
}`}
              </pre>
            </div>

            <div className="space-y-2">
              <h3 className="font-medium">响应格式</h3>
              <pre className="text-xs bg-gray-50 p-3 rounded border overflow-x-auto">
                {`{
  "success": true,
  "message": "客户添加成功",
  "data": {
    "id": "cust_123456",
    "name": "客户姓名",
    "phone": "13800138000",
    "created_at": "2024-03-21T09:15:22Z"
  }
}`}
              </pre>
            </div>
          </div>

          <DialogFooter>
            <Button onClick={() => setShowDocDialog(false)}>关闭</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 快速测试对话框 */}
      <Dialog open={showTestDialog} onOpenChange={setShowTestDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>快速测试</DialogTitle>
            <DialogDescription>使用以下URL快速测试接口是否正常工作</DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <h3 className="font-medium">测试URL</h3>
              <pre className="text-xs bg-gray-50 p-3 rounded border overflow-x-auto whitespace-pre-wrap break-all">
                {testUrl}
              </pre>
              <p className="text-xs text-gray-500 mt-2">将上面的URL复制到浏览器中打开，测试接口是否返回成功响应。</p>
            </div>

            <Button
              className="w-full"
              onClick={() => {
                navigator.clipboard.writeText(testUrl)
                toast({
                  title: "已复制",
                  description: "测试URL已复制到剪贴板",
                })
              }}
            >
              <Copy className="h-4 w-4 mr-2" />
              复制测试链接
            </Button>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowTestDialog(false)}>
              关闭
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}