import { useQuery } from '@tanstack/react-query'
import {
  Award,
  Briefcase,
  CheckCircle2,
  FileText,
  GraduationCap,
  MapPin,
  Shield,
  Star,
  Tag,
  User,
  Wrench,
  XCircle,
} from 'lucide-react'
import { fetchUserDetail, fetchUserInfo, fetchUserServices } from '@/api/modules/users'
import { fetchExcProvider } from '@/api/modules/exc'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

interface UserDetailSheetProps {
  uid: string | null
  onClose: () => void
  onAssignRoles?: () => void
}

export function UserDetailSheet({ uid, onClose, onAssignRoles }: UserDetailSheetProps) {
  // 1. Basic user account query (GET /api/admin/v1/users/{uid})
  const userQuery = useQuery({
    queryKey: ['users', uid],
    queryFn: () => (uid ? fetchUserDetail(uid) : null),
    enabled: uid !== null,
  })

  // 2. Full user profile, careers, educations, honors, addresses (GET /api/admin/v1/users/{uid}/info)
  const userInfoQuery = useQuery({
    queryKey: ['user-info', uid],
    queryFn: async () => {
      if (!uid) return null
      try {
        const res = await fetchUserInfo(uid)
        return res.data
      } catch {
        return null
      }
    },
    enabled: uid !== null,
  })

  // 3. User provided services (GET /api/admin/v1/users/{uid}/services)
  const userServicesQuery = useQuery({
    queryKey: ['user-services', uid],
    queryFn: async () => {
      if (!uid) return null
      try {
        const res = await fetchUserServices(uid)
        return res.data
      } catch {
        return null
      }
    },
    enabled: uid !== null,
  })

  // 4. Provider profile query (GET /api/admin/v1/exc/providers/{uid})
  const providerQuery = useQuery({
    queryKey: ['exc-provider', uid],
    queryFn: async () => {
      if (!uid) return null
      try {
        const res = await fetchExcProvider(uid)
        return res.data
      } catch {
        return null
      }
    },
    enabled: uid !== null,
    retry: false,
  })

  const user = userQuery.data?.data
  const userInfo = userInfoQuery.data
  const userServices = userServicesQuery.data?.expertises ?? []
  const provider = providerQuery.data

  return (
    <Sheet open={uid !== null} onOpenChange={(open) => !open && onClose()}>
      <SheetContent className="sm:max-w-xl p-6 overflow-y-auto flex flex-col">
        <SheetHeader className="border-b pb-4">
          <div className="flex items-center gap-3">
            <Avatar className="size-12">
              <AvatarImage src={user?.avatar ?? undefined} alt="" />
              <AvatarFallback className="text-base font-semibold">
                {(user?.display_name ?? user?.username ?? 'U').slice(0, 1).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <SheetTitle className="truncate text-base font-semibold flex items-center gap-2">
                <span>{userInfo?.profile?.computed_fullname ?? user?.display_name ?? user?.username ?? '用户详情'}</span>
                {userInfo?.profile?.gender && (
                  <Badge variant="outline" className="text-[10px]">
                    {userInfo.profile.gender}
                  </Badge>
                )}
              </SheetTitle>
              <SheetDescription className="truncate text-xs font-mono">
                {user?.uid}
              </SheetDescription>
            </div>
          </div>
        </SheetHeader>

        {userQuery.isPending ? (
          <div className="py-8 text-center text-sm text-muted-foreground">加载中…</div>
        ) : !user ? (
          <div className="py-8 text-center text-sm text-muted-foreground">未找到用户信息</div>
        ) : (
          <Tabs defaultValue="account" className="mt-2 flex-1 flex flex-col">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="account" className="gap-1.5 text-xs">
                <User className="size-3.5" />
                账号基础
              </TabsTrigger>
              <TabsTrigger value="info" className="gap-1.5 text-xs">
                <FileText className="size-3.5" />
                个人资料
              </TabsTrigger>
              <TabsTrigger value="services" className="gap-1.5 text-xs">
                <Wrench className="size-3.5" />
                服务事项 ({userServices.length})
              </TabsTrigger>
            </TabsList>

            {/* TAB 1: ACCOUNT BASIC */}
            <TabsContent value="account" className="flex flex-col gap-6 py-4 outline-none">
              {/* Status overview */}
              <div className="flex flex-wrap gap-2">
                <Badge variant={user.status ? 'default' : 'destructive'}>
                  {user.status ? '正常启用' : '已禁用'}
                </Badge>
                {user.is_robot ? (
                  <Badge variant="secondary">机器人账号</Badge>
                ) : (
                  <Badge variant="outline">真人账号</Badge>
                )}
                {user.sid_display && (
                  <Badge variant="outline" className="font-mono">
                    SID: {user.sid_display}
                  </Badge>
                )}
              </div>

              {/* Account Basic Info */}
              <div className="grid gap-3">
                <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  账号基础属性
                </h4>
                <div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
                  <div>
                    <div className="text-xs text-muted-foreground">用户名</div>
                    <div className="font-medium">{user.username ?? '—'}</div>
                  </div>
                  <div>
                    <div className="text-xs text-muted-foreground">显示名称</div>
                    <div className="font-medium">{user.display_name ?? '—'}</div>
                  </div>
                  <div>
                    <div className="text-xs text-muted-foreground">SID</div>
                    <div className="font-mono text-xs">{user.sid ?? '—'}</div>
                  </div>
                  <div>
                    <div className="text-xs text-muted-foreground">专业领域</div>
                    <div className="font-medium">{user.expertise ?? '—'}</div>
                  </div>
                </div>
              </div>

              {/* Contact & Verification */}
              <div className="grid gap-3">
                <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  联系方式与验证
                </h4>
                <div className="grid gap-2 rounded-lg border p-3 text-sm">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="text-xs text-muted-foreground">邮箱</div>
                      <div className="font-medium">{user.email ?? '—'}</div>
                    </div>
                    {user.email && (
                      <Badge variant={user.email_verified_at ? 'secondary' : 'outline'} className="gap-1">
                        {user.email_verified_at ? (
                          <>
                            <CheckCircle2 className="size-3 text-emerald-500" />
                            已验证
                          </>
                        ) : (
                          <>
                            <XCircle className="size-3 text-amber-500" />
                            未验证
                          </>
                        )}
                      </Badge>
                    )}
                  </div>
                  <div className="flex items-center justify-between border-t pt-2">
                    <div>
                      <div className="text-xs text-muted-foreground">手机号</div>
                      <div className="font-medium">{user.phone ?? '—'}</div>
                    </div>
                    {user.phone && (
                      <Badge variant={user.phone_verified_at ? 'secondary' : 'outline'} className="gap-1">
                        {user.phone_verified_at ? (
                          <>
                            <CheckCircle2 className="size-3 text-emerald-500" />
                            已验证
                          </>
                        ) : (
                          <>
                            <XCircle className="size-3 text-amber-500" />
                            未验证
                          </>
                        )}
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

              {/* Roles */}
              <div className="grid gap-3">
                <div className="flex items-center justify-between">
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    已分配角色
                  </h4>
                  {onAssignRoles && (
                    <Button variant="ghost" size="sm" onClick={onAssignRoles} className="h-6 text-xs gap-1">
                      <Shield className="size-3" />
                      分配角色
                    </Button>
                  )}
                </div>
                <div className="flex flex-wrap gap-1.5 rounded-lg border p-3">
                  {user.roles && user.roles.length > 0 ? (
                    user.roles.map((role) => (
                      <Badge key={role} variant="secondary">
                        {role}
                      </Badge>
                    ))
                  ) : (
                    <span className="text-xs text-muted-foreground">未分配任何角色</span>
                  )}
                </div>
              </div>

              {/* Timestamps */}
              <div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-xs text-muted-foreground">
                <div>
                  <span>注册时间：</span>
                  <span>{new Date(user.created_at).toLocaleString('zh-CN')}</span>
                </div>
                {user.updated_at && (
                  <div>
                    <span>更新时间：</span>
                    <span>{new Date(user.updated_at).toLocaleString('zh-CN')}</span>
                  </div>
                )}
              </div>
            </TabsContent>

            {/* TAB 2: DETAILED INFO */}
            <TabsContent value="info" className="flex flex-col gap-6 py-4 outline-none">
              {userInfoQuery.isPending ? (
                <div className="py-8 text-center text-sm text-muted-foreground">加载个人资料中…</div>
              ) : (
                <>
                  {/* Profile Headline & Bio */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                      个人名片与简介
                    </h4>
                    <div className="rounded-lg border bg-muted/30 p-3 text-xs space-y-1.5">
                      <div className="flex items-center justify-between">
                        <span className="font-semibold text-sm text-foreground">
                          {userInfo?.profile?.computed_fullname ?? user.display_name ?? '—'}
                        </span>
                        {userInfo?.profile?.gender && (
                          <Badge variant="outline">{userInfo.profile.gender}</Badge>
                        )}
                      </div>
                      {userInfo?.profile?.headline && (
                        <div className="font-medium text-foreground">{userInfo.profile.headline}</div>
                      )}
                      {userInfo?.profile?.bio ? (
                        <div className="text-muted-foreground leading-relaxed">{userInfo.profile.bio}</div>
                      ) : (
                        <div className="text-muted-foreground italic">暂无个人简介</div>
                      )}
                    </div>
                  </div>

                  {/* Region & Timezone */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                      地区与语言偏好
                    </h4>
                    <div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
                      <div>
                        <div className="text-xs text-muted-foreground">国家/地区</div>
                        <div className="font-medium">{user.country_code ?? '—'}</div>
                      </div>
                      <div>
                        <div className="text-xs text-muted-foreground">城市</div>
                        <div className="font-medium">{user.city ?? '—'}</div>
                      </div>
                      <div>
                        <div className="text-xs text-muted-foreground">时区</div>
                        <div className="font-medium">{user.timezone ?? '—'}</div>
                      </div>
                      <div>
                        <div className="text-xs text-muted-foreground">语言偏好</div>
                        <div className="font-medium">{user.locale ?? '—'}</div>
                      </div>
                    </div>
                  </div>

                  {/* Careers / Work Experience */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
                      <Briefcase className="size-3.5" />
                      工作经历 ({(userInfo?.careers ?? []).length})
                    </h4>
                    {userInfo?.careers && userInfo.careers.length > 0 ? (
                      <div className="space-y-2 rounded-lg border p-3 text-xs">
                        {userInfo.careers.map((career, idx) => (
                          <div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
                            <div className="flex items-center justify-between font-medium text-sm">
                              <span>{career.company_name ?? '未知公司'}</span>
                              {career.is_current && <Badge variant="secondary" className="text-[10px]">在职</Badge>}
                            </div>
                            <div className="text-muted-foreground font-medium mt-0.5">
                              {career.position} {career.department ? `· ${career.department}` : ''}
                            </div>
                            {(career.start_date || career.end_date) && (
                              <div className="text-[11px] text-muted-foreground mt-0.5">
                                {career.start_date ?? '—'} ~ {career.is_current ? '至今' : career.end_date ?? '—'}
                              </div>
                            )}
                            {career.description && (
                              <div className="text-muted-foreground mt-1 text-[11px] leading-relaxed">
                                {career.description}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
                        暂无工作经历记录
                      </div>
                    )}
                  </div>

                  {/* Education */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
                      <GraduationCap className="size-3.5" />
                      教育经历 ({(userInfo?.educations ?? []).length})
                    </h4>
                    {userInfo?.educations && userInfo.educations.length > 0 ? (
                      <div className="space-y-2 rounded-lg border p-3 text-xs">
                        {userInfo.educations.map((edu, idx) => (
                          <div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
                            <div className="flex items-center justify-between font-medium text-sm">
                              <span>{edu.school_name ?? '学校'}</span>
                              {edu.degree && <Badge variant="outline" className="text-[10px]">{edu.degree}</Badge>}
                            </div>
                            {edu.major && <div className="text-muted-foreground mt-0.5">{edu.major}</div>}
                            {(edu.start_date || edu.end_date) && (
                              <div className="text-[11px] text-muted-foreground mt-0.5">
                                {edu.start_date ?? '—'} ~ {edu.is_current ? '至今' : edu.end_date ?? '—'}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
                        暂无教育经历记录
                      </div>
                    )}
                  </div>

                  {/* Honors */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
                      <Award className="size-3.5" />
                      荣誉与奖项 ({(userInfo?.honors ?? []).length})
                    </h4>
                    {userInfo?.honors && userInfo.honors.length > 0 ? (
                      <div className="space-y-2 rounded-lg border p-3 text-xs">
                        {userInfo.honors.map((honor, idx) => (
                          <div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
                            <div className="flex items-center justify-between font-medium">
                              <span>{honor.title ?? '荣誉奖项'}</span>
                              {honor.date && <span className="text-[11px] text-muted-foreground">{honor.date}</span>}
                            </div>
                            {honor.issuer && <div className="text-muted-foreground text-[11px] mt-0.5">颁发单位：{honor.issuer}</div>}
                            {honor.description && <div className="text-muted-foreground text-[11px] mt-0.5">{honor.description}</div>}
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
                        暂无荣誉与奖项记录
                      </div>
                    )}
                  </div>

                  {/* Addresses */}
                  <div className="grid gap-3">
                    <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
                      <MapPin className="size-3.5" />
                      常用服务地址 ({(userInfo?.addresses ?? []).length})
                    </h4>
                    {userInfo?.addresses && userInfo.addresses.length > 0 ? (
                      <div className="space-y-2 rounded-lg border p-3 text-xs">
                        {userInfo.addresses.map((addr, idx) => (
                          <div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0 space-y-0.5">
                            <div className="flex items-center justify-between font-medium">
                              <span>{addr.contact_name ?? '联系人'}</span>
                              {addr.contact_phone_number && (
                                <span className="font-mono text-muted-foreground">{addr.contact_phone_number}</span>
                              )}
                            </div>
                            <div className="text-muted-foreground text-[11px]">
                              {[addr.province, addr.city, addr.district, addr.address_line]
                                .filter(Boolean)
                                .join(' ')}
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
                        暂无保存的服务地址
                      </div>
                    )}
                  </div>
                </>
              )}
            </TabsContent>

            {/* TAB 3: SERVICES */}
            <TabsContent value="services" className="flex flex-col gap-6 py-4 outline-none">
              {userServicesQuery.isPending ? (
                <div className="py-8 text-center text-sm text-muted-foreground">加载服务事项中…</div>
              ) : userServices.length > 0 ? (
                <div className="grid gap-4">
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    专长项目与服务变体 ({userServices.length})
                  </h4>
                  {userServices.map((exp) => (
                    <div key={exp.id ?? exp.name} className="rounded-lg border p-3 shadow-xs space-y-3">
                      <div>
                        <div className="flex items-center justify-between">
                          <h5 className="font-semibold text-sm flex items-center gap-1.5">
                            <Wrench className="size-4 text-primary" />
                            {exp.name}
                          </h5>
                          {exp.tags && exp.tags.length > 0 && (
                            <div className="flex items-center gap-1">
                              {exp.tags.map((tag) => (
                                <Badge key={tag} variant="secondary" className="text-[10px] gap-0.5">
                                  <Tag className="size-2.5" />
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                          )}
                        </div>
                        {exp.description && (
                          <p className="text-xs text-muted-foreground mt-1">{exp.description}</p>
                        )}
                      </div>

                      {/* Service Variants */}
                      {exp.services && exp.services.length > 0 && (
                        <div className="space-y-2 border-t pt-2">
                          <div className="text-[11px] font-medium text-muted-foreground">包含的服务变体</div>
                          <div className="grid gap-2">
                            {exp.services.map((svc) => (
                              <div
                                key={svc.id ?? svc.service_type}
                                className="flex items-center justify-between rounded-md bg-muted/40 p-2.5 text-xs"
                              >
                                <div className="space-y-0.5">
                                  <div className="flex items-center gap-2 font-medium">
                                    <Badge variant="outline" className="text-[10px] uppercase">
                                      {svc.service_type === 'onsite'
                                        ? '上门服务'
                                        : svc.service_type === 'online'
                                          ? '在线服务'
                                          : svc.service_type === 'remote'
                                            ? '远程协助'
                                            : svc.service_type ?? '服务'}
                                    </Badge>
                                    <span>
                                      {svc.charge_type === 'time'
                                        ? '按时计费'
                                        : svc.charge_type === 'fixed'
                                          ? '固定价格'
                                          : svc.charge_type === 'quote'
                                            ? '按需报价'
                                            : svc.charge_type}
                                    </span>
                                  </div>
                                  {svc.duration && (
                                    <div className="text-[11px] text-muted-foreground">
                                      预估服务时长: {svc.duration} 分钟
                                    </div>
                                  )}
                                </div>
                                <div className="text-right">
                                  <div className="font-semibold text-sm text-foreground">
                                    {svc.price != null
                                      ? `${svc.currency_code ?? '¥'} ${(svc.price / 100).toFixed(2)}`
                                      : '按需报价'}
                                  </div>
                                  <Badge
                                    variant={svc.enabled ? 'secondary' : 'outline'}
                                    className="text-[10px] mt-0.5"
                                  >
                                    {svc.enabled ? '已上架' : '已下架'}
                                  </Badge>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              ) : provider ? (
                /* Fallback to provider overview if userServices is empty */
                <div className="grid gap-3">
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    专长服务商资格
                  </h4>
                  <div className="grid grid-cols-2 gap-3 rounded-lg border p-3 text-sm">
                    <div>
                      <div className="text-xs text-muted-foreground">在线状态</div>
                      <div className="mt-0.5 flex items-center gap-1.5 font-medium">
                        <span
                          className={`size-2 rounded-full ${
                            provider.status === 'online'
                              ? 'bg-emerald-500'
                              : provider.status === 'busy'
                                ? 'bg-amber-500'
                                : 'bg-muted-foreground'
                          }`}
                        />
                        <span>
                          {provider.status === 'online'
                            ? '在线'
                            : provider.status === 'busy'
                              ? '忙碌'
                              : provider.status === 'offline'
                                ? '离线'
                                : provider.status}
                        </span>
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground">实名认证</div>
                      <div className="mt-0.5">
                        <Badge variant={provider.is_verified ? 'secondary' : 'outline'}>
                          {provider.is_verified ? '已认证' : '未认证'}
                        </Badge>
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground">评分</div>
                      <div className="mt-0.5 flex items-center gap-1 font-medium">
                        <Star className="size-3.5 fill-amber-400 text-amber-400" />
                        <span>{provider.rating ? provider.rating.toFixed(1) : '暂无评分'}</span>
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground">已完结订单</div>
                      <div className="mt-0.5 font-medium">{provider.completed_jobs ?? 0} 单</div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
                  <Wrench className="mx-auto mb-2 size-8 text-muted-foreground/50" />
                  <p className="font-medium text-foreground">暂无服务事项</p>
                  <p className="mt-1 text-xs text-muted-foreground">
                    该用户尚未创建或发布任何专长项目与服务变体。
                  </p>
                </div>
              )}

              {/* Provider Profile Settings if available */}
              {provider && (
                <div className="grid gap-3 pt-2">
                  <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    专长服务商抢单与派单参数
                  </h4>
                  <div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
                    <div>
                      <div className="text-xs text-muted-foreground">自动抢单模式</div>
                      <div className="font-medium">
                        {provider.dispatch_setting?.auto_grab_enabled ? '已开启' : '已关闭'}
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-muted-foreground">今日接单量</div>
                      <div className="font-medium">
                        {provider.dispatch_setting?.accepted_today ?? 0} /{' '}
                        {provider.dispatch_setting?.daily_accept_cap ?? '无限制'}
                      </div>
                    </div>
                    {provider.dispatch_setting?.min_price != null && (
                      <div>
                        <div className="text-xs text-muted-foreground">最低接单起价</div>
                        <div className="font-medium">¥{provider.dispatch_setting.min_price}</div>
                      </div>
                    )}
                    {provider.dispatch_setting?.max_radius_meters != null && (
                      <div>
                        <div className="text-xs text-muted-foreground">服务接单半径</div>
                        <div className="font-medium">
                          {(provider.dispatch_setting.max_radius_meters / 1000).toFixed(1)} km
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>
        )}
      </SheetContent>
    </Sheet>
  )
}