'use client';

import { useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { toast } from '@/lib/toast';
import {
  Check,
  X,
  RotateCcw,
  Forward,
  Undo2,
  UserPlus,
  Hand,
  HandHelping,
} from 'lucide-react';
import {
  approveTask,
  rejectTask,
  returnTask,
  forwardTask,
  approverWithdrawTask,
  addSignTask,
  claimTask,
  unclaimTask,
} from '@/services/api/approval';

interface ApprovalActionsProps {
  businessType: string;
  businessId: string;
  instanceId?: string;
  taskId?: string;
  canOperate?: boolean;
  allowedActions?: string[];
  previousStages?: Array<{ id: string; name: string }>;
  onSuccess?: () => void;
}

const ADD_SIGN_TYPES = ['BEFORE', 'AFTER', 'PARALLEL'] as const;
type AddSignType = (typeof ADD_SIGN_TYPES)[number];

type SuccessKey = keyof ReturnType<typeof useTranslation>['t']['approvals']['actionPanel']['actionSuccess'];

export function ApprovalActions({
  businessType,
  businessId,
  instanceId,
  taskId,
  canOperate = true,
  allowedActions = ['approve', 'reject'],
  previousStages = [],
  onSuccess,
}: ApprovalActionsProps) {
  const { t } = useTranslation();
  const tp = t.approvals.actionPanel;
  const ta = tp.actionSuccess;
  const tActions = t.approvals.actions;

  const [comment, setComment] = useState('');
  const [returnTarget, setReturnTarget] = useState('');
  const [forwardUserId, setForwardUserId] = useState('');
  const [approverWithdrawReason, setApproverWithdrawReason] = useState('');
  const [addSignUsers, setAddSignUsers] = useState('');
  const [addSignType, setAddSignType] = useState<AddSignType>('PARALLEL');
  const [loading, setLoading] = useState(false);

  const requireTaskId = (): string | null => {
    if (!taskId) {
      toast.error(tp.taskIdRequired);
      return null;
    }
    return taskId;
  };

  const runAction = async (
    fn: () => Promise<unknown>,
    successKey: SuccessKey,
    reset?: () => void,
  ) => {
    if (!instanceId) return;
    setLoading(true);
    try {
      await fn();
      toast.success(ta[successKey]);
      reset?.();
      onSuccess?.();
    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : tp.operationFailed;
      toast.error(tp.operationFailed, { description: message });
    } finally {
      setLoading(false);
    }
  };

  const handleApprove = () => {
    const tid = requireTaskId();
    if (!tid) return;
    runAction(() => approveTask(instanceId!, { taskId: tid, comment }), 'approve', () => setComment(''));
  };

  const handleReject = () => {
    const tid = requireTaskId();
    if (!tid) return;
    if (!comment.trim()) {
      toast.error(tp.rejectReasonRequired);
      return;
    }
    runAction(() => rejectTask(instanceId!, { taskId: tid, comment }), 'reject', () => setComment(''));
  };

  const handleReturn = () => {
    const tid = requireTaskId();
    if (!tid) return;
    if (!returnTarget) {
      toast.error(tp.returnNodeRequired);
      return;
    }
    runAction(
      () => returnTask(instanceId!, {
        taskId: tid,
        targetNodeId: returnTarget,
        comment: comment || tp.returnReasonPlaceholder,
      }),
      'return',
      () => { setComment(''); setReturnTarget(''); },
    );
  };

  const handleForward = () => {
    const tid = requireTaskId();
    if (!tid) return;
    if (!forwardUserId) {
      toast.error(tp.forwardUserRequired);
      return;
    }
    runAction(
      () => forwardTask(instanceId!, { taskId: tid, toUserId: forwardUserId, comment: comment || undefined }),
      'forward',
      () => { setComment(''); setForwardUserId(''); },
    );
  };

  const handleApproverWithdraw = () => {
    const tid = requireTaskId();
    if (!tid) return;
    if (!approverWithdrawReason.trim()) {
      toast.error(tp.approverWithdrawReasonRequired);
      return;
    }
    runAction(
      () => approverWithdrawTask(instanceId!, { taskId: tid, reason: approverWithdrawReason }),
      'approverWithdraw',
      () => setApproverWithdrawReason(''),
    );
  };

  const handleAddSign = () => {
    const tid = requireTaskId();
    if (!tid) return;
    const userIds = addSignUsers.split(',').map((s) => s.trim()).filter(Boolean);
    if (userIds.length === 0) {
      toast.error(tp.addSignUsersRequired);
      return;
    }
    runAction(
      () => addSignTask(instanceId!, { taskId: tid, userIds, type: addSignType, comment: comment || undefined }),
      'addSign',
      () => { setAddSignUsers(''); setComment(''); },
    );
  };

  const handleClaim = () => {
    const tid = requireTaskId();
    if (!tid) return;
    runAction(() => claimTask(instanceId!, { taskId: tid }), 'claim');
  };

  const handleUnclaim = () => {
    const tid = requireTaskId();
    if (!tid) return;
    runAction(() => unclaimTask(instanceId!, { taskId: tid }), 'unclaim');
  };

  if (!canOperate || !instanceId) {
    return null;
  }

  const has = (a: string) => allowedActions.includes(a);

  const addSignTypeLabel: Record<AddSignType, string> = {
    BEFORE: tp.addSignTypeBefore,
    AFTER: tp.addSignTypeAfter,
    PARALLEL: tp.addSignTypeParallel,
  };

  return (
    <div className="space-y-4 p-4 border rounded-lg">
      <h3 className="text-lg font-semibold">{tp.title}</h3>

      <Textarea
        placeholder={tp.commentPlaceholder}
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        rows={3}
      />

      <div className="flex gap-2 flex-wrap">
        {has('approve') && (
          <Button
            onClick={handleApprove}
            disabled={loading}
            className="bg-green-600 hover:bg-green-700"
          >
            <Check className="h-4 w-4 mr-2" />
            {tActions.APPROVE}
          </Button>
        )}

        {has('reject') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="destructive" disabled={loading}>
                <X className="h-4 w-4 mr-2" />
                {tActions.REJECT}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.confirmRejectTitle}</DialogTitle>
              </DialogHeader>
              <Textarea
                placeholder={tp.rejectReasonPlaceholder}
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                rows={4}
              />
              <DialogFooter>
                <Button onClick={handleReject} variant="destructive" disabled={loading}>
                  {tp.confirmReject}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('return') && previousStages.length > 0 && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <RotateCcw className="h-4 w-4 mr-2" />
                {tActions.RETURN}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.returnDialogTitle}</DialogTitle>
              </DialogHeader>
              <Select value={returnTarget} onValueChange={setReturnTarget}>
                <SelectTrigger>
                  <SelectValue placeholder={tp.returnNodePlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  {previousStages.map((stage) => (
                    <SelectItem key={stage.id} value={stage.id}>
                      {stage.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Textarea
                placeholder={tp.returnReasonPlaceholder}
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                rows={3}
              />
              <DialogFooter>
                <Button onClick={handleReturn} disabled={loading}>
                  {tp.confirmReturn}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('forward') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <Forward className="h-4 w-4 mr-2" />
                {tActions.FORWARD}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.forwardDialogTitle}</DialogTitle>
              </DialogHeader>
              <input
                type="text"
                placeholder={tp.forwardUserPlaceholder}
                value={forwardUserId}
                onChange={(e) => setForwardUserId(e.target.value)}
                className="border p-2 rounded w-full"
              />
              <Textarea
                placeholder={tp.forwardReasonPlaceholder}
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                rows={3}
              />
              <DialogFooter>
                <Button onClick={handleForward} disabled={loading}>
                  {tp.confirmForward}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('approver-withdraw') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <Undo2 className="h-4 w-4 mr-2" />
                {tActions.APPROVER_WITHDRAW}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.approverWithdrawDialogTitle}</DialogTitle>
              </DialogHeader>
              <Textarea
                placeholder={tp.approverWithdrawReasonPlaceholder}
                value={approverWithdrawReason}
                onChange={(e) => setApproverWithdrawReason(e.target.value)}
                rows={3}
              />
              <DialogFooter>
                <Button onClick={handleApproverWithdraw} disabled={loading}>
                  {tp.confirmApproverWithdraw}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('add-sign') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <UserPlus className="h-4 w-4 mr-2" />
                {tActions.ADD_SIGN}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.addSignDialogTitle}</DialogTitle>
              </DialogHeader>
              <input
                type="text"
                placeholder={tp.addSignUserPlaceholder}
                value={addSignUsers}
                onChange={(e) => setAddSignUsers(e.target.value)}
                className="border p-2 rounded w-full"
              />
              <Select
                value={addSignType}
                onValueChange={(v) => setAddSignType(v as AddSignType)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {ADD_SIGN_TYPES.map((type) => (
                    <SelectItem key={type} value={type}>
                      {addSignTypeLabel[type]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Textarea
                placeholder={tp.commentPlaceholder}
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                rows={2}
              />
              <DialogFooter>
                <Button onClick={handleAddSign} disabled={loading}>
                  {tp.confirmAddSign}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('claim') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <Hand className="h-4 w-4 mr-2" />
                {tActions.CLAIM}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.claimConfirmTitle}</DialogTitle>
              </DialogHeader>
              <p className="text-sm text-muted-foreground">{tp.claimConfirmDesc}</p>
              <DialogFooter>
                <Button onClick={handleClaim} disabled={loading}>
                  {tp.confirmClaim}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}

        {has('unclaim') && (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline" disabled={loading}>
                <HandHelping className="h-4 w-4 mr-2" />
                {tActions.UNCLAIM}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{tp.unclaimConfirmTitle}</DialogTitle>
              </DialogHeader>
              <p className="text-sm text-muted-foreground">{tp.unclaimConfirmDesc}</p>
              <DialogFooter>
                <Button onClick={handleUnclaim} disabled={loading}>
                  {tp.confirmUnclaim}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}
      </div>
    </div>
  );
}