import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { 
    User as UserIcon, 
    Shield,
    Bell
} from "lucide-react";
import { useSettings } from "@/hooks/useSettings";

import UserProfile from "../components/settings/UserProfile";
import SecuritySettings from "../components/settings/SecuritySettings";
import NotificationSettings from "../components/settings/NotificationSettings";
import TaxSettings from "../components/settings/TaxSettings";
import PointsSettings from "../components/settings/PointsSettings";
import CommissionsSettings from "../components/settings/CommissionsSettings";
import ShippingSettings from "../components/settings/ShippingSettings";

export default function Settings() {
    const {
        user,
        selectedCompanyId,
        activeTab,
        loading,
        settingsTabs,
        setUser,
        setActiveTab,
    } = useSettings();

    const iconByTab = {
        profile: UserIcon,
        security: Shield,
        notifications: Bell,
        tax: Shield,
        points: Shield,
        commissions: Shield,
        shipping: Shield,
    };

    const colorByTab = {
        profile: "emerald",
        security: "blue",
        notifications: "purple",
        tax: "indigo",
        points: "yellow",
        commissions: "green",
        shipping: "teal",
    };

    const renderTabContent = () => {
        switch (activeTab) {
            case "profile":
                return <UserProfile user={user} onUpdate={setUser} />;
            case "security":
                return <SecuritySettings />;
            case "notifications":
                return <NotificationSettings />;
            case "tax":
                return <TaxSettings companyId={selectedCompanyId} />;
            case "points":
                return <PointsSettings />;
            case "commissions":
                return <CommissionsSettings />;
            case "shipping":
                return <ShippingSettings />;
            default:
                return <UserProfile user={user} onUpdate={setUser} />;
        }
    };

    if (loading) {
        return (
            <div className="p-8">
                <div className="animate-pulse space-y-6">
                    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {[...Array(3)].map((_, i) => (
                            <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="p-4 lg:p-8 space-y-8">
            {/* Header */}
            <div>
                <h1 className="text-3xl font-bold text-gradient">Settings</h1>
                <p className="text-gray-600 mt-1">Manage your account and application preferences</p>
            </div>

            {/* Settings Navigation */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {settingsTabs.map((tab) => {
                    const IconComponent = iconByTab[tab.id];
                    const color = colorByTab[tab.id] || "blue";
                    return (
                        <Card
                            key={tab.id}
                            className={`cursor-pointer transition-all duration-200 ${
                                activeTab === tab.id
                                    ? `ring-2 ring-${color}-500 bg-${color}-50`
                                    : 'glass-card border-white/20 hover:bg-white/40'
                            }`}
                            onClick={() => setActiveTab(tab.id)}
                        >
                            <CardHeader className="pb-2">
                                <div className="flex items-center justify-between">
                                    <IconComponent 
                                        className={`w-6 h-6 ${
                                            activeTab === tab.id 
                                                ? `text-${color}-600` 
                                                : 'text-gray-400'
                                        }`} 
                                    />
                                    {activeTab === tab.id && (
                                        <Badge className={`bg-${color}-500`}>Active</Badge>
                                    )}
                                </div>
                                <CardTitle className="text-lg">{tab.title}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <p className="text-sm text-gray-600">{tab.description}</p>
                            </CardContent>
                        </Card>
                    );
                })}
            </div>

            {/* Settings Content */}
            <div className="glass-card border-white/20 rounded-2xl overflow-hidden">
                {renderTabContent()}
            </div>
        </div>
    );
}