import React from "react";
import { useSettingsForm } from "./SettingsLayout";
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";

export function EconomySettings() {
    const { form } = useSettingsForm();

    return (
        <div className="space-y-6 animate-in fade-in slide-up duration-500">
            <Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
                <AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
                    <AccordionTrigger className="hover:no-underline py-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
                                <Users className="w-4 h-4" />
                            </div>
                            <span className="font-bold">Daily Rewards</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="space-y-4 pb-4">
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="economy.daily.amount"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Base Amount</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="text" className="bg-background/50" placeholder="100" />
                                        </FormControl>
                                        <FormDescription className="text-xs">Reward (AU)</FormDescription>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="economy.daily.streakBonus"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Streak Bonus</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="text" className="bg-background/50" placeholder="10" />
                                        </FormControl>
                                        <FormDescription className="text-xs">Bonus/day</FormDescription>
                                    </FormItem>
                                )}
                            />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="economy.daily.weeklyBonus"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Weekly Bonus</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="text" className="bg-background/50" placeholder="50" />
                                        </FormControl>
                                        <FormDescription className="text-xs">7-day bonus</FormDescription>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="economy.daily.cooldownMs"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Cooldown (ms)</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
                    <AccordionTrigger className="hover:no-underline py-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
                                <Backpack className="w-4 h-4" />
                            </div>
                            <span className="font-bold">Inventory</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="space-y-4 pb-4">
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="inventory.maxStackSize"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Max Stack Size</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="text" className="bg-background/50" />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="inventory.maxSlots"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Max Slots</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
                    <AccordionTrigger className="hover:no-underline py-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
                                <Sparkles className="w-4 h-4" />
                            </div>
                            <span className="font-bold">Leveling & XP</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="space-y-4 pb-4">
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="leveling.base"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Base XP</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="leveling.exponent"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Exponent</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                        <div className="bg-muted/30 p-4 rounded-lg space-y-3">
                            <h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
                                <MessageSquare className="w-3 h-3" /> Chat XP
                            </h4>
                            <div className="grid grid-cols-3 gap-4">
                                <FormField
                                    control={form.control}
                                    name="leveling.chat.minXp"
                                    render={({ field }) => (
                                        <FormItem className="space-y-1">
                                            <FormLabel className="text-xs">Min</FormLabel>
                                            <FormControl>
                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
                                            </FormControl>
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="leveling.chat.maxXp"
                                    render={({ field }) => (
                                        <FormItem className="space-y-1">
                                            <FormLabel className="text-xs">Max</FormLabel>
                                            <FormControl>
                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
                                            </FormControl>
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="leveling.chat.cooldownMs"
                                    render={({ field }) => (
                                        <FormItem className="space-y-1">
                                            <FormLabel className="text-xs">Cooldown</FormLabel>
                                            <FormControl>
                                                <Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
                                            </FormControl>
                                        </FormItem>
                                    )}
                                />
                            </div>
                        </div>
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
                    <AccordionTrigger className="hover:no-underline py-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
                                <CreditCard className="w-4 h-4" />
                            </div>
                            <span className="font-bold">Transfers</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="space-y-4 pb-4">
                        <FormField
                            control={form.control}
                            name="economy.transfers.allowSelfTransfer"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
                                    <div className="space-y-0.5">
                                        <FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
                                        <FormDescription className="text-xs">
                                            Permit users to transfer currency to themselves.
                                        </FormDescription>
                                    </div>
                                    <FormControl>
                                        <Switch
                                            checked={field.value}
                                            onCheckedChange={field.onChange}
                                        />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="economy.transfers.minAmount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Minimum Transfer Amount</FormLabel>
                                    <FormControl>
                                        <Input {...field} type="text" placeholder="1" className="bg-background/50" />
                                    </FormControl>
                                </FormItem>
                            )}
                        />
                    </AccordionContent>
                </AccordionItem>

                <AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
                    <AccordionTrigger className="hover:no-underline py-4">
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
                                <Sparkles className="w-4 h-4" />
                            </div>
                            <span className="font-bold">Exams</span>
                        </div>
                    </AccordionTrigger>
                    <AccordionContent className="space-y-4 pb-4">
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="economy.exam.multMin"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Min Multiplier</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="economy.exam.multMax"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Max Multiplier</FormLabel>
                                        <FormControl>
                                            <Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        </div>
    );
}