"use client";

import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { LoadingPage, LoadingSpinner } from "@/components/ui/loading";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { gamificationApi, Badge, CreateBadgeDto, usersApi, User } from "@/lib/api-client";
import { formatDate } from "@/lib/utils";
import { Plus, Award, Zap, Users, Search } from "lucide-react";
import { Avatar } from "@/components/ui/avatar";
import { IconSelector } from "@/components/gamification/icon-selector";
import { ConditionBuilder } from "@/components/gamification/condition-builder";

export default function BadgesPage() {
  const queryClient = useQueryClient();
  const [createDialog, setCreateDialog] = useState(false);
  const [awardDialog, setAwardDialog] = useState<{ open: boolean; badge: Badge | null }>({
    open: false,
    badge: null,
  });
  const [userSearch, setUserSearch] = useState("");
  const [selectedUser, setSelectedUser] = useState<User | null>(null);

  const [formData, setFormData] = useState<CreateBadgeDto>({
    name: "",
    description: "",
    iconType: "emoji",
    iconValue: "⭐",
    iconUrl: null,
    category: undefined,
    criteria: undefined,
    pointsReward: undefined,
  });

  const { data: badges, isLoading } = useQuery({
    queryKey: ["badges"],
    queryFn: async () => {
      const response = await gamificationApi.getBadges();
      return response.data;
    },
  });

  const { data: users } = useQuery({
    queryKey: ["users-search", userSearch],
    queryFn: async () => {
      if (!userSearch) return [];
      const response = await usersApi.search(userSearch, { limit: 10 });
      return response.data.data;
    },
    enabled: userSearch.length > 1,
  });

  const createMutation = useMutation({
    mutationFn: () => gamificationApi.createBadge(formData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["badges"] });
      setCreateDialog(false);
      setFormData({
        name: "",
        description: "",
        iconType: "emoji",
        iconValue: "⭐",
        iconUrl: null,
        category: undefined,
        criteria: undefined,
        pointsReward: undefined,
      });
    },
  });

  const awardMutation = useMutation({
    mutationFn: () => {
      if (!awardDialog.badge || !selectedUser) throw new Error("Missing data");
      return gamificationApi.awardBadge(awardDialog.badge.id, selectedUser.id);
    },
    onSuccess: () => {
      setAwardDialog({ open: false, badge: null });
      setSelectedUser(null);
      setUserSearch("");
    },
  });

  if (isLoading) {
    return <LoadingPage />;
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Badges"
        description="Create and manage achievement badges"
      >
        <Button onClick={() => setCreateDialog(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Create Badge
        </Button>
      </PageHeader>

      {badges?.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Award className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold">No badges yet</h3>
            <p className="text-muted-foreground mt-1">Create your first badge to motivate users</p>
            <Button className="mt-4" onClick={() => setCreateDialog(true)}>
              <Plus className="mr-2 h-4 w-4" />
              Create Badge
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {badges?.map((badge: Badge) => (
            <Card key={badge.id} className="overflow-hidden group hover:shadow-md transition-shadow">
              <CardContent className="pt-6">
                <div className="flex flex-col items-center text-center">
                  {/* Badge Icon */}
                  <div className="h-20 w-20 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4">
                    {badge.iconType === "emoji" && badge.iconValue ? (
                      <span className="text-3xl">{badge.iconValue}</span>
                    ) : badge.iconUrl ? (
                      <img src={badge.iconUrl} alt={badge.name} className="h-12 w-12 object-contain" />
                    ) : (
                      <Award className="h-10 w-10 text-primary" />
                    )}
                  </div>

                  <h3 className="font-semibold text-lg">{badge.name}</h3>
                  <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                    {badge.description}
                  </p>

                  {badge.pointsReward && (
                    <div className="flex items-center gap-1 mt-3 text-sm">
                      <Zap className="h-4 w-4 text-warning" />
                      <span>{badge.pointsReward} points rewarded</span>
                    </div>
                  )}

                  <p className="text-xs text-muted-foreground mt-2">
                    Created {formatDate(badge.createdAt)}
                  </p>

                  <Button
                    variant="outline"
                    className="mt-4 w-full"
                    onClick={() => setAwardDialog({ open: true, badge })}
                  >
                    <Users className="mr-2 h-4 w-4" />
                    Award to User
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Create Badge Dialog */}
      <Dialog open={createDialog} onOpenChange={setCreateDialog}>
        <DialogContent onClose={() => setCreateDialog(false)}>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Award className="h-5 w-5" />
              Create Badge
            </DialogTitle>
            <DialogDescription>
              Create a new achievement badge for users
            </DialogDescription>
          </DialogHeader>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              createMutation.mutate();
            }}
            className="space-y-4"
          >
            <div>
              <label className="text-sm font-medium">Name</label>
              <Input
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="e.g., Top Contributor"
                required
              />
            </div>

            <div>
              <label className="text-sm font-medium">Description</label>
              <Textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Describe how to earn this badge..."
                required
              />
            </div>

            <div>
              <label className="text-sm font-medium">Icon</label>
              <div className="mt-2">
                <IconSelector
                  iconType={(formData.iconType || "emoji") as "emoji" | "image"}
                  iconValue={formData.iconValue || formData.iconUrl || null}
                  onChange={(iconType, iconValue) =>
                    setFormData({
                      ...formData,
                      iconType,
                      iconValue: iconType === "emoji" ? iconValue : null,
                      iconUrl: iconType === "image" ? iconValue : null,
                    })
                  }
                />
              </div>
            </div>

            <div>
              <label className="text-sm font-medium">Criteria Type</label>
              <Input
                value={formData.criteria?.type || ""}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    criteria: {
                      type: e.target.value,
                      threshold: formData.criteria?.threshold || 0,
                      conditions: formData.criteria?.conditions,
                    },
                  })
                }
                placeholder="total_points"
              />
            </div>

            <div>
              <label className="text-sm font-medium">Criteria Threshold</label>
              <Input
                type="number"
                value={formData.criteria?.threshold ?? ""}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    criteria: {
                      type: formData.criteria?.type || "",
                      threshold: e.target.value ? Number(e.target.value) : 0,
                      conditions: formData.criteria?.conditions,
                    },
                  })
                }
                placeholder="100"
              />
            </div>

            <div>
              <label className="text-sm font-medium">Criteria Conditions (JSON)</label>
              <div className="mt-2">
                <ConditionBuilder
                  value={formData.criteria?.conditions || null}
                  onChange={(conditions) =>
                    setFormData({
                      ...formData,
                      criteria: {
                        type: formData.criteria?.type || "",
                        threshold: formData.criteria?.threshold || 0,
                        conditions: conditions || undefined,
                      },
                    })
                  }
                />
              </div>
            </div>

            <div>
              <label className="text-sm font-medium">Points Reward (Optional)</label>
              <Input
                type="number"
                value={formData.pointsReward || ""}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    pointsReward: e.target.value ? parseInt(e.target.value) : undefined,
                  })
                }
                placeholder="e.g., 25"
              />
              <p className="text-xs text-muted-foreground mt-1">
                Points awarded when the badge is earned
              </p>
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setCreateDialog(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={createMutation.isPending}>
                {createMutation.isPending ? (
                  <>
                    <LoadingSpinner size="sm" className="mr-2" />
                    Creating...
                  </>
                ) : (
                  "Create Badge"
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Award Badge Dialog */}
      <Dialog
        open={awardDialog.open}
        onOpenChange={(open) => {
          setAwardDialog({ open, badge: null });
          setUserSearch("");
          setSelectedUser(null);
        }}
      >
        <DialogContent
          onClose={() => {
            setAwardDialog({ open: false, badge: null });
            setUserSearch("");
            setSelectedUser(null);
          }}
        >
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Award className="h-5 w-5" />
              Award Badge
            </DialogTitle>
            <DialogDescription>
              Award &quot;{awardDialog.badge?.name}&quot; to a user
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* User Search */}
            <div>
              <label className="text-sm font-medium">Search User</label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  value={userSearch}
                  onChange={(e) => {
                    setUserSearch(e.target.value);
                    setSelectedUser(null);
                  }}
                  placeholder="Search by name or email..."
                  className="pl-9"
                />
              </div>
            </div>

            {/* User Results */}
            {users && users.length > 0 && !selectedUser && (
              <div className="border rounded-lg max-h-48 overflow-y-auto">
                {users.map((user: User) => (
                  <button
                    key={user.id}
                    onClick={() => {
                      setSelectedUser(user);
                      setUserSearch(`${user.firstName} ${user.lastName}`);
                    }}
                    className="w-full flex items-center gap-3 p-3 hover:bg-muted text-left"
                  >
                    <Avatar
                      src={user.avatarUrl}
                      fallback={`${user.firstName} ${user.lastName}`}
                      size="sm"
                    />
                    <div>
                      <p className="font-medium text-sm">
                        {user.firstName} {user.lastName}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {user.email || user.phone}
                      </p>
                    </div>
                  </button>
                ))}
              </div>
            )}

            {/* Selected User */}
            {selectedUser && (
              <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
                <Avatar
                  src={selectedUser.avatarUrl}
                  fallback={`${selectedUser.firstName} ${selectedUser.lastName}`}
                />
                <div className="flex-1">
                  <p className="font-medium">
                    {selectedUser.firstName} {selectedUser.lastName}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    {selectedUser.email || selectedUser.phone}
                  </p>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    setSelectedUser(null);
                    setUserSearch("");
                  }}
                >
                  Change
                </Button>
              </div>
            )}
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => {
                setAwardDialog({ open: false, badge: null });
                setUserSearch("");
                setSelectedUser(null);
              }}
            >
              Cancel
            </Button>
            <Button
              onClick={() => awardMutation.mutate()}
              disabled={!selectedUser || awardMutation.isPending}
            >
              {awardMutation.isPending ? (
                <>
                  <LoadingSpinner size="sm" className="mr-2" />
                  Awarding...
                </>
              ) : (
                <>
                  <Award className="mr-2 h-4 w-4" />
                  Award Badge
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}