import React, { useEffect, useState } from 'react';
import { FiFilter, FiX, FiRefreshCw } from 'react-icons/fi';
import { Card, CardContent } from '@/components/ui/card';
import axios from 'axios';
import { format } from 'date-fns';

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

const YatırımContent = ({ onFiltersChange }) => {
    const [filters, setFilters] = useState({
        account: '',
        status: '',
        dateRange: {
            start: '',
            end: ''
        },
        amountRange: {
            min: '',
            max: ''
        }
    });

    const [showFilters, setShowFilters] = useState(true);
    const [loading, setLoading] = useState(false);
    const [autoRefresh, setAutoRefresh] = useState(true);
    const [accounts, setAccounts] = useState([]);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetchAccounts();
        const interval = autoRefresh ? setInterval(fetchAccounts, 30000) : null;
        return () => interval && clearInterval(interval);
    }, [autoRefresh]);

    useEffect(() => {
        // Notify parent component about filter changes
        onFiltersChange(filters);
    }, [filters, onFiltersChange]);

    const fetchAccounts = async () => {
        setLoading(true);
        try {
            const token = localStorage.getItem('token');
            const response = await axios.get(`${BASE_URL}/bank/accounts`, {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            setAccounts(response.data.data);
            setError(null);
        } catch (err) {
            setError('Failed to load accounts');
            console.error(err);
        } finally {
            setLoading(false);
        }
    };

    const handleFilterChange = (key, value) => {
        setFilters(prev => ({
            ...prev,
            [key]: value
        }));
    };

    const clearFilters = () => {
        setFilters({
            account: '',
            status: '',
            dateRange: { start: '', end: '' },
            amountRange: { min: '', max: '' }
        });
    };

    const statusOptions = [
        { value: '', label: 'Tüm Durumlar' },
        { value: 'Beklemede', label: 'Beklemede' },
        { value: 'Onaylandı', label: 'Onaylandı' },
        { value: 'İptal', label: 'İptal' }
    ];

    return (
        <Card className="w-full bg-white shadow-md">
            <CardContent className="p-6">
                {/* Header Section */}
                <div className="flex items-center justify-between mb-6">
                    <div className="flex items-center space-x-4">
                        <button
                            onClick={() => setShowFilters(!showFilters)}
                            className="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"
                        >
                            <FiFilter className="mr-2" />
                            {showFilters ? 'Filtreleri Gizle' : 'Filtreleri Göster'}
                        </button>
                        <button
                            onClick={clearFilters}
                            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
                        >
                            <FiX className="inline-block mr-2" />
                            Filtreleri Temizle
                        </button>
                    </div>
                    <div className="flex items-center space-x-4">
                        <button
                            onClick={() => setAutoRefresh(!autoRefresh)}
                            className={`flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                                autoRefresh 
                                    ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' 
                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                            }`}
                        >
                            <FiRefreshCw className={`mr-2 ${autoRefresh ? 'animate-spin' : ''}`} />
                            {autoRefresh ? 'Otomatik Yenileme Açık' : 'Otomatik Yenileme Kapalı'}
                        </button>
                        <button
                            onClick={fetchAccounts}
                            disabled={loading}
                            className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-md hover:bg-emerald-700 disabled:opacity-50"
                        >
                            {loading ? 'Yenileniyor...' : 'Yenile'}
                        </button>
                    </div>
                </div>

                {/* Filter Section */}
                {showFilters && (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-4 bg-gray-50 rounded-lg mb-6">
                        {/* Account Filter */}
                        <div className="flex flex-col space-y-2">
                            <label className="text-sm font-medium text-gray-700">Hesap</label>
                            <select
                                value={filters.account}
                                onChange={(e) => handleFilterChange('account', e.target.value)}
                                className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                            >
                                <option value="">Tüm Hesaplar</option>
                                {accounts.map(account => (
                                    <option key={account.accountId} value={account.accountId}>
                                        {account.bankName} - {account.accountNumber}
                                    </option>
                                ))}
                            </select>
                        </div>

                        {/* Status Filter */}
                        <div className="flex flex-col space-y-2">
                            <label className="text-sm font-medium text-gray-700">Durum</label>
                            <select
                                value={filters.status}
                                onChange={(e) => handleFilterChange('status', e.target.value)}
                                className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                            >
                                {statusOptions.map(option => (
                                    <option key={option.value} value={option.value}>
                                        {option.label}
                                    </option>
                                ))}
                            </select>
                        </div>

                        {/* Date Range Filter */}
                        <div className="flex flex-col space-y-2">
                            <label className="text-sm font-medium text-gray-700">Tarih Aralığı</label>
                            <div className="flex space-x-2">
                                <input
                                    type="date"
                                    value={filters.dateRange.start}
                                    onChange={(e) => handleFilterChange('dateRange', {
                                        ...filters.dateRange,
                                        start: e.target.value
                                    })}
                                    className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                                />
                                <input
                                    type="date"
                                    value={filters.dateRange.end}
                                    onChange={(e) => handleFilterChange('dateRange', {
                                        ...filters.dateRange,
                                        end: e.target.value
                                    })}
                                    className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                                />
                            </div>
                        </div>

                        {/* Amount Range Filter */}
                        <div className="flex flex-col space-y-2">
                            <label className="text-sm font-medium text-gray-700">Tutar Aralığı</label>
                            <div className="flex space-x-2">
                                <input
                                    type="number"
                                    placeholder="Min ₺"
                                    value={filters.amountRange.min}
                                    onChange={(e) => handleFilterChange('amountRange', {
                                        ...filters.amountRange,
                                        min: e.target.value
                                    })}
                                    className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                                />
                                <input
                                    type="number"
                                    placeholder="Max ₺"
                                    value={filters.amountRange.max}
                                    onChange={(e) => handleFilterChange('amountRange', {
                                        ...filters.amountRange,
                                        max: e.target.value
                                    })}
                                    className="w-full p-2 text-sm border border-gray-300 rounded-md focus:ring-emerald-500 focus:border-emerald-500"
                                />
                            </div>
                        </div>
                    </div>
                )}

                {/* Active Filters Display */}
                {Object.values(filters).some(value => 
                    value && (typeof value === 'string' ? value.length > 0 : Object.values(value).some(v => v))
                ) && (
                    <div className="flex flex-wrap gap-2 mb-4">
                        {filters.account && (
                            <span className="px-3 py-1 text-sm bg-emerald-100 text-emerald-800 rounded-full">
                                Hesap: {accounts.find(a => a.accountId === filters.account)?.bankName || filters.account}
                            </span>
                        )}
                        {filters.status && (
                            <span className="px-3 py-1 text-sm bg-emerald-100 text-emerald-800 rounded-full">
                                Durum: {filters.status}
                            </span>
                        )}
                        {(filters.dateRange.start || filters.dateRange.end) && (
                            <span className="px-3 py-1 text-sm bg-emerald-100 text-emerald-800 rounded-full">
                                Tarih: {filters.dateRange.start && format(new Date(filters.dateRange.start), 'dd/MM/yyyy')}
                                {filters.dateRange.end && ` - ${format(new Date(filters.dateRange.end), 'dd/MM/yyyy')}`}
                            </span>
                        )}
                        {(filters.amountRange.min || filters.amountRange.max) && (
                            <span className="px-3 py-1 text-sm bg-emerald-100 text-emerald-800 rounded-full">
                                Tutar: {filters.amountRange.min ? `${filters.amountRange.min}₺` : '0₺'} 
                                {' - '} 
                                {filters.amountRange.max ? `${filters.amountRange.max}₺` : '∞'}
                            </span>
                        )}
                    </div>
                )}

                {/* Error Display */}
                {error && (
                    <div className="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg">
                        {error}
                    </div>
                )}
            </CardContent>
        </Card>
    );
};

export default YatırımContent;