"use client";

import { useState } from "react";
import ConfirmModal from "../common/ConfirmModal";

const REASONS = [
  "Suspicious activity detected",
  "Multiple order violations",
  "Misuse of platform offers",
  "Abusive behavior / policy violation",
  "Customer request",
  "Fake or incomplete information",
  "Other",
];

export default function SuspendSellerModal({
  open,
  count,
  loading = false,
  onClose,
  onConfirm,
}: {
  open: boolean;
  count: number;
  loading?: boolean;
  onClose: () => void;
  onConfirm: (reasons: string[], note: string) => void;
}) {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [note, setNote] = useState("");
  const isBulk = count > 1;

  const toggleReason = (reason: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(reason)) next.delete(reason);
      else next.add(reason);
      return next;
    });
  };

  const handleClose = () => {
    setSelected(new Set());
    setNote("");
    onClose();
  };

  const handleConfirm = () => {
    onConfirm(Array.from(selected), note);
    setSelected(new Set());
    setNote("");
  };

  const canConfirm =
    selected.size > 0 &&
    (!selected.has("Other") || note.trim().length > 0) &&
    !loading;

  return (
    <ConfirmModal
      open={open}
      title={isBulk ? "Suspend Selected Sellers" : "Suspend Seller?"}
      description={
        isBulk
          ? "Are you sure you want to suspend these Seller accounts? This will prevent them from accessing the platform."
          : "Are you sure you want to suspend this Seller's account? This will prevent them from accessing the platform."
      }
      confirmLabel={loading ? "Suspending..." : "Confirm Suspend"}
      confirmButtonClassName="bg-[#DC2626] hover:bg-[#B91C1C]"
      confirmDisabled={!canConfirm}
      onClose={handleClose}
      onConfirm={handleConfirm}
      width="560px"
      maxHeight="596px"
    >
      <p className="mt-5 text-[14px] font-semibold text-[#101828]">Select Reason for Suspension</p>
      <div className="mt-2.5 space-y-2.5">
        {REASONS.map((reason) => (
          <label key={reason} className="flex cursor-pointer select-none items-center gap-2.5 text-[13px] text-[#344054]">
            <input
              type="checkbox"
              checked={selected.has(reason)}
              onChange={() => toggleReason(reason)}
              className="h-4 w-4 cursor-pointer rounded accent-[#1657D9]"
            />
            {reason}
          </label>
        ))}
      </div>

      {selected.has("Other") && (
        <div className="mt-4">
          <div className="flex items-center justify-between">
            <label className="text-[13px] font-medium text-[#344054]">Reason Details <span className="text-[#DC2626]">*</span></label>
            <span className="text-[11px] text-[#98A2B3]">(Character Limit: 250)</span>
          </div>
          <textarea
            value={note}
            onChange={(e) => setNote(e.target.value.slice(0, 250))}
            placeholder="Please share specific reason details..."
            rows={3}
            className="mt-1.5 w-full resize-none rounded-lg border border-[#D0D5DD] px-3 py-2 text-[13px] text-[#101828] outline-none placeholder:text-[#98A2B3] focus:border-[#1657D9]"
          />
        </div>
      )}
    </ConfirmModal>
  );
}