'use client'

import { useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
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 { Skeleton } from '@/components/ui/skeleton'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Users,
  UserPlus,
  Crown,
  Mail,
  Trash2,
  ArrowLeft,
  Loader2,
  AlertCircle,
  CheckCircle,
  Clock,
  LogIn,
} from 'lucide-react'
import Link from 'next/link'

const inviteSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
  role: z.enum(['MEMBER', 'ADVISOR']),
  title: z.string().optional(),
})

type InviteFormData = z.infer<typeof inviteSchema>

const roleLabels: Record<string, string> = {
  LEAD: 'Team Lead',
  MEMBER: 'Team Member',
  ADVISOR: 'Advisor',
}

const statusLabels: Record<string, { label: string; icon: React.ComponentType<{ className?: string }> }> = {
  ACTIVE: { label: 'Active', icon: CheckCircle },
  INVITED: { label: 'Pending', icon: Clock },
  SUSPENDED: { label: 'Suspended', icon: AlertCircle },
}

export default function TeamManagementPage() {
  const params = useParams()
  const router = useRouter()
  const projectId = params.id as string
  const { data: session, status: sessionStatus } = useSession()

  const [isInviteOpen, setIsInviteOpen] = useState(false)

  const { data: teamData, isLoading, refetch } = trpc.applicant.getTeamMembers.useQuery(
    { projectId },
    { enabled: sessionStatus === 'authenticated' && session?.user?.role === 'APPLICANT' }
  )

  const inviteMutation = trpc.applicant.inviteTeamMember.useMutation({
    onSuccess: () => {
      toast.success('Team member invited!')
      setIsInviteOpen(false)
      refetch()
    },
    onError: (error) => {
      toast.error(error.message)
    },
  })

  const removeMutation = trpc.applicant.removeTeamMember.useMutation({
    onSuccess: () => {
      toast.success('Team member removed')
      refetch()
    },
    onError: (error) => {
      toast.error(error.message)
    },
  })

  const form = useForm<InviteFormData>({
    resolver: zodResolver(inviteSchema),
    defaultValues: {
      name: '',
      email: '',
      role: 'MEMBER',
      title: '',
    },
  })

  const onInvite = async (data: InviteFormData) => {
    await inviteMutation.mutateAsync({
      projectId,
      ...data,
    })
    form.reset()
  }

  // Not authenticated
  if (sessionStatus === 'unauthenticated') {
    return (
      <div className="max-w-2xl mx-auto">
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <LogIn className="h-12 w-12 text-muted-foreground/50 mb-4" />
            <h2 className="text-xl font-semibold mb-2">Sign In Required</h2>
            <p className="text-muted-foreground text-center mb-6">
              Please sign in to manage your team.
            </p>
            <Button asChild>
              <Link href="/login">Sign In</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  // Loading
  if (sessionStatus === 'loading' || isLoading) {
    return (
      <div className="max-w-3xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
          <Skeleton className="h-10 w-10" />
          <div className="space-y-2">
            <Skeleton className="h-6 w-48" />
            <Skeleton className="h-4 w-32" />
          </div>
        </div>
        <Card>
          <CardContent className="p-6 space-y-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <Skeleton className="h-10 w-10 rounded-full" />
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-3 w-24" />
                  </div>
                </div>
                <Skeleton className="h-8 w-20" />
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    )
  }

  // Check if user is team lead
  const currentUserMember = teamData?.teamMembers.find(
    (tm) => tm.userId === session?.user?.id
  )
  const isTeamLead =
    currentUserMember?.role === 'LEAD' ||
    teamData?.submittedBy?.id === session?.user?.id

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/my-submission/${projectId}`}>
              <ArrowLeft className="h-5 w-5" />
            </Link>
          </Button>
          <div>
            <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
              <Users className="h-6 w-6" />
              Team Members
            </h1>
            <p className="text-muted-foreground">
              Manage your project team
            </p>
          </div>
        </div>

        {isTeamLead && (
          <Dialog open={isInviteOpen} onOpenChange={setIsInviteOpen}>
            <DialogTrigger asChild>
              <Button>
                <UserPlus className="mr-2 h-4 w-4" />
                Invite Member
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Invite Team Member</DialogTitle>
                <DialogDescription>
                  Send an invitation to join your project team. They will receive an email
                  with instructions to create their account.
                </DialogDescription>
              </DialogHeader>
              <form onSubmit={form.handleSubmit(onInvite)} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">Full Name</Label>
                  <Input
                    id="name"
                    placeholder="Jane Doe"
                    {...form.register('name')}
                  />
                  {form.formState.errors.name && (
                    <p className="text-sm text-destructive">
                      {form.formState.errors.name.message}
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email Address</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="jane@example.com"
                    {...form.register('email')}
                  />
                  {form.formState.errors.email && (
                    <p className="text-sm text-destructive">
                      {form.formState.errors.email.message}
                    </p>
                  )}
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="role">Role</Label>
                    <Select
                      value={form.watch('role')}
                      onValueChange={(value) => form.setValue('role', value as 'MEMBER' | 'ADVISOR')}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select role" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="MEMBER">Team Member</SelectItem>
                        <SelectItem value="ADVISOR">Advisor</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="title">Title (optional)</Label>
                    <Input
                      id="title"
                      placeholder="CTO, Designer..."
                      {...form.register('title')}
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setIsInviteOpen(false)}
                  >
                    Cancel
                  </Button>
                  <Button type="submit" disabled={inviteMutation.isPending}>
                    {inviteMutation.isPending && (
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    )}
                    Send Invitation
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        )}
      </div>

      {/* Team Members List */}
      <Card>
        <CardHeader>
          <CardTitle>Team ({teamData?.teamMembers.length || 0} members)</CardTitle>
          <CardDescription>
            Everyone on this list can view and collaborate on this project.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {teamData?.teamMembers.map((member) => {
            const StatusIcon = statusLabels[member.user.status]?.icon || AlertCircle

            return (
              <div
                key={member.id}
                className="flex items-center justify-between rounded-lg border p-4"
              >
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                    {member.role === 'LEAD' ? (
                      <Crown className="h-5 w-5 text-yellow-500" />
                    ) : (
                      <span className="text-sm font-medium">
                        {member.user.name?.charAt(0).toUpperCase() || '?'}
                      </span>
                    )}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{member.user.name}</span>
                      <Badge variant="outline" className="text-xs">
                        {roleLabels[member.role] || member.role}
                      </Badge>
                      {member.title && (
                        <span className="text-xs text-muted-foreground">
                          ({member.title})
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Mail className="h-3 w-3" />
                      {member.user.email}
                      <StatusIcon className="h-3 w-3 ml-2" />
                      <span className="text-xs">
                        {statusLabels[member.user.status]?.label || member.user.status}
                      </span>
                    </div>
                  </div>
                </div>

                {isTeamLead && member.role !== 'LEAD' && teamData.submittedBy?.id !== member.userId && (
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button variant="ghost" size="icon" className="text-destructive">
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>Remove Team Member</AlertDialogTitle>
                        <AlertDialogDescription>
                          Are you sure you want to remove {member.user.name} from the team?
                          They will no longer have access to this project.
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction
                          onClick={() => removeMutation.mutate({ projectId, userId: member.userId })}
                          className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                        >
                          Remove
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                )}
              </div>
            )
          })}

          {(!teamData?.teamMembers || teamData.teamMembers.length === 0) && (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <Users className="h-12 w-12 text-muted-foreground/50 mb-4" />
              <p className="text-muted-foreground">No team members yet.</p>
              {isTeamLead && (
                <Button
                  variant="outline"
                  className="mt-4"
                  onClick={() => setIsInviteOpen(true)}
                >
                  <UserPlus className="mr-2 h-4 w-4" />
                  Invite Your First Team Member
                </Button>
              )}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Info Card */}
      <Card className="bg-muted/50">
        <CardContent className="p-4">
          <div className="flex items-start gap-3">
            <AlertCircle className="h-5 w-5 text-muted-foreground mt-0.5" />
            <div className="text-sm text-muted-foreground">
              <p className="font-medium text-foreground">About Team Access</p>
              <p className="mt-1">
                All team members can view project details and status updates.
                Only the team lead can invite or remove team members.
                Invited members will receive an email to set up their account.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
