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 [investment, setInvestment] = useState([]);
  const [formData, setFormData] = useState({
    refId: '',
    fullName: '',
    balance: '',
    username: '',
    accountName: '',
    accountNumber: '',
    method: '',
    note: ''
  });
  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 } = e.target;
    let processedValue = value;
    
    // Convert balance to float if it's the balance field
    if (name === 'balance') {
      // Remove any non-numeric characters except decimal point
      const numericValue = value.replace(/[^\d.]/g, '');
      processedValue = numericValue ? parseFloat(numericValue) : '';
    }
    
    setFormData(prev => ({
      ...prev,
      [name]: processedValue
    }));
  };

  const validateForm = () => {
    if (!formData.refId) return "Referans seçimi zorunludur";
    if (!formData.fullName) return "Ad Soyad alanı zorunludur";
    if (!formData.balance || formData.balance <= 0) return "Geçerli bir miktar giriniz";
    if (!formData.username) return "Kullanıcı adı zorunludur";
    if (!formData.accountName) return "Hesap adı zorunludur";
    if (!formData.accountNumber) return "Hesap numarası zorunludur";
    if (!formData.method) return "Ödeme yöntemi zorunludur";
    return null;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Validate form
    const validationError = validateForm();
    if (validationError) {
      setError(validationError);
      return;
    }

    setIsLoading(true);
    setError('');

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

    // Format the data according to the API requirements
    const submissionData = {
      refId: formData.refId,
      fullName: formData.fullName.trim(),
      balance: parseFloat(formData.balance),
      username: formData.username.trim(),
      accountName: formData.accountName.trim(),
      accountNumber: formData.accountNumber.trim(),
      method: formData.method,
      note: formData.note.trim() || '' // Ensure note is never undefined
    };

    try {
      const response = await axios.post(`${BASE_URL}/investment/`, submissionData, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });
      
      setInvestment([...investment, response.data]);
      setShowModal(true);
      setFormData({
        refId: '',
        fullName: '',
        balance: '',
        username: '',
        accountName: '',
        accountNumber: '',
        method: '',
        note: ''
      });
    } catch (error) {
      console.error("Error:", error.response?.data);
      setError(
        error.response?.data?.detail || 
        'Yatırım oluşturulurken bir hata oluştu. Lütfen tüm alanları kontrol ediniz.'
      );
    } finally {
      setIsLoading(false);
    }
  };

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

  if (!show) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <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">
            <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
                  maxLength={100}
                />
              </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"
                  step="0.01"
                  min="0.01"
                  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
                  maxLength={50}
                />
              </div>
            </div>

            <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
                  maxLength={100}
                />
              </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
                  maxLength={50}
                />
              </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"
                  maxLength={500}
                />
              </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 py-2 rounded-md hover:bg-emerald-600 disabled:opacity-50 text-sm"
            >
              {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 py-2 rounded-md hover:bg-red-600 disabled:opacity-50 text-sm"
            >
              Kapat
            </button>
          </div>
        </form>
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <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;