"use client";

import { useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PauseCircle, PlayCircle, AlertTriangle } from "lucide-react";
import { patchCompanyStatus } from "@/lib/api/provisioning";
import ModalShell, { ModalBtn } from "./ModalShell";

/**
 * 비활성화 / 재활성화 공용 모달.
 * mode="deactivate": 사유 입력 필수 (감사 로그 용)
 * mode="reactivate": 간단 확인
 */
export default function DeactivateModal({
  companyCode,
  companyName,
  currentStatus,
  onClose,
}: {
  companyCode: string;
  companyName?: string;
  currentStatus: string;
  onClose: () => void;
}) {
  const mode: "deactivate" | "reactivate" = currentStatus === "suspended" ? "reactivate" : "deactivate";
  const [reason, setReason] = useState("");
  const qc = useQueryClient();

  const mutation = useMutation({
    mutationFn: () =>
      patchCompanyStatus(
        companyCode,
        mode === "deactivate" ? "suspended" : "active",
        mode === "deactivate" ? reason : undefined,
      ),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["companies-stats"] });
      qc.invalidateQueries({ queryKey: ["company-audit-log", companyCode] });
      onClose();
    },
  });

  const isDeactivate = mode === "deactivate";

  return (
    <ModalShell
      title={
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          {isDeactivate ? <PauseCircle size={18} strokeWidth={1.75} /> : <PlayCircle size={18} strokeWidth={1.75} />}
          {isDeactivate ? "회사 비활성화" : "회사 재활성화"}
        </span>
      }
      subtitle={companyName || companyCode}
      onClose={onClose}
      width={520}
      footer={
        <>
          <ModalBtn variant="ghost" onClick={onClose}>취소</ModalBtn>
          <ModalBtn
            variant={isDeactivate ? "danger" : "primary"}
            onClick={() => mutation.mutate()}
            disabled={mutation.isPending || (isDeactivate && reason.trim().length < 3)}
          >
            {mutation.isPending
              ? "처리 중..."
              : isDeactivate
                ? "비활성화 실행"
                : "재활성화 실행"}
          </ModalBtn>
        </>
      }
    >
      {isDeactivate ? (
        <>
          <div style={{
            display: "flex",
            gap: 10,
            padding: "0.85rem 0.95rem",
            background: "rgba(var(--v5-amber-rgb), 0.1)",
            border: "1px solid rgba(var(--v5-amber-rgb), 0.35)",
            borderRadius: 8,
            marginBottom: "1rem",
            alignItems: "flex-start",
          }}>
            <AlertTriangle size={18} color="var(--v5-amber)" strokeWidth={1.75} style={{ flexShrink: 0, marginTop: 2 }} />
            <div style={{ fontSize: "0.82rem", color: "var(--v5-text)", lineHeight: 1.5 }}>
              비활성화 시 해당 회사 사용자의 <b>로그인이 즉시 차단</b>됩니다. DB 와 데이터는 보존되며, 언제든 재활성화 가능합니다.
            </div>
          </div>
          <label style={{ display: "block", fontSize: "0.75rem", fontWeight: 600, color: "var(--v5-text-sec)", marginBottom: 6, letterSpacing: "0.05em", textTransform: "uppercase", fontFamily: "var(--v5-font-mono)" }}>
            비활성화 사유 <span style={{ color: "var(--v5-red)" }}>*</span>
          </label>
          <textarea
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            placeholder="예: 결제 미납, 계약 종료, 보안 이슈 등"
            rows={3}
            style={{
              width: "100%",
              padding: "0.55rem 0.7rem",
              background: "var(--v5-surface-solid)",
              border: "1px solid var(--v5-border)",
              borderRadius: 7,
              fontSize: "0.82rem",
              color: "var(--v5-text)",
              fontFamily: "inherit",
              resize: "vertical",
              outline: "none",
            }}
          />
          <div style={{ fontSize: "0.72rem", color: "var(--v5-text-muted)", marginTop: 5 }}>
            감사 로그에 기록되며 나중에 조회 가능합니다. 최소 3자 이상.
          </div>
        </>
      ) : (
        <div style={{ padding: "0.5rem 0", fontSize: "0.88rem", color: "var(--v5-text)", lineHeight: 1.6 }}>
          이 회사를 <b>다시 활성</b>화합니다. 사용자 로그인이 정상화되며, 비활성화 기록은 감사 로그에 남습니다.
        </div>
      )}

      {mutation.isError && (
        <div style={{ fontSize: "0.8rem", color: "var(--v5-red)", marginTop: 10 }}>
          오류: {(mutation.error as Error)?.message}
        </div>
      )}
      {mutation.data?.error && (
        <div style={{ fontSize: "0.8rem", color: "var(--v5-red)", marginTop: 10 }}>
          {String(mutation.data.error)}
        </div>
      )}
    </ModalShell>
  );
}
