"use client"

import { useState } from "react"
import type { UserRFMData, UserSegment, UserFilterOptions } from "@/types/data-analysis"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Search, Filter, RefreshCw, UserPlus, Download } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface UserSelectorProps {
  users: UserRFMData[]
  selectedUsers: string[]
  onSelectUser: (userId: string) => void
  onSelectAll: (selected: boolean) => void
  onFilterChange: (options: UserFilterOptions) => void
  filterOptions: UserFilterOptions
}

export function UserSelector({
  users,
  selectedUsers,
  onSelectUser,
  onSelectAll,
  onFilterChange,
  filterOptions,
}: UserSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)

  // 本地过滤用户（搜索功能）
  const filteredUsers = users.filter(
    (user) =>
      user.userName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.phone.includes(searchQuery) ||
      user.segment.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  // 处理分群选择
  const handleSegmentChange = (segment: UserSegment, checked: boolean) => {
    let newSegments = [...filterOptions.segments]
    if (checked) {
      newSegments.push(segment)
    } else {
      newSegments = newSegments.filter((s) => s !== segment)
    }
    onFilterChange({ ...filterOptions, segments: newSegments })
  }

  // 处理日期范围变更
  const handleDateRangeChange = (field: "start" | "end", value: string) => {
    onFilterChange({
      ...filterOptions,
      dateRange: {
        ...filterOptions.dateRange,
        [field]: value,
      },
    })
  }

  // 处理价值范围变更
  const handleValueRangeChange = (field: "min" | "max", value: string) => {
    onFilterChange({
      ...filterOptions,
      valueRange: {
        ...filterOptions.valueRange,
        [field]: Number.parseInt(value) || 0,
      },
    })
  }

  // 获取用户分群的颜色
  const getSegmentColor = (segment: string) => {
    if (segment.includes("高价值")) return "bg-green-100 text-green-800"
    if (segment.includes("中价值")) return "bg-blue-100 text-blue-800"
    if (segment.includes("低价值")) return "bg-gray-100 text-gray-800"
    return "bg-purple-100 text-purple-800" // 新用户
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>用户选择</CardTitle>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm" onClick={() => setShowFilters(!showFilters)}>
              <Filter className="h-4 w-4 mr-2" />
              筛选
            </Button>
            <Button variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              刷新
            </Button>
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              导出
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {/* 搜索栏 */}
        <div className="mb-4 relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            type="text"
            placeholder="搜索用户名、手机号、分群..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        {/* 筛选面板 */}
        {showFilters && (
          <div className="mb-6 p-4 border rounded-md bg-gray-50">
            <h3 className="text-sm font-medium mb-3">高级筛选</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* 分群筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">用户分群</h4>
                <div className="space-y-2">
                  {[
                    "高价值活跃用户",
                    "高价值流失风险用户",
                    "高价值沉睡用户",
                    "中价值活跃用户",
                    "中价值流失风险用户",
                    "中价值沉睡用户",
                    "低价值活跃用户",
                    "低价值流失风险用户",
                    "低价值沉睡用户",
                    "新用户",
                  ].map((segment) => (
                    <div key={segment} className="flex items-center space-x-2">
                      <Checkbox
                        id={`segment-${segment}`}
                        checked={filterOptions.segments.includes(segment as UserSegment)}
                        onCheckedChange={(checked) => handleSegmentChange(segment as UserSegment, checked as boolean)}
                      />
                      <Label htmlFor={`segment-${segment}`} className="text-xs">
                        {segment}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

              {/* 日期范围筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">最后购买日期</h4>
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="date-start" className="text-xs">
                        开始日期
                      </Label>
                      <Input
                        id="date-start"
                        type="date"
                        value={filterOptions.dateRange.start}
                        onChange={(e) => handleDateRangeChange("start", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="date-end" className="text-xs">
                        结束日期
                      </Label>
                      <Input
                        id="date-end"
                        type="date"
                        value={filterOptions.dateRange.end}
                        onChange={(e) => handleDateRangeChange("end", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* 价值范围筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">用户估值范围</h4>
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="value-min" className="text-xs">
                        最小值
                      </Label>
                      <Input
                        id="value-min"
                        type="number"
                        value={filterOptions.valueRange.min}
                        onChange={(e) => handleValueRangeChange("min", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="value-max" className="text-xs">
                        最大值
                      </Label>
                      <Input
                        id="value-max"
                        type="number"
                        value={filterOptions.valueRange.max}
                        onChange={(e) => handleValueRangeChange("max", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex justify-end mt-4">
              <Button
                variant="outline"
                size="sm"
                className="mr-2"
                onClick={() =>
                  onFilterChange({
                    segments: [],
                    dateRange: { start: "", end: "" },
                    valueRange: { min: 0, max: 0 },
                    sources: [],
                  })
                }
              >
                重置
              </Button>
              <Button size="sm">应用筛选</Button>
            </div>
          </div>
        )}

        {/* 用户表格 */}
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox
                    checked={selectedUsers.length === filteredUsers.length && filteredUsers.length > 0}
                    onCheckedChange={(checked) => onSelectAll(!!checked)}
                  />
                </TableHead>
                <TableHead>用户名</TableHead>
                <TableHead>手机号</TableHead>
                <TableHead>最后购买</TableHead>
                <TableHead>购买频率</TableHead>
                <TableHead>消费总额</TableHead>
                <TableHead>RFM得分</TableHead>
                <TableHead>用户分群</TableHead>
                <TableHead>估值</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={9} className="text-center py-4">
                    没有找到匹配的用户
                  </TableCell>
                </TableRow>
              ) : (
                filteredUsers.map((user) => (
                  <TableRow key={user.userId} className="cursor-pointer hover:bg-gray-50">
                    <TableCell>
                      <Checkbox
                        checked={selectedUsers.includes(user.userId)}
                        onCheckedChange={() => onSelectUser(user.userId)}
                      />
                    </TableCell>
                    <TableCell className="font-medium">{user.userName}</TableCell>
                    <TableCell>{user.phone}</TableCell>
                    <TableCell>{user.lastPurchaseDate}</TableCell>
                    <TableCell>{user.purchaseFrequency}次</TableCell>
                    <TableCell>¥{user.totalSpent.toLocaleString()}</TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-1">
                        <Badge variant="outline" className="bg-red-50 text-red-700">
                          R{user.rfmScore.recency}
                        </Badge>
                        <Badge variant="outline" className="bg-green-50 text-green-700">
                          F{user.rfmScore.frequency}
                        </Badge>
                        <Badge variant="outline" className="bg-blue-50 text-blue-700">
                          M{user.rfmScore.monetary}
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge className={getSegmentColor(user.segment)}>{user.segment}</Badge>
                    </TableCell>
                    <TableCell className="font-medium">¥{user.valueEstimation.toLocaleString()}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        {/* 选择统计 */}
        <div className="mt-4 flex justify-between items-center">
          <div className="text-sm text-gray-500">
            已选择 <span className="font-medium">{selectedUsers.length}</span> 个用户， 总估值{" "}
            <span className="font-medium">
              ¥
              {users
                .filter((user) => selectedUsers.includes(user.userId))
                .reduce((sum, user) => sum + user.valueEstimation, 0)
                .toLocaleString()}
            </span>
          </div>
          <Button size="sm">
            <UserPlus className="h-4 w-4 mr-2" />
            添加到分析
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}