"use client";

import { useMemo, 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,
  RewardRule,
  CreateRewardRuleDto,
  PointType,
} from "@/lib/api-client";
import { ConditionBuilder } from "@/components/gamification/condition-builder";
import { ActionBuilder, PointAction } from "@/components/gamification/action-builder";
import { Plus } from "lucide-react";

const emptyForm: CreateRewardRuleDto = {
  name: "",
  eventKey: "",
  conditions: null,
  actions: null,
  dailyLimit: undefined,
  cooldownSeconds: undefined,
  isActive: true,
};

export default function RewardRulesPage() {
  const queryClient = useQueryClient();
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<RewardRule | null>(null);
  const [formData, setFormData] = useState<CreateRewardRuleDto>(emptyForm);
  const [pointActions, setPointActions] = useState<PointAction[]>([]);

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

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

  const pointTypeKeys = useMemo(
    () => (pointTypes || []).map((type: PointType) => type.key).join(", "),
    [pointTypes],
  );

  const createMutation = useMutation({
    mutationFn: () =>
      gamificationApi.createRewardRule({
        ...formData,
        actions: pointActions.length > 0 ? { points: pointActions } : null,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["reward-rules"] });
      setDialogOpen(false);
      setFormData(emptyForm);
      setPointActions([]);
    },
  });

  const updateMutation = useMutation({
    mutationFn: () => {
      if (!editing) throw new Error("Missing rule");
      return gamificationApi.updateRewardRule(editing.id, {
        ...formData,
        actions: pointActions.length > 0 ? { points: pointActions } : null,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["reward-rules"] });
      setDialogOpen(false);
      setEditing(null);
      setFormData(emptyForm);
      setPointActions([]);
    },
  });

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

  const openEdit = (rule: RewardRule) => {
    setEditing(rule);
    setFormData({
      name: rule.name,
      eventKey: rule.eventKey,
      conditions: rule.conditions || null,
      actions: rule.actions || null,
      dailyLimit: rule.dailyLimit ?? undefined,
      cooldownSeconds: rule.cooldownSeconds ?? undefined,
      isActive: rule.isActive,
    });
    const existingPoints = (rule.actions as any)?.points;
    setPointActions(Array.isArray(existingPoints) ? existingPoints : existingPoints ? [existingPoints] : []);
    setDialogOpen(true);
  };

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

  return (
    <div className="space-y-6">
      <PageHeader title="Reward Rules" description="Define automatic rewards for platform events">
        <Button onClick={openCreate}>
          <Plus className="mr-2 h-4 w-4" />
          Create Rule
        </Button>
      </PageHeader>

      {rules?.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <h3 className="text-lg font-semibold">No rules yet</h3>
            <p className="text-muted-foreground mt-1">
              Create your first rule to automatically award points.
            </p>
            <Button className="mt-4" onClick={openCreate}>
              <Plus className="mr-2 h-4 w-4" />
              Create Rule
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {rules?.map((rule: RewardRule) => (
            <Card key={rule.id} className="overflow-hidden">
              <CardContent className="pt-6 space-y-2">
                <div>
                  <p className="font-semibold">{rule.name}</p>
                  <p className="text-xs text-muted-foreground">{rule.eventKey}</p>
                </div>
                <p className="text-xs text-muted-foreground">
                  {rule.isActive ? "Active" : "Inactive"} · Daily limit{" "}
                  {rule.dailyLimit ?? "none"} · Cooldown{" "}
                  {rule.cooldownSeconds ? `${rule.cooldownSeconds}s` : "none"}
                </p>
                <Button variant="outline" className="w-full mt-2" onClick={() => openEdit(rule)}>
                  Edit
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent onClose={() => setDialogOpen(false)}>
          <DialogHeader>
            <DialogTitle>{editing ? "Edit Rule" : "Create Rule"}</DialogTitle>
            <DialogDescription>
              Define the event trigger and point actions. Available point keys: {pointTypeKeys || "none"}.
            </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">Name</label>
              <Input
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="Post created"
                required
              />
            </div>

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

            <div>
              <label className="text-sm font-medium">Daily Limit</label>
              <Input
                type="number"
                value={formData.dailyLimit ?? ""}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    dailyLimit: e.target.value ? Number(e.target.value) : undefined,
                  })
                }
                placeholder="Leave blank for no limit"
              />
            </div>

            <div>
              <label className="text-sm font-medium">Cooldown (seconds)</label>
              <Input
                type="number"
                value={formData.cooldownSeconds ?? ""}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    cooldownSeconds: e.target.value ? Number(e.target.value) : undefined,
                  })
                }
                placeholder="Leave blank for no cooldown"
              />
            </div>

            <div>
              <label className="text-sm font-medium">Point Actions</label>
              <div className="mt-2">
                <ActionBuilder value={pointActions} onChange={setPointActions} />
              </div>
            </div>

            <div>
              <label className="text-sm font-medium">Conditions (JSON)</label>
              <div className="mt-2">
                <ConditionBuilder
                  value={formData.conditions || null}
                  onChange={(conditions) => setFormData({ ...formData, conditions })}
                />
              </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 Rule"
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}