"use client"

import { useState } 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("")

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

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

  const filteredTeams = teams.filter((team) => {
    const matchesSearch =
      team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      team.members.some((member) => member.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 = (team: Team) => {
    setSelectedTeam(team)
    setNewTeam({
      name: team.name,
      department: team.department,
      contactEmail: team.contactEmail,
      members: [...team.members],
      leader: team.leader,
      apps: [...team.apps],
      totalLikes: team.totalLikes,
    })
    setShowEditTeam(true)
  }

  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.name.trim()) {
      setError("請輸入成員姓名")
      return
    }

    const member: TeamMember = {
      id: `m${Date.now()}`,
      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: "",
      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)
    await new Promise((resolve) => setTimeout(resolve, 1000))

    updateTeam(selectedTeam.id, newTeam)
    setShowEditTeam(false)
    setSelectedTeam(null)
    setSuccess("團隊更新成功！")
    setIsLoading(false)
    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">{teams.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">{teams.reduce((sum, team) => sum + team.members.length, 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">
                  {teams.length > 0
                    ? Math.round((teams.reduce((sum, team) => sum + team.members.length, 0) / teams.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="ICDU">ICDU</SelectItem>
                  <SelectItem value="ICBU">ICBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="MBU5">MBU5</SelectItem>
                  <SelectItem value="PJA">PJA</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>
                  <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) => {
                const leader = team.members.find((m) => m.id === team.leader)

                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.contactEmail}</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">
                            {leader?.name[0] || "?"}
                          </AvatarFallback>
                        </Avatar>
                        <span className="text-sm">{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.members.length}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <span className="font-medium">{team.apps.length}</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="editMemberName">成員姓名</Label>
                    <Input
                      id="editMemberName"
                      value={newMember.name}
                      onChange={(e) => setNewMember({ ...newMember, name: e.target.value })}
                      placeholder="輸入成員姓名"
                    />
                  </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.contactEmail}</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.members.length} 名成員
                    </Badge>
                    <Badge variant="outline" className="bg-green-100 text-green-700">
                      {selectedTeam.apps.length} 個應用
                    </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>
  )
}