'use client';
import React, { useEffect, useState } from 'react';
import DashboardLayout from '@/components/layout/DashboardLayout';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
// import Contactus from "@/assets/images/Delete.png";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import enums from '@/utils/enums';
import apis from '@/utils/apis';
import { Modal } from '@/components/ui/modal';
import { useGlobalContext } from '@/context/Provider';
import { Button } from '../ui/button';

const AcoountDeleteSideBar = () => {
  const { Toast } = useGlobalContext();
  const [formData, setFormData] = useState({
    message: ''
  });
  const [reason, setReason] = useState('');
  const [isOpen1, setIsOpen1] = useState(false);
  const [reasonList, setReasonList] = useState<any[]>([]);

  const router = useRouter();

  useEffect(() => {
    const fetchReasons = async () => {
      try {
        const res = await apis.Auth.getReport(
          'type=account_delete&page=1&limit=10'
        );
        setReasonList(res?.data || []);
      } catch (error) {
        console.error('Error fetching delete reasons', error);
        Toast.error('Unable to load delete reasons');
      }
    };

    fetchReasons();
  }, []);

  const handleChange = (e: any) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    let payload = {
      report_reason_id: reason,
      delete_description: formData?.message
    };

    try {
      const apiRes = await apis.Auth.deleteAccount(payload);
      if (apiRes) {
        setIsOpen1(false);
        router.push('/auth/login');
        sessionStorage.clear();
        localStorage.clear();
      }
    } catch (error) { }
    setFormData({ message: '' });
  };

  return (
    <div className=" w-full max-w-xl p-6 ">
      <form onSubmit={handleSubmit}>
        <div className="space-y-4">
          <div>
            <label className="mb-4 block ">Reason</label>
            <Select onValueChange={(val: any) => setReason(val)}>
              <SelectTrigger className="w-full rounded-3xl border border-gray-200 px-4 py-3 text-[#828282] focus:outline-none focus:ring-1 focus:ring-gray-300">
                <SelectValue placeholder="Select reason" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {reasonList.map((item: any) => (
                    <SelectItem key={item._id} value={item._id}>
                      {item.reason}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>

          <div>
            <label className="mb-4 block ">Message</label>
            <textarea
              name="message"
              value={formData.message}
              onChange={handleChange}
              placeholder="Please explain us in brief..."
              rows={6}
              className="w-full rounded-lg border border-gray-200 px-4 py-3 focus:outline-none focus:ring-1 focus:ring-gray-300"
              required
              maxLength={220}
            />
          </div>

          <div>
            <Button
              type="submit"
              className="w-full h-11"
              variant={'theme'}
            >
              Delete account
            </Button>
          </div>
        </div>
      </form>
    </div>
  );
};
export default AcoountDeleteSideBar;