"use client";

import { useState } from "react";
import { FiCheck } from "react-icons/fi";
import Button from "../../../../ui/Button";


type CreditAction = "add" | "deduct" | null;

export default function ManualCreditAdjustment() {
  const [activeAction, setActiveAction] = useState<CreditAction>(null);
  const [credit, setCredit] = useState("");

  const handleSubmit = () => {
    if (!credit) return;

    console.log({
      type: activeAction,
      credit,
    });

    setCredit("");
    setActiveAction(null);
  };

  return (
    <div className="mt-5">
      <h3 className="mb-4 text-lg font-medium text-heading">
        Manual Credit Adjustment
      </h3>

      <div className="flex flex-wrap gap-4">
            <Button
                type="button"
                variant={activeAction === "add" ? "primary" : "white"}
                onClick={() => setActiveAction("add")}
                buttonClassName="shadow-none!"
                BtnInnerclassName="!px-6 !py-3.5"
                >
                Add Credits
            </Button>

            <Button
                type="button"
                variant={activeAction === "deduct" ? "primary" : "white"}
                onClick={() => setActiveAction("deduct")}
                buttonClassName="shadow-none!"
                BtnInnerclassName="!px-6 !py-3.5"
                >
                Deduct Credits
            </Button>
      </div>

      {activeAction && (
        <div className="mt-4 max-w-86 glass-card-v2 rounded-xl p-2.5">
          <label className="mb-2 block text-sm font-medium text-text">
            {activeAction === "add"
              ? "Add credit"
              : "Deduct credit"}
          </label>

          <div className="flex h-14 items-center rounded-xl border border-[#E7E3F2] bg-white px-4">
            <input
              type="number"
              value={credit}
              onChange={(e) => setCredit(e.target.value)}
              placeholder="Enter credit"
              className="w-full bg-transparent text-base text-heading outline-none placeholder:text-[#9B96AA]"
            />

            <Button
              type="button"
              onClick={handleSubmit}
              buttonClassName="!min-h-0 !p-0 bg-transparent! shadow-none! hover:bg-transparent! p-0!"
              BtnInnerclassName="bg-white! p-1.5! text-white!"
            >
              <FiCheck
                size={16}
                className="text-white"
              />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}