"use client";

import React, { useState, useEffect, useCallback } from "react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import {
  getNumberingRuleById,
  resetSequence,
  updateRuleSequence,
  previewNumberingCode,
} from "@/lib/api/numberingRule";
import { NumberingRuleConfig } from "@/types/numbering-rule";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Loader2, RotateCcw, Save, Eye } from "lucide-react";

/**
 * SequenceManagementPanel
 *
 * 채번 규칙의 현재 시퀀스를 직접 관리하는 패널:
 *  - current_sequence 표시
 *  - 임의 값으로 수정 (PUT /sequence)
 *  - Reset 버튼 (POST /reset)
 *  - 다음 코드 미리보기 (POST /preview)
 *
 * admin/systemMng/numberingRuleList 에서 선택된 규칙 옆에 표시.
 */
export interface SequenceManagementPanelProps {
  ruleId: string;
  /** 시퀀스 수정 후 부모에 알림 (목록 refresh 등) */
  onChanged?: () => void;
}

export const SequenceManagementPanel: React.FC<SequenceManagementPanelProps> = ({
  ruleId,
  onChanged,
}) => {
  const [rule, setRule] = useState<NumberingRuleConfig | null>(null);
  const [loading, setLoading] = useState(false);
  // mutation lock — 저장/초기화 동시 실행 방지 (race condition)
  const [mutating, setMutating] = useState<null | "save" | "reset">(null);
  const [draftSequence, setDraftSequence] = useState<string>("");
  const [preview, setPreview] = useState<string>("");
  const [previewing, setPreviewing] = useState(false);

  const loadRule = useCallback(async () => {
    if (!ruleId) return;
    setLoading(true);
    try {
      const resp = await getNumberingRuleById(ruleId);
      if (resp.success && resp.data) {
        setRule(resp.data);
        setDraftSequence(String(resp.data.current_sequence ?? 0));
      }
    } finally {
      setLoading(false);
    }
  }, [ruleId]);

  useEffect(() => {
    loadRule();
  }, [loadRule]);

  const handleSave = async () => {
    if (mutating) return;
    const newSeq = parseInt(draftSequence, 10);
    if (isNaN(newSeq) || newSeq < 0) {
      toast.error("0 이상의 정수를 입력하세요");
      return;
    }
    if (rule?.current_sequence === newSeq) {
      toast.info("현재 시퀀스와 동일합니다");
      return;
    }
    setMutating("save");
    try {
      const resp = await updateRuleSequence(ruleId, newSeq);
      if (resp.success) {
        toast.success(`시퀀스가 ${newSeq} 로 수정되었습니다. 다음 발번부터 ${newSeq + 1} 부터 시작합니다.`);
        await loadRule();
        onChanged?.();
      } else {
        showErrorToast("시퀀스 수정 실패", resp.error);
      }
    } catch (e) {
      showErrorToast("시퀀스 수정 실패", e);
    } finally {
      setMutating(null);
    }
  };

  const handleReset = async () => {
    if (mutating) return;
    if (!window.confirm("시퀀스를 0 으로 초기화 하시겠습니까? 이후 발번부터는 1 부터 시작합니다.")) return;
    setMutating("reset");
    try {
      const resp = await resetSequence(ruleId);
      if (resp.success) {
        toast.success("시퀀스가 초기화되었습니다");
        await loadRule();
        onChanged?.();
      } else {
        showErrorToast("시퀀스 초기화 실패", resp.error);
      }
    } catch (e) {
      showErrorToast("시퀀스 초기화 실패", e);
    } finally {
      setMutating(null);
    }
  };

  const handlePreview = async () => {
    setPreviewing(true);
    try {
      const resp = await previewNumberingCode(ruleId);
      if (resp.success && resp.data?.generatedCode) {
        setPreview(resp.data.generatedCode);
      } else {
        setPreview("");
        showErrorToast("미리보기 실패", resp.error);
      }
    } catch (e) {
      setPreview("");
      showErrorToast("미리보기 실패", e);
    } finally {
      setPreviewing(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center p-6">
        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (!rule) {
    return (
      <div className="p-4 text-sm text-muted-foreground">
        규칙을 불러올 수 없습니다.
      </div>
    );
  }

  const current = rule.current_sequence ?? 0;
  const dirty = String(current) !== draftSequence;

  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-sm font-bold">시퀀스 관리</h3>
          <p className="mt-0.5 text-xs text-muted-foreground">
            {rule.rule_name} ({rule.table_name}.{rule.column_name})
          </p>
        </div>
      </div>

      <div className="grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border border-border bg-card p-3">
        <label className="text-xs font-semibold">현재 시퀀스</label>
        <Input
          type="number"
          min={0}
          value={draftSequence}
          onChange={(e) => setDraftSequence(e.target.value)}
          className="h-8 max-w-[160px] font-mono"
        />
        <div className="flex gap-1.5">
          <Button
            size="sm"
            variant="default"
            disabled={!dirty || mutating !== null}
            onClick={handleSave}
            className="h-8"
          >
            {mutating === "save" ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
            <span className="ml-1 text-xs">저장</span>
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={mutating !== null}
            onClick={handleReset}
            className="h-8"
          >
            {mutating === "reset" ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <RotateCcw className="h-3.5 w-3.5" />
            )}
            <span className="ml-1 text-xs">초기화</span>
          </Button>
        </div>
      </div>

      <div className="flex flex-col gap-2 rounded-md border border-border bg-muted/30 p-3">
        <div className="flex items-center justify-between">
          <span className="text-xs font-semibold">다음 코드 미리보기</span>
          <Button
            size="sm"
            variant="ghost"
            disabled={previewing}
            onClick={handlePreview}
            className="h-7"
          >
            {previewing ? (
              <Loader2 className="h-3 w-3 animate-spin" />
            ) : (
              <Eye className="h-3 w-3" />
            )}
            <span className="ml-1 text-xs">조회</span>
          </Button>
        </div>
        <div className="rounded bg-background p-2 font-mono text-sm">
          {preview || <span className="text-xs text-muted-foreground">'조회' 를 눌러 미리보기</span>}
        </div>
        <p className="text-[10px] text-muted-foreground">
          ※ 미리보기는 시퀀스를 증가시키지 않습니다. 실제 발번은 form 저장 시점에 1 증가합니다.
        </p>
      </div>

      <div className="rounded-md border border-amber-500/30 bg-amber-500/5 p-2.5 text-xs text-amber-900 dark:text-amber-200">
        <p className="font-semibold">⚠ 주의</p>
        <p className="mt-1 leading-relaxed">
          시퀀스를 수동으로 수정하면 이미 발번된 코드와 중복될 수 있습니다. 운영 중인 규칙은 신중히
          변경하세요.
        </p>
      </div>
    </div>
  );
};
