import React, { useState, useEffect } from 'react';
import axios from 'axios';

const BASE_URL = "http://localhost:8000";

const InvestmentForm = ({ show, onClose, title }) => {
  const [refs, setRefs] = useState([]);
  const [formData, setFormData] = useState({
    refId: '',
    fullName: '',
    balance: '',
    username: '',
    accountName: '',
    accountNumber: '',
    method: '',
    note: '',
    investmentStatus: 'Beklemede'
  });
  const [isLoading, setIsLoading] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchRefs = async () => {
      const token = localStorage.getItem('token');
      try {
        const response = await axios.get(`${BASE_URL}/refs/`, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });
        setRefs(response.data);
      } catch (error) {
        console.error("Error fetching refs:", error);
        setError(error.response?.data?.detail || "Failed to load references");
      }
    };
    fetchRefs();
  }, []);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    const token = localStorage.getItem('token');

    try {
      await axios.post(`${BASE_URL}/investment/`, formData, {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        }
      });

      setShowModal(true);
      
      setFormData({
        refId: '',
        fullName: '',
        balance: '',
        username: '',
        accountName: '',
        accountNumber: '',
        method: '',
        note: '',
        investmentStatus: 'Beklemede'
      });
      
    } catch (error) {
      console.error("Error:", error);
      setError(error.response?.data?.detail || 'An error occurred during investment creation');
    } finally {
      setIsLoading(false);
    }
  };

  const handleCloseModal = () => {
    setShowModal(false);
    window.location.reload();
  };

  if (!show) return null;

  return (
    <div style={{
      zIndex: '9999',
    }} className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-lg w-full max-w-2xl">
        <div className="bg-emerald-600 p-4 rounded-t-lg">
          <h1 className="text-white font-bold text-xl text-center">{title}</h1>
        </div>

        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-4 mx-6">
            <span className="block sm:inline">{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Basic Information */}
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-bold mb-2">Referans</label>
                <select
                  name="refId"
                  value={formData.refId}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  required
                >
                  <option value="">Seçiniz</option>
                  {refs.map(ref => (
                    <option key={ref.refId} value={ref.refId}>
                      {ref.refName}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Ad Soyad</label>
                <input
                  type="text"
                  name="fullName"
                  value={formData.fullName}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  placeholder="Ad Soyad"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Miktar</label>
                <input
                  type="number"
                  name="balance"
                  value={formData.balance}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  placeholder="0.00"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Kullanıcı Adı</label>
                <input
                  type="text"
                  name="username"
                  value={formData.username}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  placeholder="Kullanıcı Adı"
                  required
                />
              </div>
            </div>

            {/* Additional Information */}
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-bold mb-2">Hesap Adı</label>
                <input
                  type="text"
                  name="accountName"
                  value={formData.accountName}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  placeholder="Hesap Adı"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Hesap Numarası</label>
                <input
                  type="text"
                  name="accountNumber"
                  value={formData.accountNumber}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  placeholder="Hesap Numarası"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Ödeme Yöntemi</label>
                <select
                  name="method"
                  value={formData.method}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  required
                >
                  <option value="">Seçiniz</option>
                  <option value="Havale">Havale</option>
                  <option value="EFT">EFT</option>
                  <option value="FAST">FAST</option>
                  <option value="Kredi Kartı">Kredi Kartı</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-bold mb-2">Not</label>
                <textarea
                  name="note"
                  value={formData.note}
                  onChange={handleChange}
                  className="w-full p-2 border rounded-md"
                  rows="3"
                  placeholder="Notunuz"
                />
              </div>
            </div>
          </div>

          <div className="flex justify-end gap-4 pt-4">
            <button
              type="submit"
              disabled={isLoading}
              className="bg-emerald-500 text-white px-4 text-xs py-2 rounded-md hover:bg-emerald-600 disabled:opacity-50"
            >
              {isLoading ? 'Yatırım Yapılıyor...' : 'Yatırım Yap'}
            </button>

            <button
              type="button"
              onClick={onClose}
              disabled={isLoading}
              className="bg-red-500 text-white px-4 text-xs py-2 rounded-md hover:bg-red-600 disabled:opacity-50"
            >
              Kapat
            </button>
          </div>

          <div className="text-center text-sm text-gray-600 bg-gray-100 p-4 rounded-md mt-6">
            <p className="font-semibold">Lütfen tüm alanları eksiksiz doldurunuz</p>
            <p>Yatırımınız onaylandıktan sonra hesabınıza yansıyacaktır</p>
            <p>Dem<span className="font-bold">Settle ®</span></p>
          </div>
        </form>
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="bg-white p-6 rounded-lg">
            <h2 className="text-xl font-bold mb-4">Yatırım Başarıyla Oluşturuldu</h2>
            <button
              onClick={handleCloseModal}
              className="bg-emerald-500 text-white px-4 py-2 rounded-md hover:bg-emerald-600"
            > 
              Kapat
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default InvestmentForm;