"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 { LoadingPage, LoadingSpinner } from "@/components/ui/loading";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { gamificationApi, PointType, CreatePointTypeDto } from "@/lib/api-client";
import { IconSelector } from "@/components/gamification/icon-selector";
import { Plus } from "lucide-react";

const emptyForm: CreatePointTypeDto = {
  key: "",
  name: "",
  iconType: "emoji",
  iconValue: null,
  isActive: true,
  displayOrder: 0,
};

export default function PointTypesPage() {
  const queryClient = useQueryClient();
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<PointType | null>(null);
  const [formData, setFormData] = useState<CreatePointTypeDto>(emptyForm);

  const { data: pointTypes, isLoading } = useQuery({
    queryKey: ["point-types"],
    queryFn: async () => {
      const response = await gamificationApi.getPointTypes();
      return response.data;
    },
  });

  const createMutation = useMutation({
    mutationFn: () => gamificationApi.createPointType(formData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["point-types"] });
      setDialogOpen(false);
      setFormData(emptyForm);
    },
  });

  const updateMutation = useMutation({
    mutationFn: () => {
      if (!editing) throw new Error("Missing point type");
      return gamificationApi.updatePointType(editing.id, formData);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["point-types"] });
      setDialogOpen(false);
      setEditing(null);
      setFormData(emptyForm);
    },
  });

  const openCreate = () => {
    setEditing(null);
    setFormData(emptyForm);
    setDialogOpen(true);
  };

  const openEdit = (pointType: PointType) => {
    setEditing(pointType);
    setFormData({
      key: pointType.key,
      name: pointType.name,
      iconType: pointType.iconType,
      iconValue: pointType.iconValue || null,
      isActive: pointType.isActive,
      displayOrder: pointType.displayOrder,
    });
    setDialogOpen(true);
  };

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

  return (
    <div className="space-y-6">
      <PageHeader title="Point Types" description="Manage point currencies and icons">
        <Button onClick={openCreate}>
          <Plus className="mr-2 h-4 w-4" />
          Create Point Type
        </Button>
      </PageHeader>

      {pointTypes?.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <h3 className="text-lg font-semibold">No point types yet</h3>
            <p className="text-muted-foreground mt-1">
              Create your first point currency to start awarding points
            </p>
            <Button className="mt-4" onClick={openCreate}>
              <Plus className="mr-2 h-4 w-4" />
              Create Point Type
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {pointTypes?.map((pointType: PointType) => (
            <Card key={pointType.id} className="overflow-hidden">
              <CardContent className="pt-6">
                <div className="flex items-center gap-4">
                  <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center">
                    {pointType.iconType === "emoji" && pointType.iconValue ? (
                      <span className="text-2xl">{pointType.iconValue}</span>
                    ) : pointType.iconType === "image" && pointType.iconValue ? (
                      <img src={pointType.iconValue} alt={pointType.name} className="h-8 w-8 object-contain" />
                    ) : (
                      <span className="text-sm text-muted-foreground">N/A</span>
                    )}
                  </div>
                  <div className="flex-1">
                    <p className="font-semibold">{pointType.name}</p>
                    <p className="text-xs text-muted-foreground">{pointType.key}</p>
                    <p className="text-xs text-muted-foreground mt-1">
                      Order {pointType.displayOrder} · {pointType.isActive ? "Active" : "Inactive"}
                    </p>
                  </div>
                </div>
                <Button variant="outline" className="mt-4 w-full" onClick={() => openEdit(pointType)}>
                  Edit
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent onClose={() => setDialogOpen(false)}>
          <DialogHeader>
            <DialogTitle>{editing ? "Edit Point Type" : "Create Point Type"}</DialogTitle>
            <DialogDescription>Set the name, key, and icon for this point type.</DialogDescription>
          </DialogHeader>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (editing) {
                updateMutation.mutate();
              } else {
                createMutation.mutate();
              }
            }}
            className="space-y-4"
          >
            <div>
              <label className="text-sm font-medium">Key</label>
              <Input
                value={formData.key}
                onChange={(e) => setFormData({ ...formData, key: e.target.value })}
                placeholder="engagement"
                required
                disabled={!!editing}
              />
            </div>

            <div>
              <label className="text-sm font-medium">Name</label>
              <Input
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="Engagement"
                required
              />
            </div>

            <div>
              <label className="text-sm font-medium">Display Order</label>
              <Input
                type="number"
                value={formData.displayOrder ?? 0}
                onChange={(e) =>
                  setFormData({ ...formData, displayOrder: Number(e.target.value) || 0 })
                }
              />
            </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 || null}
                  onChange={(iconType, iconValue) => setFormData({ ...formData, iconType, iconValue })}
                />
              </div>
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={createMutation.isPending || updateMutation.isPending}>
                {createMutation.isPending || updateMutation.isPending ? (
                  <>
                    <LoadingSpinner size="sm" className="mr-2" />
                    Saving...
                  </>
                ) : editing ? (
                  "Save Changes"
                ) : (
                  "Create Point Type"
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}