"use client"

import { useState } from "react"
import { ChevronLeft, MoreVertical, Copy, Pencil, Trash2, Phone, Mic, Clock, Settings } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { useRouter } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"

interface Task {
  id: string
  name: string
  status: "running" | "paused" | "completed"
  stats: {
    calls: number
    acquired: number
    added: number
  }
  lastUpdated: string
  trend: { date: string; calls: number }[]
}

interface CallRecord {
  id: string
  phoneNumber: string
  duration: string
  time: string
  status: "已添加" | "未添加" | "处理中"
  question: string
}

export default function PhoneAcquisitionPage() {
  const router = useRouter()

  const [tasks, setTasks] = useState<Task[]>([
    {
      id: "1",
      name: "招商电话获客",
      status: "running",
      stats: {
        calls: 42,
        acquired: 38,
        added: 31,
      },
      lastUpdated: "2024-03-18 15:30",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `3月${String(i + 12)}日`,
        calls: Math.floor(Math.random() * 10) + 5,
      })),
    },
  ])

  const [callRecords, setCallRecords] = useState<CallRecord[]>([
    {
      id: "call-1",
      phoneNumber: "138****1234",
      duration: "3分42秒",
      time: "2024-03-18 15:30",
      status: "已添加",
      question: "请问贵公司的产品有什么特点？",
    },
    {
      id: "call-2",
      phoneNumber: "139****5678",
      duration: "5分18秒",
      time: "2024-03-18 14:15",
      status: "已添加",
      question: "你们的合作方式是怎样的？",
    },
    {
      id: "call-3",
      phoneNumber: "137****9012",
      duration: "2分55秒",
      time: "2024-03-18 11:22",
      status: "已添加",
      question: "能详细介绍一下你们的服务吗？",
    },
    {
      id: "call-4",
      phoneNumber: "135****3456",
      duration: "4分10秒",
      time: "2024-03-17 16:45",
      status: "已添加",
      question: "你们有什么优惠政策？",
    },
    {
      id: "call-5",
      phoneNumber: "136****7890",
      duration: "1分30秒",
      time: "2024-03-17 10:20",
      status: "未添加",
      question: "未识别到有效问题",
    },
  ])

  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [autoAddEnabled, setAutoAddEnabled] = useState(true)
  const [speechToTextEnabled, setSpeechToTextEnabled] = useState(true)
  const [questionExtractionEnabled, setQuestionExtractionEnabled] = useState(true)
  const [isCallDetailOpen, setIsCallDetailOpen] = useState(false)
  const [selectedCall, setSelectedCall] = useState<CallRecord | null>(null)

  const toggleTaskStatus = (taskId: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === taskId) {
          const newStatus = task.status === "running" ? "paused" : "running"
          return { ...task, status: newStatus }
        }
        return task
      }),
    )
  }

  const handleEditPlan = (taskId: string) => {
    router.push(`/scenarios/phone/edit/${taskId}`)
  }

  const handleCopyPlan = (taskId: string) => {
    const taskToCopy = tasks.find((task) => task.id === taskId)
    if (taskToCopy) {
      const newTask = {
        ...taskToCopy,
        id: `${Date.now()}`,
        name: `${taskToCopy.name} (副本)`,
        status: "paused" as const,
      }
      setTasks([...tasks, newTask])
      toast({
        title: "计划已复制",
        description: `已成功复制"${taskToCopy.name}"`,
      })
    }
  }

  const handleDeletePlan = (taskId: string) => {
    const taskToDelete = tasks.find((t) => t.id === taskId)
    if (taskToDelete) {
      setTasks(tasks.filter((t) => t.id !== taskId))
      toast({
        title: "计划已删除",
        description: `已成功删除"${taskToDelete.name}"`,
      })
    }
  }

  const handleViewCallDetail = (call: CallRecord) => {
    setSelectedCall(call)
    setIsCallDetailOpen(true)
  }

  // 计算通过率
  const calculatePassRate = (acquired: number, added: number) => {
    if (acquired === 0) return 0
    return Math.round((added / acquired) * 100)
  }

  return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex items-center p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-xl font-semibold text-blue-600">电话获客</h1>
          </div>
          <Button variant="ghost" size="icon" className="ml-auto" onClick={() => setIsSettingsOpen(true)}>
            <Settings className="h-5 w-5" />
          </Button>
        </div>
      </header>

      <div className="p-4 max-w-7xl mx-auto">
        {tasks.map((task) => {
          const { calls: callCount, acquired: acquiredCount, added: addedCount } = task.stats
          const passRate = calculatePassRate(acquiredCount, addedCount)

          return (
            <Card key={task.id} className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80 backdrop-blur-sm">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center space-x-3">
                  <h3 className="font-medium text-lg">{task.name}</h3>
                  <Badge
                    variant={task.status === "running" ? "success" : "secondary"}
                    className="cursor-pointer hover:opacity-80"
                    onClick={() => toggleTaskStatus(task.id)}
                  >
                    {task.status === "running" ? "进行中" : "已暂停"}
                  </Badge>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full z-10">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48 z-50">
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleEditPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Pencil className="w-4 h-4 mr-2" />
                      编辑计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleCopyPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Copy className="w-4 h-4 mr-2" />
                      复制计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleDeletePlan(task.id)
                      }}
                      className="text-red-600 cursor-pointer hover:bg-red-50"
                    >
                      <Trash2 className="w-4 h-4 mr-2" />
                      删除计划
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

              <div className="grid grid-cols-4 gap-2 mb-4">
                <Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">来电数</div>
                  <div className="text-2xl font-semibold">{callCount}</div>
                </Card>

                <Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">已获客</div>
                  <div className="text-2xl font-semibold">{acquiredCount}</div>
                </Card>

                <Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">已添加</div>
                  <div className="text-2xl font-semibold">{addedCount}</div>
                </Card>

                <Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">通过率</div>
                  <div className="text-2xl font-semibold">{passRate}%</div>
                </Card>
              </div>

              <div className="h-48 bg-white rounded-lg p-4 mb-4">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={task.trend}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                    <XAxis dataKey="date" stroke="#666" />
                    <YAxis stroke="#666" />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "white",
                        border: "1px solid #e5e7eb",
                        borderRadius: "6px",
                      }}
                    />
                    <Line
                      type="monotone"
                      dataKey="calls"
                      name="来电数"
                      stroke="#3b82f6"
                      strokeWidth={2}
                      dot={{ fill: "#3b82f6" }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </div>

              <div className="mt-6">
                <Tabs defaultValue="all" className="w-full">
                  <TabsList className="w-full mb-4">
                    <TabsTrigger value="all" className="flex-1">
                      全部来电
                    </TabsTrigger>
                    <TabsTrigger value="added" className="flex-1">
                      已添加
                    </TabsTrigger>
                    <TabsTrigger value="pending" className="flex-1">
                      未添加
                    </TabsTrigger>
                  </TabsList>

                  <TabsContent value="all">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords.map((record) => (
                            <TableRow
                              key={record.id}
                              className="cursor-pointer hover:bg-gray-50"
                              onClick={() => handleViewCallDetail(record)}
                            >
                              <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                              <TableCell>{record.duration}</TableCell>
                              <TableCell>{record.time}</TableCell>
                              <TableCell>
                                <Badge
                                  variant={
                                    record.status === "已添加"
                                      ? "success"
                                      : record.status === "处理中"
                                        ? "outline"
                                        : "secondary"
                                  }
                                >
                                  {record.status}
                                </Badge>
                              </TableCell>
                              <TableCell className="max-w-[200px] truncate">
                                {record.question || "未识别到问题"}
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>

                  <TabsContent value="added">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords
                            .filter((record) => record.status === "已添加")
                            .map((record) => (
                              <TableRow
                                key={record.id}
                                className="cursor-pointer hover:bg-gray-50"
                                onClick={() => handleViewCallDetail(record)}
                              >
                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                                <TableCell>{record.duration}</TableCell>
                                <TableCell>{record.time}</TableCell>
                                <TableCell>
                                  <Badge variant="success">{record.status}</Badge>
                                </TableCell>
                                <TableCell className="max-w-[200px] truncate">
                                  {record.question || "未识别到问题"}
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>

                  <TabsContent value="pending">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords
                            .filter((record) => record.status !== "已添加")
                            .map((record) => (
                              <TableRow
                                key={record.id}
                                className="cursor-pointer hover:bg-gray-50"
                                onClick={() => handleViewCallDetail(record)}
                              >
                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                                <TableCell>{record.duration}</TableCell>
                                <TableCell>{record.time}</TableCell>
                                <TableCell>
                                  <Badge variant={record.status === "处理中" ? "outline" : "secondary"}>
                                    {record.status}
                                  </Badge>
                                </TableCell>
                                <TableCell className="max-w-[200px] truncate">
                                  {record.question || "未识别到问题"}
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            </Card>
          )
        })}
      </div>

      {/* 设置对话框 */}
      <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>电话获客设置</DialogTitle>
          </DialogHeader>
          <div className="py-4 space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="auto-add">自动添加客户</Label>
                <p className="text-sm text-gray-500">来电后自动将客户添加为微信好友</p>
              </div>
              <Switch id="auto-add" checked={autoAddEnabled} onCheckedChange={setAutoAddEnabled} />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="speech-to-text">语音转文字</Label>
                <p className="text-sm text-gray-500">自动将通话内容转换为文字记录</p>
              </div>
              <Switch id="speech-to-text" checked={speechToTextEnabled} onCheckedChange={setSpeechToTextEnabled} />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="question-extraction">问题提取</Label>
                <p className="text-sm text-gray-500">自动从通话中提取客户的首句问题</p>
              </div>
              <Switch
                id="question-extraction"
                checked={questionExtractionEnabled}
                onCheckedChange={setQuestionExtractionEnabled}
              />
            </div>
          </div>
          <DialogFooter>
            <Button onClick={() => setIsSettingsOpen(false)}>保存设置</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 通话详情对话框 */}
      <Dialog open={isCallDetailOpen} onOpenChange={setIsCallDetailOpen}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>通话详情</DialogTitle>
          </DialogHeader>
          {selectedCall && (
            <div className="py-4 space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Phone className="h-5 w-5 text-blue-500" />
                  <span className="font-medium">{selectedCall.phoneNumber}</span>
                </div>
                <Badge
                  variant={
                    selectedCall.status === "已添加"
                      ? "success"
                      : selectedCall.status === "处理中"
                        ? "outline"
                        : "secondary"
                  }
                >
                  {selectedCall.status}
                </Badge>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <p className="text-sm text-gray-500">通话时长</p>
                  <p className="font-medium flex items-center">
                    <Clock className="h-4 w-4 mr-1 text-gray-400" />
                    {selectedCall.duration}
                  </p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm text-gray-500">来电时间</p>
                  <p className="font-medium">{selectedCall.time}</p>
                </div>
              </div>

              <div className="space-y-2">
                <p className="text-sm text-gray-500">首句问题</p>
                <div className="p-3 bg-gray-50 rounded-lg">
                  <p className="font-medium">{selectedCall.question || "未识别到问题"}</p>
                </div>
              </div>

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <p className="text-sm text-gray-500">通话记录</p>
                  <Badge variant="outline" className="flex items-center">
                    <Mic className="h-3 w-3 mr-1" />
                    AI转写
                  </Badge>
                </div>
                <div className="p-3 bg-gray-50 rounded-lg max-h-[200px] overflow-y-auto">
                  <p className="text-sm">
                    <span className="font-medium text-blue-600">客服：</span>{" "}
                    您好，这里是XX公司客服，请问有什么可以帮到您？
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-green-600">客户：</span> {selectedCall.question || "..."}
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-blue-600">客服：</span>{" "}
                    好的，关于这个问题，我们的产品确实有这方面的优势...
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-green-600">客户：</span> 那你们的价格是怎么样的？
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-blue-600">客服：</span> 我们有多种套餐可以选择，基础版每月只需...
                  </p>
                </div>
              </div>

              {selectedCall.status !== "已添加" && (
                <Button
                  className="w-full"
                  onClick={() => {
                    setCallRecords(
                      callRecords.map((record) =>
                        record.id === selectedCall.id ? { ...record, status: "已添加" } : record,
                      ),
                    )
                    toast({
                      title: "添加成功",
                      description: `已成功将 ${selectedCall.phoneNumber} 添加为好友`,
                    })
                    setIsCallDetailOpen(false)
                  }}
                >
                  手动添加为好友
                </Button>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}