import { useEffect, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, Loader2, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/contexts/AuthContext";
import { detailFromApiError } from "@/shared/api/client";
import {
  deleteAdminApplicationResult,
  type AdminDecision,
  upsertAdminApplicationResult,
  fetchAdminApplicationResult,
} from "@/lib/applicationAdminResultApi";
import { invalidateAfterAdminApplicationResultChange } from "@/components/admin/result/invalidateAdminApplicationResultQueries";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { cn } from "@/lib/utils";

function DecisionToggle(props: {
  value: AdminDecision;
  onChange: (v: AdminDecision) => void;
  disabled?: boolean;
}) {
  const { value, onChange, disabled } = props;
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        type="button"
        variant={value === "approved" ? "default" : "outline"}
        className={cn(value === "approved" && "bg-green-600 hover:bg-green-600/90")}
        disabled={disabled}
        onClick={() => onChange("approved")}
      >
        <Check className="mr-2 h-4 w-4" aria-hidden />
        Duyệt
      </Button>
      <Button
        type="button"
        variant={value === "rejected" ? "destructive" : "outline"}
        disabled={disabled}
        onClick={() => onChange("rejected")}
      >
        <X className="mr-2 h-4 w-4" aria-hidden />
        Từ chối
      </Button>
    </div>
  );
}

/**
 * Lets an **admin** create / read / update / delete adjudication outcomes for a submitted application (`applicationId`).
 * Syncs backend `initiatives.status` (approved | rejected).
 */
export function ResultManager() {
  const { hasRole } = useAuth();
  const queryClient = useQueryClient();

  const [applicationIdInput, setApplicationIdInput] = useState("");
  const [loadedId, setLoadedId] = useState("");

  const [decision, setDecision] = useState<AdminDecision>("approved");
  const [feedback, setFeedback] = useState("");
  const [rationale, setRationale] = useState("");

  const canUse = hasRole("admin");

  const resultQuery = useQuery({
    queryKey: ["admin-application-result", loadedId],
    queryFn: () => fetchAdminApplicationResult(loadedId),
    enabled: Boolean(canUse && loadedId.trim()),
  });

  useEffect(() => {
    if (!loadedId.trim() || !resultQuery.isSuccess) return;
    const row = resultQuery.data;
    if (!row) {
      setDecision("approved");
      setFeedback("");
      setRationale("");
      return;
    }
    setDecision(row.decision);
    setFeedback(row.feedback ?? "");
    setRationale(row.rationale ?? "");
  }, [loadedId, resultQuery.isSuccess, resultQuery.data]);

  const existsOnServer = resultQuery.data != null;

  const saveMutation = useMutation({
    mutationFn: async () => {
      const id = loadedId.trim();
      const payload = {
        decision,
        feedback: feedback.trim(),
        rationale: rationale.trim() || null,
      };
      return upsertAdminApplicationResult(id, payload);
    },
    onSuccess: async () => {
      toast.success("Đã lưu kết quả.");
      await invalidateAfterAdminApplicationResultChange(queryClient, loadedId);
    },
    onError: (err) => {
      toast.error(detailFromApiError(err, "Không lưu được kết quả."));
    },
  });

  const deleteMutation = useMutation({
    mutationFn: () => deleteAdminApplicationResult(loadedId.trim()),
    onSuccess: async () => {
      toast.success("Đã xóa kết quả (hồ sơ trở về trạng thái đã nộp).");
      await invalidateAfterAdminApplicationResultChange(queryClient, loadedId);
      setDecision("approved");
      setFeedback("");
      setRationale("");
    },
    onError: (err) => {
      toast.error(detailFromApiError(err, "Không xóa được kết quả."));
    },
  });

  const handleLoad = () => {
    const id = applicationIdInput.trim();
    if (!id) {
      toast.message("Nhập mã hồ sơ (applicationId).");
      return;
    }
    setLoadedId(id);
  };

  if (!canUse) {
    return null;
  }

  const busy = resultQuery.isFetching || saveMutation.isPending || deleteMutation.isPending;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">Quản lý kết quả duyệt (quản trị)</CardTitle>
        <CardDescription>
          Nhập mã hồ sơ như trong bảng đã nộp (ví dụ <code className="text-xs bg-muted px-1 rounded">sub-…</code>), chọn{' '}
          <strong>Duyệt</strong> hoặc <strong>Từ chối</strong>, nhập nhận xét và lý do — lưu vào cơ sở dữ liệu.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
          <div className="grow space-y-2">
            <Label htmlFor="result-manager-app-id">Mã hồ sơ (applicationId)</Label>
            <Input
              id="result-manager-app-id"
              value={applicationIdInput}
              onChange={(e) => setApplicationIdInput(e.target.value)}
              placeholder="sub-xxxx… hoặc mã CASE"
              autoComplete="off"
            />
          </div>
          <Button type="button" variant="secondary" onClick={handleLoad} disabled={busy}>
            {resultQuery.isFetching && loadedId ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
            Tải dữ liệu
          </Button>
        </div>

        {loadedId ? (
          <>
            {resultQuery.isError ? (
              <p className="text-sm text-destructive">{detailFromApiError(resultQuery.error, "Không tải được kết quả.")}</p>
            ) : null}

            {resultQuery.isSuccess ? (
              <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm space-y-1">
                <p>
                  <span className="text-muted-foreground">Trạng thái bản ghi: </span>
                  <strong>{resultQuery.data ? "Đã có kết quả — có thể sửa hoặc xóa" : "Chưa có — tạo mới khi Lưu"}</strong>
                </p>
                {resultQuery.data?.applicationName ? (
                  <p>
                    <span className="text-muted-foreground">Tên (từ hồ sơ): </span>
                    {resultQuery.data.applicationName}
                  </p>
                ) : null}
                {resultQuery.data?.updatedByFullName ? (
                  <p>
                    <span className="text-muted-foreground">Người đánh giá (lần cập nhật cuối): </span>
                    <strong>{resultQuery.data.updatedByFullName}</strong>
                  </p>
                ) : null}
              </div>
            ) : null}

            <div className="space-y-3">
              <Label>Quyết định</Label>
              <DecisionToggle value={decision} onChange={setDecision} disabled={busy} />
            </div>

            <div className="space-y-2">
              <Label htmlFor="result-feedback">Nhận xét / phản hồi</Label>
              <Textarea
                id="result-feedback"
                rows={4}
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="Nội dung gửi ứng viên (ghi rõ điểm mạnh, yêu cầu chỉnh sửa, v.v.)"
                disabled={busy}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="result-rationale">
                Lý do & chi tiết (duyệt hoặc từ chối) <span className="text-muted-foreground font-normal">— tùy chọn</span>
              </Label>
              <Textarea
                id="result-rationale"
                rows={4}
                value={rationale}
                onChange={(e) => setRationale(e.target.value)}
                placeholder="Tiêu chí căn cứ, trích Phiếu đánh giá, hoặc lý do từ chối cụ thể…"
                disabled={busy}
              />
            </div>

            <div className="flex flex-wrap gap-2">
              <Button
                type="button"
                onClick={() => saveMutation.mutate()}
                disabled={busy || !resultQuery.isSuccess}
              >
                {(saveMutation.isPending || resultQuery.isFetching) && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {existsOnServer ? "Cập nhật kết quả" : "Lưu kết quả mới"}
              </Button>

              {existsOnServer ? (
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button type="button" variant="outline" className="text-destructive border-destructive/40" disabled={busy}>
                      <Trash2 className="mr-2 h-4 w-4" />
                      Xóa kết quả
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Xóa kết quả đã lưu?</AlertDialogTitle>
                      <AlertDialogDescription>
                        Hồ sơ sẽ trở lại trạng thái đã nộp (submitted). Thao tác này không xóa dữ liệu bản nháp.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Hủy</AlertDialogCancel>
                      <AlertDialogAction
                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                        onClick={() => deleteMutation.mutate()}
                      >
                        Xóa
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              ) : null}
            </div>
          </>
        ) : (
          <p className="text-sm text-muted-foreground">Nhập mã hồ sơ và bấm « Tải dữ liệu » để bắt đầu.</p>
        )}
      </CardContent>
    </Card>
  );
}
