'use client';

import React, { useState } from 'react';
import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useGlobalContext } from '@/context/Provider';
import apis from '@/utils/apis';

interface RequestCategoryModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  rawType?: string;
  storeId?: string;
}

export default function RequestCategoryModal({
  isOpen,
  onClose,
  onSuccess,
  rawType = 'grocery',
  storeId
}: RequestCategoryModalProps) {
  const { Toast } = useGlobalContext();
  const [requestName, setRequestName] = useState('');
  const [requestReason, setRequestReason] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = async (e?: React.FormEvent) => {
    if (e) e.preventDefault();

    if (!requestName.trim()) {
      Toast.error('Category name is required');
      return;
    }

    setIsSubmitting(true);
    try {
      const payload: { category_name: string; note?: string } = {
        category_name: requestName.trim()
      };

      if (requestReason.trim()) {
        payload.note = requestReason.trim();
      }

      const res = await apis.category.request(payload);
      if (res) {
        Toast.success('Category request submitted successfully!');
        setRequestName('');
        setRequestReason('');
        onSuccess();
        onClose();
      }
    } catch (error: any) {
      Toast.error(error || 'Error submitting category request');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200">
        <div className="p-6 border-b border-gray-100 flex justify-between items-center bg-[#F9FAFB]">
          <div>
            <h2 className="text-xl font-bold text-[#1C1D22]">Request Category</h2>
            <p className="text-xs text-gray-500 mt-0.5">Submit category addition request to admin</p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="p-2 hover:bg-gray-200 rounded-full transition-colors cursor-pointer"
          >
            <Plus className="w-5 h-5 rotate-45 text-gray-500" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="flex flex-col">
          <div className="p-6 space-y-5 max-h-[70vh] overflow-y-auto custom-scrollbar">
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-700">
                Category Name <span className="text-red-500">*</span>
              </label>
              <Input
                placeholder="Enter category name (e.g. Organic Snacks)"
                value={requestName}
                onChange={(e) => setRequestName(e.target.value)}
                className="h-12 border-gray-200 bg-gray-50 focus:bg-white transition-all rounded-xl text-sm"
                autoFocus
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-700">
                Note / Reason <span className="text-xs font-normal text-gray-400">(Optional)</span>
              </label>
              <textarea
                rows={3}
                placeholder="Brief description or reason for requesting this category..."
                value={requestReason}
                onChange={(e) => setRequestReason(e.target.value)}
                className="w-full p-3 border border-gray-200 bg-gray-50 focus:bg-white transition-all rounded-xl text-sm focus:outline-none focus:ring-1 focus:ring-[var(--primary-brand)]"
              />
            </div>
          </div>

          <div className="p-6 border-t border-gray-100 bg-[#F9FAFB] flex gap-3">
            <Button
              type="button"
              variant="outline"
              className="flex-1 h-12 rounded-xl border-gray-200 font-semibold cursor-pointer"
              onClick={onClose}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              variant="theme"
              className="flex-1 h-12 rounded-xl font-semibold shadow-lg shadow-[var(--primary-brand)]/20 cursor-pointer"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Submitting...' : 'Submit Request'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}