import { FormEventHandler } from 'react';
import { Link, useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Coins, ArrowRight, History } from 'lucide-react';
import { PresetAmountButtons } from './PresetAmountButtons';
import { PRESET_AMOUNTS, ROUTES } from '@/pages/frontend/ingame/utils/constants';
import { formatGold } from '@/pages/frontend/ingame/utils/formatters';

interface ExchangeGoldCardProps {
    userGold: number;
}

export const ExchangeGoldCard: React.FC<ExchangeGoldCardProps> = ({ userGold }) => {
    const { data, setData, post, processing, errors } = useForm({
        gold_amount: 0,
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route(ROUTES.EXCHANGE), {
            preserveScroll: true,
        });
    };

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Coins className="h-5 w-5 text-yellow-500" />
                    Exchange Gold
                </CardTitle>
                <CardDescription>
                    Convert your balance gold to ingame gold
                </CardDescription>
            </CardHeader>
            <CardContent>
                <form onSubmit={submit} className="space-y-4">
                    <div className="space-y-2">
                        <Label htmlFor="gold_amount">Gold Amount</Label>
                        <Input
                            id="gold_amount"
                            type="number"
                            min={1}
                            max={userGold}
                            value={data.gold_amount || ''}
                            onChange={(e) =>
                                setData('gold_amount', parseInt(e.target.value) || 0)
                            }
                            placeholder="Enter gold amount"
                        />
                        {errors.gold_amount && (
                            <p className="text-sm text-destructive">{errors.gold_amount}</p>
                        )}
                    </div>

                    <PresetAmountButtons
                        amounts={PRESET_AMOUNTS}
                        maxAmount={userGold}
                        onSelect={(amount) => setData('gold_amount', amount)}
                    />

                    {data.gold_amount > 0 && (
                        <div className="rounded-lg border p-3 bg-muted/50">
                            <div className="flex items-center justify-between text-sm">
                                <span>Balance</span>
                                <ArrowRight className="h-4 w-4 text-muted-foreground" />
                                <span className="text-green-600 font-medium">
                                    {formatGold(data.gold_amount)} Ingame Gold
                                </span>
                            </div>
                        </div>
                    )}

                    <Button
                        type="submit"
                        className="w-full"
                        disabled={
                            processing ||
                            data.gold_amount <= 0 ||
                            data.gold_amount > userGold
                        }
                    >
                        {processing ? 'Processing...' : 'Exchange Gold'}
                    </Button>
                </form>

                <div className="mt-4 pt-4 border-t">
                    <Button variant="ghost" className="w-full" size="sm" asChild>
                        <Link href={ROUTES.TOPUP_HISTORY}>
                            <History className="w-4 h-4 mr-2" />
                            View History
                        </Link>
                    </Button>
                </div>
            </CardContent>
        </Card>
    );
};