"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, Fingerprint, Layers, Tag } from "lucide-react"

export default function UserProfilingPage() {
  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">用户画像</h1>
          <p className="text-gray-500 mt-1">全维度用户特征与群体细分</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-gray-900">
              <Users className="w-5 h-5 text-blue-600" />
              年龄与性别分布
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-xl border border-dashed border-gray-200 text-gray-400">
              人口属性统计图
            </div>
          </CardContent>
        </Card>

        <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-gray-900">
              <Fingerprint className="w-5 h-5 text-purple-600" />
              行为特征雷达图
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-xl border border-dashed border-gray-200 text-gray-400">
              用户行为偏好雷达
            </div>
          </CardContent>
        </Card>

        <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-gray-900">
              <Layers className="w-5 h-5 text-green-600" />
              群体细分
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-xl border border-dashed border-gray-200 text-gray-400">
              用户聚类分析结果
            </div>
          </CardContent>
        </Card>

        <Card className="bg-white/60 backdrop-blur-md border-gray-200 shadow-sm">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-gray-900">
              <Tag className="w-5 h-5 text-orange-500" />
              兴趣标签热度
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-xl border border-dashed border-gray-200 text-gray-400">
              标签云展示
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}