import React, { useState, useEffect } from 'react';
import { Head } from '@inertiajs/react';
import axios from 'axios';
import AdminLayout from '@/cp/Layouts/AdminLayout';
import { Globe } from 'lucide-react';

import IpLocatorTab from './Partials/IpLocatorTab';
import WorldRecordsTab from './Partials/WorldRecordsTab';

export default function GlobalizationIndex({ databaseStatus, csvStatus, apiSettings, errors }) {
    
    // Using standard React state instead of Shadcn Tabs to prevent layout blowout
    const [activeTab, setActiveTab] = useState('world_records');
    
    const [countries, setCountries] = useState([]);
    const [loadingCountries, setLoadingCountries] = useState(true);

    const fetchCountries = () => {
        setLoadingCountries(true);
        axios.get('/api/locations/countries')
            .then(res => {
                setCountries(res.data);
                setLoadingCountries(false);
            })
            .catch(() => setLoadingCountries(false));
    };

    useEffect(() => {
        fetchCountries();
    }, []);

    return (
        <AdminLayout>
            <Head title="Globalization & IP" />
            <div className="max-w-6xl mx-auto space-y-6">
                
                {/* Header (Same as Location Management) */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2">
                    <div className="flex items-center gap-3">
                        <div className="p-2 bg-primary/10 rounded-lg shrink-0">
                            <Globe className="w-8 h-8 text-primary" />
                        </div>
                        <div>
                            <h2 className="text-2xl font-bold tracking-tight">Geo-Records & IP Manager</h2>
                            <p className="text-muted-foreground text-sm">Manage IP databases and populate geographical records.</p>
                        </div>
                    </div>
                </div>

                {/* EXACT LOCATION MANAGEMENT TABS STYLE */}
                <div className="w-full border-b border-border/60 overflow-x-auto no-scrollbar bg-card rounded-t-xl px-2 pt-2">
                    <div className="flex w-max min-w-full space-x-6 px-4">
                        <button 
                            onClick={() => setActiveTab('world_records')} 
                            className={`py-3 px-2 text-sm font-bold border-b-2 transition-all ${activeTab === 'world_records' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
                        >
                            World Records (CSV)
                        </button>
                        <button 
                            onClick={() => setActiveTab('ip_locator')} 
                            className={`py-3 px-2 text-sm font-bold border-b-2 transition-all ${activeTab === 'ip_locator' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
                        >
                            IP Locator (BIN)
                        </button>
                    </div>
                </div>

                {/* CONTENT AREA */}
                <div className="pt-2">
                    {activeTab === 'world_records' && (
                        <WorldRecordsTab 
                            csvStatus={csvStatus} 
                            apiSettings={apiSettings} 
                            errors={errors}
                            countries={countries}
                            loadingCountries={loadingCountries}
                            fetchCountries={fetchCountries}
                        />
                    )}

                    {activeTab === 'ip_locator' && (
                        <IpLocatorTab 
                            databaseStatus={databaseStatus} 
                            apiSettings={apiSettings} 
                            errors={errors} 
                        />
                    )}
                </div>

            </div>
        </AdminLayout>
    );
}