'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import { Button } from '../ui/button';
import DeleteDialog from '@/components/ui/deleteModal';

const AcoountDeleteSideBar = () => {
  const { Toast } = useGlobalContext();
  const [formData, setFormData] = useState({
    message: ''
  });
  const [reason, setReason] = useState('');
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [loading, setLoading] = 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: any) {
        console.error('Error fetching delete reasons', error);
        Toast.error(
          error?.response?.body?.message ||
          error?.response?.data?.message ||
          error?.message ||
          'Unable to load delete reasons'
        );
      }
    };

    fetchReasons();
  }, []);

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

  const handleOpenConfirm = (e: React.FormEvent) => {
    e.preventDefault();
    if (!reason) {
      Toast.error('Please select a reason for account deletion.');
      return;
    }
    if (!formData.message.trim()) {
      Toast.error('Please provide a message explaining your reason.');
      return;
    }
    setConfirmOpen(true);
  };

  const handleConfirmDelete = async () => {
    setLoading(true);
    let payload = {
      report_reason_id: reason,
      delete_description: formData?.message
    };

    try {
      const apiRes = await apis.Auth.deleteAccount(payload);
      if (apiRes) {
        Toast.success('Account deleted successfully');
        setConfirmOpen(false);
        sessionStorage.clear();
        localStorage.clear();
        router.push('/auth/login');
      }
    } catch (error: any) {
      Toast.error(
        error?.response?.body?.message ||
        error?.response?.data?.message ||
        error?.message ||
        'Failed to delete account'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="w-full max-w-xl p-6">
      <form onSubmit={handleOpenConfirm}>
        <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>

      <DeleteDialog
        isOpen={confirmOpen}
        onClose={() => setConfirmOpen(false)}
        handleDelete={handleConfirmDelete}
        title="Delete Account"
        description="Are you sure you want to delete your account? This action is permanent and cannot be undone."
        actionButtonText="Yes, Delete Account"
        loading={loading}
      />
    </div>
  );
};
export default AcoountDeleteSideBar;