"use client"

import { useState, useEffect } from "react"
import { useCompetition } from "@/contexts/competition-context"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  Users,
  Plus,
  MoreHorizontal,
  Edit,
  Trash2,
  Eye,
  UserPlus,
  UserMinus,
  Crown,
  CheckCircle,
  AlertTriangle,
  Loader2,
} from "lucide-react"
import type { Team, TeamMember } from "@/types/competition"

export function TeamManagement() {
  const { teams, addTeam, updateTeam, getTeamById } = useCompetition()

  const [searchTerm, setSearchTerm] = useState("")
  const [selectedDepartment, setSelectedDepartment] = useState("all")
  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null)
  const [showTeamDetail, setShowTeamDetail] = useState(false)
  const [showAddTeam, setShowAddTeam] = useState(false)
  const [showEditTeam, setShowEditTeam] = useState(false)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [success, setSuccess] = useState("")
  const [error, setError] = useState("")
  
  // 從 API 獲取的團隊數據
  const [apiTeams, setApiTeams] = useState<any[]>([])
  const [isLoadingTeams, setIsLoadingTeams] = useState(true)

  const [newTeam, setNewTeam] = useState({
    name: "",
    department: "HQBU",
    contactEmail: "",
    members: [] as TeamMember[],
    leader: "",
    apps: [] as string[],
    totalLikes: 0,
  })

  const [newMember, setNewMember] = useState({
    name: "",
    user_id: "",
    department: "HQBU",
    role: "成員",
  })

  // 可用用戶狀態
  const [availableUsers, setAvailableUsers] = useState<any[]>([])
  const [isLoadingUsers, setIsLoadingUsers] = useState(false)

  // 獲取團隊數據
  const fetchTeams = async () => {
    try {
      setIsLoadingTeams(true)
      const response = await fetch('/api/admin/teams')
      const data = await response.json()
      
      if (data.success) {
        setApiTeams(data.data)
      } else {
        console.error('獲取團隊數據失敗:', data.message)
        setError('獲取團隊數據失敗')
      }
    } catch (error) {
      console.error('獲取團隊數據失敗:', error)
      setError('獲取團隊數據失敗')
    } finally {
      setIsLoadingTeams(false)
    }
  }

  useEffect(() => {
    fetchTeams()
    fetchAvailableUsers()
  }, [])

  // 獲取可用用戶列表
  const fetchAvailableUsers = async () => {
    try {
      setIsLoadingUsers(true)
      const response = await fetch('/api/admin/users/available')
      const data = await response.json()
      
      if (data.success) {
        setAvailableUsers(data.data)
      } else {
        console.error('獲取用戶列表失敗:', data.message)
        setError('獲取用戶列表失敗')
      }
    } catch (error) {
      console.error('獲取用戶列表失敗:', error)
      setError('獲取用戶列表失敗')
    } finally {
      setIsLoadingUsers(false)
    }
  }

  const filteredTeams = apiTeams.filter((team) => {
    const matchesSearch =
      team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      team.leader_name?.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesDepartment = selectedDepartment === "all" || team.department === selectedDepartment
    return matchesSearch && matchesDepartment
  })

  const handleViewTeam = (team: Team) => {
    setSelectedTeam(team)
    setShowTeamDetail(true)
  }

  const handleEditTeam = async (team: any) => {
    setSelectedTeam(team)
    
    try {
      // 獲取團隊的詳細信息，包括成員
      const response = await fetch(`/api/admin/teams/${team.id}`)
      const data = await response.json()
      
      if (data.success) {
        const teamDetails = data.data
        
        // 確保成員數據結構正確
        const members = teamDetails.members && Array.isArray(teamDetails.members) 
          ? teamDetails.members.map((member: any) => ({
              id: member.user_id || member.id,
              user_id: member.user_id || member.id,
              name: member.name,
              department: member.department,
              role: member.role || '成員'
            }))
          : []
        
        setNewTeam({
          name: teamDetails.name,
          department: teamDetails.department,
          contactEmail: teamDetails.contact_email || teamDetails.contactEmail,
          description: teamDetails.description || '',
          members: members,
          leader: teamDetails.leader_id || teamDetails.leader,
          apps: teamDetails.apps || [],
          totalLikes: teamDetails.total_likes || teamDetails.totalLikes || 0,
        })
        setShowEditTeam(true)
      } else {
        setError('獲取團隊詳情失敗')
      }
    } catch (error) {
      console.error('獲取團隊詳情失敗:', error)
      setError('獲取團隊詳情失敗')
    }
  }

  const handleDeleteTeam = (team: Team) => {
    setSelectedTeam(team)
    setShowDeleteConfirm(true)
  }

  const confirmDeleteTeam = () => {
    if (selectedTeam) {
      // In a real app, you would call a delete function here
      setShowDeleteConfirm(false)
      setSelectedTeam(null)
      setSuccess("團隊刪除成功！")
      setTimeout(() => setSuccess(""), 3000)
    }
  }

  const handleAddMember = () => {
    if (!newMember.user_id || !newMember.name.trim()) {
      setError("請選擇成員")
      return
    }

    // 檢查是否已經添加過這個成員
    if (newTeam.members.some(member => member.user_id === newMember.user_id)) {
      setError("該成員已經在團隊中")
      return
    }

    const member: TeamMember = {
      id: newMember.user_id, // 使用真實的用戶 ID
      user_id: newMember.user_id,
      name: newMember.name,
      department: newMember.department,
      role: newMember.role,
    }

    setNewTeam({
      ...newTeam,
      members: [...newTeam.members, member],
    })

    // Set as leader if it's the first member
    if (newTeam.members.length === 0) {
      setNewTeam((prev) => ({
        ...prev,
        leader: member.id,
        members: [...prev.members, { ...member, role: "隊長" }],
      }))
    }

    setNewMember({
      name: "",
      user_id: "",
      department: "HQBU",
      role: "成員",
    })
    setError("")
  }

  const handleRemoveMember = (memberId: string) => {
    const updatedMembers = newTeam.members.filter((m) => m.id !== memberId)
    let newLeader = newTeam.leader

    // If removing the leader, assign leadership to the first remaining member
    if (memberId === newTeam.leader && updatedMembers.length > 0) {
      newLeader = updatedMembers[0].id
      updatedMembers[0].role = "隊長"
    }

    setNewTeam({
      ...newTeam,
      members: updatedMembers,
      leader: newLeader,
    })
  }

  const handleSetLeader = (memberId: string) => {
    const updatedMembers = newTeam.members.map((member) => ({
      ...member,
      role: member.id === memberId ? "隊長" : "成員",
    }))

    setNewTeam({
      ...newTeam,
      members: updatedMembers,
      leader: memberId,
    })
  }

  const handleAddTeam = async () => {
    setError("")

    if (!newTeam.name || !newTeam.contactEmail || newTeam.members.length === 0) {
      setError("請填寫所有必填欄位並至少添加一名成員")
      return
    }

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1000))

    addTeam(newTeam)
    setShowAddTeam(false)
    setNewTeam({
      name: "",
      department: "HQBU",
      contactEmail: "",
      members: [],
      leader: "",
      apps: [],
      totalLikes: 0,
    })
    setSuccess("團隊創建成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleUpdateTeam = async () => {
    if (!selectedTeam) return

    setError("")

    if (!newTeam.name || !newTeam.contactEmail || newTeam.members.length === 0) {
      setError("請填寫所有必填欄位並至少添加一名成員")
      return
    }

    setIsLoading(true)

    try {
      // 準備更新數據
      const updateData = {
        name: newTeam.name,
        department: newTeam.department,
        contact_email: newTeam.contactEmail,
        description: newTeam.description || null,
        leader_id: newTeam.leader,
        members: newTeam.members.map(member => ({
          user_id: member.user_id || member.id,
          role: member.role
        }))
      }

      console.log('🔍 準備更新的團隊數據:', updateData)
      console.log('🔍 成員數據:', newTeam.members)

      // 調用 API 更新團隊
      const response = await fetch(`/api/admin/teams/${selectedTeam.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(updateData)
      })

      const data = await response.json()

      if (data.success) {
        // 更新成功，重新載入團隊數據
        await fetchTeams()
        setShowEditTeam(false)
        setSelectedTeam(null)
        setSuccess("團隊更新成功！")
      } else {
        setError(data.message || "更新團隊失敗")
      }
    } catch (error) {
      console.error('更新團隊失敗:', error)
      setError("更新團隊失敗")
    } finally {
      setIsLoading(false)
      setTimeout(() => setError(""), 3000)
      setTimeout(() => setSuccess(""), 3000)
    }
  }

  return (
    <div className="space-y-6">
      {/* Success/Error Messages */}
      {success && (
        <Alert className="border-green-200 bg-green-50">
          <CheckCircle className="h-4 w-4 text-green-600" />
          <AlertDescription className="text-green-800">{success}</AlertDescription>
        </Alert>
      )}

      {error && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">團隊管理</h1>
          <p className="text-gray-600">管理競賽團隊和成員資訊</p>
        </div>
        <Button
          onClick={() => setShowAddTeam(true)}
          className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
        >
          <Plus className="w-4 h-4 mr-2" />
          新增團隊
        </Button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">總團隊數</p>
                <p className="text-2xl font-bold">{apiTeams.length}</p>
              </div>
              <Users className="w-8 h-8 text-green-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">總成員數</p>
                <p className="text-2xl font-bold">{apiTeams.reduce((sum, team) => sum + (team.member_count || 0), 0)}</p>
              </div>
              <UserPlus className="w-8 h-8 text-blue-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">平均團隊規模</p>
                <p className="text-2xl font-bold">
                  {apiTeams.length > 0
                    ? Math.round((apiTeams.reduce((sum, team) => sum + (team.member_count || 0), 0) / apiTeams.length) * 10) / 10
                    : 0}
                </p>
              </div>
              <Crown className="w-8 h-8 text-yellow-600" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-col lg:flex-row gap-4 items-center">
            <div className="flex-1 relative">
              <Input
                placeholder="搜尋團隊名稱或成員姓名..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <div className="flex gap-3">
              <Select value={selectedDepartment} onValueChange={setSelectedDepartment}>
                <SelectTrigger className="w-32">
                  <SelectValue placeholder="部門" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部部門</SelectItem>
                  <SelectItem value="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                  <SelectItem value="FAB3">FAB3</SelectItem>
                  <SelectItem value="FNBU">FNBU</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="HRBU">HRBU</SelectItem>
                  <SelectItem value="IBU">IBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="PBU">PBU</SelectItem>
                  <SelectItem value="SBG">SBG</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="法務室">法務室</SelectItem>
                  <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                  <SelectItem value="稽核室">稽核室</SelectItem>
                  <SelectItem value="總經理室">總經理室</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Teams Table */}
      <Card>
        <CardHeader>
          <CardTitle>團隊列表 ({filteredTeams.length})</CardTitle>
          <CardDescription>管理所有競賽團隊</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>團隊名稱</TableHead>
                <TableHead>隊長</TableHead>
                <TableHead>部門</TableHead>
                <TableHead>成員數</TableHead>
                <TableHead>應用數</TableHead>
                <TableHead>總按讚數</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredTeams.map((team) => {
                return (
                  <TableRow key={team.id}>
                    <TableCell>
                      <div className="flex items-center space-x-3">
                        <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg flex items-center justify-center">
                          <Users className="w-4 h-4 text-white" />
                        </div>
                        <div>
                          <p className="font-medium">{team.name}</p>
                          <p className="text-sm text-gray-500">{team.contact_email}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-2">
                        <Avatar className="w-6 h-6">
                          <AvatarFallback className="bg-green-100 text-green-700 text-xs">
                            {team.leader_name?.[0] || "?"}
                          </AvatarFallback>
                        </Avatar>
                        <span className="text-sm">{team.leader_name || "未設定"}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline" className="bg-gray-100 text-gray-700">
                        {team.department}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-1">
                        <UserPlus className="w-4 h-4 text-blue-500" />
                        <span>{team.member_count || 0}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span className="font-medium">{team.app_count || 0}</span>
                    </TableCell>
                    <TableCell>
                      <span className="font-medium text-red-600">{team.totalLikes}</span>
                    </TableCell>
                    <TableCell>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreHorizontal className="w-4 h-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => handleViewTeam(team)}>
                            <Eye className="w-4 h-4 mr-2" />
                            查看詳情
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleEditTeam(team)}>
                            <Edit className="w-4 h-4 mr-2" />
                            編輯團隊
                          </DropdownMenuItem>
                          <DropdownMenuItem className="text-red-600" onClick={() => handleDeleteTeam(team)}>
                            <Trash2 className="w-4 h-4 mr-2" />
                            刪除團隊
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      {/* Add Team Dialog */}
      <Dialog open={showAddTeam} onOpenChange={setShowAddTeam}>
        <DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>新增團隊</DialogTitle>
            <DialogDescription>創建一個新的競賽團隊</DialogDescription>
          </DialogHeader>

          <Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="basic">基本資訊</TabsTrigger>
              <TabsTrigger value="members">團隊成員</TabsTrigger>
            </TabsList>

            <TabsContent value="basic" className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="teamName">團隊名稱 *</Label>
                  <Input
                    id="teamName"
                    value={newTeam.name}
                    onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
                    placeholder="輸入團隊名稱"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="teamDepartment">主要部門</Label>
                  <Select
                    value={newTeam.department}
                    onValueChange={(value) => setNewTeam({ ...newTeam, department: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="HQBU">HQBU</SelectItem>
                      <SelectItem value="ITBU">ITBU</SelectItem>
                      <SelectItem value="MBU1">MBU1</SelectItem>
                      <SelectItem value="SBU">SBU</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="contactEmail">聯絡信箱 *</Label>
                <Input
                  id="contactEmail"
                  type="email"
                  value={newTeam.contactEmail}
                  onChange={(e) => setNewTeam({ ...newTeam, contactEmail: e.target.value })}
                  placeholder="team@company.com"
                />
              </div>
            </TabsContent>

            <TabsContent value="members" className="space-y-4">
              <div className="space-y-4">
                <h4 className="font-semibold">新增成員</h4>
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="memberName">成員姓名</Label>
                    <Input
                      id="memberName"
                      value={newMember.name}
                      onChange={(e) => setNewMember({ ...newMember, name: e.target.value })}
                      placeholder="輸入成員姓名"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="memberDepartment">部門</Label>
                    <Select
                      value={newMember.department}
                      onValueChange={(value) => setNewMember({ ...newMember, department: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="memberRole">角色</Label>
                    <Input
                      id="memberRole"
                      value={newMember.role}
                      onChange={(e) => setNewMember({ ...newMember, role: e.target.value })}
                      placeholder="例如：開發工程師"
                    />
                  </div>
                </div>
                <Button onClick={handleAddMember} variant="outline" className="w-full bg-transparent">
                  <UserPlus className="w-4 h-4 mr-2" />
                  新增成員
                </Button>
              </div>

              {newTeam.members.length > 0 && (
                <div className="space-y-4">
                  <h4 className="font-semibold">團隊成員 ({newTeam.members.length})</h4>
                  <div className="space-y-2">
                    {newTeam.members.map((member) => (
                      <div key={member.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center space-x-3">
                          <Avatar className="w-8 h-8">
                            <AvatarFallback className="bg-green-100 text-green-700 text-sm">
                              {member.name[0]}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="flex items-center space-x-2">
                              <span className="font-medium">{member.name}</span>
                              {member.id === newTeam.leader && (
                                <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
                                  隊長
                                </Badge>
                              )}
                            </div>
                            <div className="text-sm text-gray-600">
                              {member.department} • {member.role}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          {member.id !== newTeam.leader && (
                            <Button variant="outline" size="sm" onClick={() => handleSetLeader(member.id)}>
                              <Crown className="w-4 h-4 mr-1" />
                              設為隊長
                            </Button>
                          )}
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleRemoveMember(member.id)}
                            className="text-red-600 border-red-300 hover:bg-red-50"
                          >
                            <UserMinus className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>

          <div className="flex justify-end space-x-3">
            <Button variant="outline" onClick={() => setShowAddTeam(false)}>
              取消
            </Button>
            <Button onClick={handleAddTeam} disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  創建中...
                </>
              ) : (
                "創建團隊"
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Edit Team Dialog */}
      <Dialog open={showEditTeam} onOpenChange={setShowEditTeam}>
        <DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>編輯團隊</DialogTitle>
            <DialogDescription>修改團隊資訊和成員</DialogDescription>
          </DialogHeader>

          <Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="basic">基本資訊</TabsTrigger>
              <TabsTrigger value="members">團隊成員</TabsTrigger>
            </TabsList>

            <TabsContent value="basic" className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="editTeamName">團隊名稱 *</Label>
                  <Input
                    id="editTeamName"
                    value={newTeam.name}
                    onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
                    placeholder="輸入團隊名稱"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="editTeamDepartment">主要部門</Label>
                  <Select
                    value={newTeam.department}
                    onValueChange={(value) => setNewTeam({ ...newTeam, department: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="HQBU">HQBU</SelectItem>
                      <SelectItem value="ITBU">ITBU</SelectItem>
                      <SelectItem value="MBU1">MBU1</SelectItem>
                      <SelectItem value="SBU">SBU</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="editContactEmail">聯絡信箱 *</Label>
                <Input
                  id="editContactEmail"
                  type="email"
                  value={newTeam.contactEmail}
                  onChange={(e) => setNewTeam({ ...newTeam, contactEmail: e.target.value })}
                  placeholder="team@company.com"
                />
              </div>
            </TabsContent>

            <TabsContent value="members" className="space-y-4">
              <div className="space-y-4">
                <h4 className="font-semibold">新增成員</h4>
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="editMemberSelect">選擇成員</Label>
                    <Select
                      value={newMember.user_id}
                      onValueChange={(value) => {
                        const selectedUser = availableUsers.find(user => user.id === value)
                        setNewMember({ 
                          ...newMember, 
                          user_id: value,
                          name: selectedUser?.name || "",
                          department: selectedUser?.department || "HQBU"
                        })
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="選擇團隊成員" />
                      </SelectTrigger>
                      <SelectContent>
                        {availableUsers.map((user) => (
                          <SelectItem key={user.id} value={user.id}>
                            {user.name} ({user.department})
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="editMemberDepartment">部門</Label>
                    <Select
                      value={newMember.department}
                      onValueChange={(value) => setNewMember({ ...newMember, department: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="editMemberRole">角色</Label>
                    <Input
                      id="editMemberRole"
                      value={newMember.role}
                      onChange={(e) => setNewMember({ ...newMember, role: e.target.value })}
                      placeholder="例如：開發工程師"
                    />
                  </div>
                </div>
                <Button onClick={handleAddMember} variant="outline" className="w-full bg-transparent">
                  <UserPlus className="w-4 h-4 mr-2" />
                  新增成員
                </Button>
              </div>

              {newTeam.members.length > 0 && (
                <div className="space-y-4">
                  <h4 className="font-semibold">團隊成員 ({newTeam.members.length})</h4>
                  <div className="space-y-2">
                    {newTeam.members.map((member) => (
                      <div key={member.id} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center space-x-3">
                          <Avatar className="w-8 h-8">
                            <AvatarFallback className="bg-green-100 text-green-700 text-sm">
                              {member.name[0]}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="flex items-center space-x-2">
                              <span className="font-medium">{member.name}</span>
                              {member.id === newTeam.leader && (
                                <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
                                  隊長
                                </Badge>
                              )}
                            </div>
                            <div className="text-sm text-gray-600">
                              {member.department} • {member.role}
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          {member.id !== newTeam.leader && (
                            <Button variant="outline" size="sm" onClick={() => handleSetLeader(member.id)}>
                              <Crown className="w-4 h-4 mr-1" />
                              設為隊長
                            </Button>
                          )}
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleRemoveMember(member.id)}
                            className="text-red-600 border-red-300 hover:bg-red-50"
                          >
                            <UserMinus className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>

          <div className="flex justify-end space-x-3">
            <Button variant="outline" onClick={() => setShowEditTeam(false)}>
              取消
            </Button>
            <Button onClick={handleUpdateTeam} disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  更新中...
                </>
              ) : (
                "更新團隊"
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2">
              <AlertTriangle className="w-5 h-5 text-red-500" />
              <span>確認刪除團隊</span>
            </DialogTitle>
            <DialogDescription>
              您確定要刪除團隊「{selectedTeam?.name}」嗎？
              <br />
              <span className="text-red-600 font-medium">此操作無法復原，將會永久刪除團隊的所有資料。</span>
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end space-x-3 mt-6">
            <Button variant="outline" onClick={() => setShowDeleteConfirm(false)}>
              取消
            </Button>
            <Button variant="destructive" onClick={confirmDeleteTeam}>
              <Trash2 className="w-4 h-4 mr-2" />
              確認刪除
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Team Detail Dialog */}
      <Dialog open={showTeamDetail} onOpenChange={setShowTeamDetail}>
        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>團隊詳情</DialogTitle>
            <DialogDescription>查看團隊的詳細資訊</DialogDescription>
          </DialogHeader>

          {selectedTeam && (
            <div className="space-y-6">
              <div className="flex items-start space-x-4">
                <div className="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-xl flex items-center justify-center">
                  <Users className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold">{selectedTeam.name}</h3>
                  <p className="text-gray-600 mb-2">{selectedTeam.contact_email}</p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="bg-gray-100 text-gray-700">
                      {selectedTeam.department}
                    </Badge>
                    <Badge variant="outline" className="bg-blue-100 text-blue-700">
                      {selectedTeam.member_count || 0} 名成員
                    </Badge>
                    <Badge variant="outline" className="bg-green-100 text-green-700">
                      {selectedTeam.app_count || 0} 個應用
                    </Badge>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-500">團隊ID</p>
                  <p className="font-medium">{selectedTeam.id}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">總按讚數</p>
                  <p className="font-medium text-red-600">{selectedTeam.totalLikes}</p>
                </div>
              </div>

              <div>
                <h4 className="font-semibold mb-3">團隊成員</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {selectedTeam.members.map((member) => (
                    <div key={member.id} className="flex items-center space-x-3 p-3 border rounded-lg">
                      <Avatar className="w-10 h-10">
                        <AvatarFallback className="bg-green-100 text-green-700">{member.name[0]}</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <span className="font-medium">{member.name}</span>
                          {member.id === selectedTeam.leader && (
                            <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
                              隊長
                            </Badge>
                          )}
                        </div>
                        <div className="text-sm text-gray-600">
                          {member.department} • {member.role}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}