import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Switch } from "@/Components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/Components/ui/tooltip";
import { Tag, HelpCircle, Info } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

export const OffersInfo = ({ data, setData, errors, currencies }) => {
    const { t } = useTranslation();
    const selectedCur = currencies?.find(c => c.code === data.currency_code) || { symbol: '$' };

    return (
        <Card className="shadow-sm border-border/50">
            <CardHeader className="pb-4">
                <CardTitle className="text-lg flex items-center gap-2">
                    <Tag className="w-5 h-5 text-primary" />
                    {t('Offers & Shipping Fees (Optional)')}
                </CardTitle>
                <CardDescription>
                    {t('Add coupon codes, dynamic discounts, and configure shipping options.')}
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
                
                {/* Advanced Discounts Row */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div className="space-y-2">
                        <Label>{t('Coupon Code')}</Label>
                        <Input 
                            placeholder={t('e.g. SUMMER50')} 
                            value={data.coupon_code} 
                            onChange={e => setData('coupon_code', e.target.value)} 
                            className={errors.coupon_code ? "border-destructive focus-visible:ring-destructive" : ""}
                        />
                        {errors.coupon_code && <p className="text-xs text-destructive">{errors.coupon_code}</p>}
                    </div>

                    <div className="space-y-2">
                        <Label className="flex items-center gap-2">
                            {t('Discount (%)')}
                            <TooltipProvider>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <HelpCircle className="w-3.5 h-3.5 text-muted-foreground cursor-help" />
                                    </TooltipTrigger>
                                    <TooltipContent><p>{t('Percentage to deduct from the order subtotal.')}</p></TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        </Label>
                        <Input 
                            type="number" min="0" max="100" step="0.01" placeholder={t('e.g. 15')} 
                            value={data.discount_percentage} 
                            onChange={e => setData('discount_percentage', e.target.value)} 
                        />
                    </div>

                    <div className="space-y-2">
                        <Label className="flex items-center gap-2">
                            {t('Max Discount Amount')} ({selectedCur.symbol})
                            <TooltipProvider>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <HelpCircle className="w-3.5 h-3.5 text-muted-foreground cursor-help" />
                                    </TooltipTrigger>
                                    <TooltipContent><p>{t('Cap the discount so buyers cannot get too much off large orders. Leave empty for unlimited.')}</p></TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        </Label>
                        <Input 
                            type="number" min="0" step="0.01" placeholder={t('e.g. 50')} 
                            value={data.max_discount_percentage} 
                            onChange={e => setData('max_discount_percentage', e.target.value)} 
                        />
                    </div>

                    <div className="space-y-2 border-l pl-4">
                        <Label className="flex items-center gap-2 text-primary font-bold">
                            {t('Min. Order Required')} ({selectedCur.symbol})
                            <TooltipProvider>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <Info className="w-4 h-4 text-primary cursor-help" />
                                    </TooltipTrigger>
                                    <TooltipContent><p>{t('The buyer must spend at least this amount to activate the discount or coupon.')}</p></TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        </Label>
                        <Input 
                            type="number" min="0" step="0.01" placeholder={t('e.g. 100')} 
                            value={data.min_order_amount_for_discount} 
                            onChange={e => setData('min_order_amount_for_discount', e.target.value)} 
                            className="bg-primary/5 border-primary/20 focus-visible:ring-primary font-bold"
                        />
                    </div>
                </div>

                {/* Advanced Shipping Area */}
                <div className="p-4 border rounded-xl bg-muted/10 space-y-4">
                    <div className="flex items-center justify-between">
                        <div>
                            <Label className="text-base font-bold">{t('Free Shipping')}</Label>
                            <p className="text-xs text-muted-foreground">{t('Enable to offer free shipping globally for this item.')}</p>
                        </div>
                        <Switch 
                            checked={data.is_free_shipping} 
                            onCheckedChange={val => {
                                setData(prev => ({
                                    ...prev,
                                    is_free_shipping: val,
                                    shipping_charge: val ? '' : prev.shipping_charge 
                                }));
                            }} 
                            className="data-[state=checked]:bg-green-600"
                        />
                    </div>

                    {!data.is_free_shipping && (
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-border/50 animate-in fade-in slide-in-from-top-2">
                            <div className="space-y-2">
                                <Label>{t('Shipping Charge')} ({selectedCur.symbol})</Label>
                                <Input 
                                    type="number" min="0" step="0.01" placeholder={t('e.g. 15.00')} 
                                    value={data.shipping_charge} 
                                    onChange={e => setData('shipping_charge', e.target.value)} 
                                />
                            </div>
                            <div className="space-y-2">
                                <Label className="flex items-center gap-2">
                                    {t('Shipping Calculation Type')}
                                    <TooltipProvider>
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <HelpCircle className="w-3.5 h-3.5 text-muted-foreground cursor-help" />
                                            </TooltipTrigger>
                                            <TooltipContent className="max-w-xs">
                                                <p><b>{t('Flat Rate')}:</b> {t('Applies once per order regardless of quantity.')}</p>
                                                <p className="mt-1"><b>{t('Per Item')}:</b> {t('Multiplies the shipping charge by the quantity ordered.')}</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </TooltipProvider>
                                </Label>
                                <Select value={data.shipping_charge_type} onValueChange={v => setData('shipping_charge_type', v)}>
                                    <SelectTrigger className="bg-background">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="flat_rate">{t('Flat Rate (Once per order)')}</SelectItem>
                                        <SelectItem value="per_item">{t('Per Item (Multiplied by quantity)')}</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                    )}
                </div>

            </CardContent>
        </Card>
    );
};