'use client'

import Select from '@/components/ui/Select'

import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { useSession } from 'next-auth/react'
import DepartmentShell from './DepartmentShell'

type GroupRef = { slug: string; name: string }

type DepartmentGroup = GroupRef & {
  attachedPath: string
  source: 'own' | 'inherit' | string
}

type Person = {
  userId: string
  username: string
  displayName: string
  jobNumber: string | null
  departmentPath: string | null
  departmentName: string | null
  departmentGroups: DepartmentGroup[]
  personalGroups: GroupRef[]
}

export default function UserPermissionsDashboard() {
  const { data: session, status } = useSession()
  const isSuperAdmin = Boolean((session?.user as { isSuperAdmin?: boolean } | undefined)?.isSuperAdmin)

  const [keyword, setKeyword] = useState('')
  const [people, setPeople] = useState<Person[]>([])
  const [groups, setGroups] = useState<GroupRef[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [notice, setNotice] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)

  const search = useCallback(async (needle: string) => {
    if (!needle.trim()) {
      setPeople([])
      return
    }
    setLoading(true)
    setError(null)
    try {
      const response = await fetch(
        `/api/organization/user-permissions?q=${encodeURIComponent(needle.trim())}`,
        { cache: 'no-store' },
      )
      const body = await response.json().catch(() => null)
      if (!response.ok) throw new Error(body?.error || '搜索失败')
      setPeople(body.people || [])
      setGroups(body.groups || [])
    } catch (searchError) {
      setError(searchError instanceof Error ? searchError.message : '搜索失败')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    if (status !== 'authenticated' || !isSuperAdmin) return
    const handle = window.setTimeout(() => {
      void search(keyword)
    }, 250)
    return () => window.clearTimeout(handle)
  }, [keyword, status, isSuperAdmin, search])

  const mutate = async (body: Record<string, unknown>, success: string) => {
    setSaving(true)
    setError(null)
    setNotice(null)
    try {
      const response = await fetch('/api/organization/user-permissions', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      })
      const payload = await response.json().catch(() => null)
      if (!response.ok) throw new Error(payload?.error || '保存失败')
      setNotice(success)
      await search(keyword)
    } catch (saveError) {
      setError(saveError instanceof Error ? saveError.message : '保存失败')
    } finally {
      setSaving(false)
    }
  }

  return (
    <DepartmentShell>
      <main className="flex h-[calc(100dvh-72px)] flex-col overflow-hidden px-4 pt-4 sm:px-6 lg:px-8">
        <header className="shrink-0 pb-3">
          <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#214ba7]">治理与设置</p>
          <div className="mt-1 flex flex-wrap items-end justify-between gap-3">
            <div>
              <h1 className="text-2xl font-bold tracking-[-0.03em] text-[#101828]">按人看权限</h1>
              <p className="mt-1 max-w-3xl text-sm leading-6 text-[#66758b]">
                搜九千七这种人，看他部门带了哪组，自己又加了哪组。不要再改账号上的部门名。
              </p>
            </div>
            <Link
              href="/workspaces/governance/roles-permissions"
              className="text-sm font-semibold text-[#1677ff] hover:underline"
            >
              回到权限组
            </Link>
          </div>
          <label className="sr-only" htmlFor="user-permission-search">搜索人员</label>
          <input
            id="user-permission-search"
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
            placeholder="搜花名 / 工号 / 账号，例如九千七"
            className="mt-4 h-11 w-full max-w-xl rounded-lg border border-[#e2e8f0] bg-white px-3 text-sm text-[#101828] outline-none focus:border-[#1677ff] focus:ring-2 focus:ring-[#5a9ce6]/40"
          />
        </header>

        {status === 'loading' ? (
          <div className="rounded-xl border border-[#e2e8f0] bg-white px-5 py-10 text-sm text-[#66758b]">加载中…</div>
        ) : !isSuperAdmin ? (
          <div className="rounded-xl border border-[#e2e8f0] bg-white px-5 py-10 text-sm text-[#66758b]">
            只有超级管理员可以改人员权限。
          </div>
        ) : (
          <div className="min-h-0 flex-1 overflow-auto pb-6">
            {error && (
              <div className="mb-4 rounded-lg border border-[#f5c2c0] bg-[#fff5f4] px-4 py-3 text-sm text-[#b42318]">{error}</div>
            )}
            {notice && (
              <div className="mb-4 rounded-lg border border-[#b7ebc6] bg-[#f0fff4] px-4 py-3 text-sm text-[#087052]">{notice}</div>
            )}
            {loading && <p className="mb-3 text-sm text-[#66758b]">搜索中…</p>}
            {!keyword.trim() ? (
              <div className="rounded-xl border border-[#e2e8f0] bg-white px-5 py-10 text-sm text-[#66758b]">
                先搜一个人。部门带来的组不能在这里拿掉，要去权限组里改部门名单。
              </div>
            ) : people.length === 0 && !loading ? (
              <div className="rounded-xl border border-[#e2e8f0] bg-white px-5 py-10 text-sm text-[#66758b]">
                没有找到这个人，或他还没有钉钉绑定。
              </div>
            ) : (
              <ul className="space-y-3">
                {people.map((person) => {
                  const personalSlugs = new Set(person.personalGroups.map((row) => row.slug))
                  const extraGroups = groups.filter((group) => !personalSlugs.has(group.slug))
                  return (
                    <li key={person.userId} className="rounded-xl border border-[#e2e8f0] bg-white px-5 py-4">
                      <div className="flex flex-wrap items-start justify-between gap-3">
                        <div>
                          <h2 className="text-lg font-bold text-[#101828]">{person.displayName}</h2>
                          <p className="mt-1 text-sm text-[#66758b]">
                            @{person.username}
                            {person.jobNumber ? ` · ${person.jobNumber}` : ''}
                            {person.departmentName ? ` · ${person.departmentName}` : ''}
                          </p>
                          {person.departmentPath && (
                            <p className="mt-1 text-xs text-[#66758b]">{person.departmentPath}</p>
                          )}
                        </div>
                      </div>

                      <div className="mt-4 grid gap-4 sm:grid-cols-2">
                        <div>
                          <p className="text-xs font-semibold text-[#4f6077]">部门带来的组</p>
                          {person.departmentGroups.length === 0 ? (
                            <p className="mt-2 text-sm text-[#66758b]">这个部门还没进组，暂时走旧的部门权限。</p>
                          ) : (
                            <ul className="mt-2 space-y-1.5">
                              {person.departmentGroups.map((group) => (
                                <li key={`${person.userId}-${group.slug}`} className="text-sm text-[#101828]">
                                  {group.name}
                                  <span className="ml-2 text-xs text-[#66758b]">
                                    {group.source === 'own'
                                      ? '本部门在组里'
                                      : `随 ${group.attachedPath.split('/').pop()}`}
                                  </span>
                                </li>
                              ))}
                            </ul>
                          )}
                        </div>
                        <div>
                          <p className="text-xs font-semibold text-[#4f6077]">个人加的组</p>
                          {person.personalGroups.length === 0 ? (
                            <p className="mt-2 text-sm text-[#66758b]">还没有单独加组</p>
                          ) : (
                            <ul className="mt-2 space-y-1.5">
                              {person.personalGroups.map((group) => (
                                <li key={group.slug} className="flex items-center justify-between gap-3 text-sm">
                                  <span className="text-[#101828]">{group.name}</span>
                                  <button
                                    type="button"
                                    disabled={saving}
                                    onClick={() =>
                                      void mutate(
                                        { action: 'remove-member', userId: person.userId, slug: group.slug },
                                        `已把 ${person.displayName} 从「${group.name}」拿掉`,
                                      )
                                    }
                                    className="text-xs font-semibold text-[#b42318] hover:underline"
                                  >
                                    去掉
                                  </button>
                                </li>
                              ))}
                            </ul>
                          )}
                          {extraGroups.length > 0 && (
                            <label className="mt-3 block">
                              <span className="sr-only">再加一组</span>
                              <Select
                                disabled={saving}
                                defaultValue=""
                                onChange={(event) => {
                                  const slug = event.target.value
                                  if (!slug) return
                                  const group = extraGroups.find((item) => item.slug === slug)
                                  void mutate(
                                    { action: 'add-member', userId: person.userId, slug },
                                    `已把 ${person.displayName} 加进「${group?.name || slug}」`,
                                  )
                                  event.target.value = ''
                                }}
                                className="mt-1 h-9 w-full max-w-xs rounded-lg border border-[#e2e8f0] bg-[#f8fafc] px-2 text-sm"
                              >
                                <option value="">再加一组…</option>
                                {extraGroups.map((group) => (
                                  <option key={group.slug} value={group.slug}>
                                    {group.name}
                                  </option>
                                ))}
                              </Select>
                            </label>
                          )}
                        </div>
                      </div>
                    </li>
                  )
                })}
              </ul>
            )}
          </div>
        )}
      </main>
    </DepartmentShell>
  )
}