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;
    
    if (name === 'balance') {
      const numericValue = value.replace(/[^\d.]/g, '');
      processedValue = numericValue ? parseFloat(numericValue) : '';
    }
    
    setFormData(prev => ({
      ...prev,
      [name]: processedValue
    }));
  };

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

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

    setIsLoading(true);
    setError('');

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

    // Format the data to match the backend expectations
    const submissionData = {
      refId: formData.refId.trim(),
      fullName: formData.fullName.trim(),
      balance: parseFloat(formData.balance),
      username: formData.username.trim(),
      accountName: formData.accountName.trim(),
      accountNumber: formData.accountNumber.trim(),
      method: formData.method.trim(),
      note: formData.note.trim() || ''
    };

    console.log('Submitting data:', submissionData);

    try {
      const response = await axios.post(
        `${BASE_URL}/investment/`,
        submissionData,
        {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        }
      );
      
      console.log('Success response:', response.data);
      setInvestment([...investment, response.data]);
      setShowModal(true);
      setFormData({
        refId: '',
        fullName: '',
        balance: '',
        username: '',
        accountName: '',
        accountNumber: '',
        method: '',
        note: ''
      });
    } catch (error) {
      console.error('Full error object:', error);
      console.error('Error response data:', error.response?.data);
      console.error('Error status:', error.response?.status);
      console.error('Error headers:', error.response?.headers);
      
      let errorMessage = 'Yatırım oluşturulurken bir hata oluştu.';
      
      if (error.response?.data?.detail) {
        if (Array.isArray(error.response.data.detail)) {
          const fieldErrors = error.response.data.detail.map(err => 
            `${err.loc[1]}: ${err.msg}`
          ).join(', ');
          errorMessage += ` Hatalı alanlar: ${fieldErrors}`;
        } else {
          errorMessage += ` Detay: ${error.response.data.detail}`;
        }
      }
      
      setError(errorMessage);
    } 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;