"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Filter, Download, Users, UserPlus, UserCheck, UserX } from "lucide-react"
import { UserProfileOverview } from "@/components/user-profile/user-profile-overview"
import { UserProfileSegments } from "@/components/user-profile/user-profile-segments"
import { UserProfileTags } from "@/components/user-profile/user-profile-tags"
import { UserProfileAnalytics } from "@/components/user-profile/user-profile-analytics"

export default function UserProfilePage() {
  const [activeTab, setActiveTab] = useState("overview")
  const [searchQuery, setSearchQuery] = useState("")

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">用户画像分析</h1>
        <div className="flex space-x-2">
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
          <Button>
            <UserPlus className="mr-2 h-4 w-4" />
            创建画像模型
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">总用户数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <Users className="h-5 w-5 text-muted-foreground mr-2" />
              <div className="text-2xl font-bold">24,521</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">较上月增长 8%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserCheck className="h-5 w-5 text-green-500 mr-2" />
              <div className="text-2xl font-bold">16,842</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">活跃率 68.7%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">新增用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserPlus className="h-5 w-5 text-blue-500 mr-2" />
              <div className="text-2xl font-bold">1,254</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">较上月增长 12%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">流失用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserX className="h-5 w-5 text-red-500 mr-2" />
              <div className="text-2xl font-bold">342</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">流失率 1.4%</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>用户画像分析中心</CardTitle>
          <CardDescription>多维度分析用户特征，构建精准用户画像，支持营销决策</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
            <div className="flex justify-between items-center">
              <TabsList>
                <TabsTrigger value="overview">画像概览</TabsTrigger>
                <TabsTrigger value="segments">用户分群</TabsTrigger>
                <TabsTrigger value="tags">标签体系</TabsTrigger>
                <TabsTrigger value="analytics">深度分析</TabsTrigger>
              </TabsList>
              <div className="flex space-x-2">
                <div className="relative w-64">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="搜索用户画像..."
                    className="pl-8"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>

            <TabsContent value="overview" className="space-y-4">
              <UserProfileOverview />
            </TabsContent>

            <TabsContent value="segments" className="space-y-4">
              <UserProfileSegments />
            </TabsContent>

            <TabsContent value="tags" className="space-y-4">
              <UserProfileTags />
            </TabsContent>

            <TabsContent value="analytics" className="space-y-4">
              <UserProfileAnalytics />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}