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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/Components/ui/tooltip";
import { HelpCircle } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

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

    return (
        <Card className="shadow-sm">
            <CardHeader>
                <CardTitle>{t('Pricing & Inventory')}</CardTitle>
                <CardDescription>{t('Set base prices and wholesale limits.')}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
                    
                    <div className="space-y-2">
                        <div className="flex items-center gap-2">
                            <Label>{t('Currency')} <span className="text-destructive">*</span></Label>
                            <TooltipProvider>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <HelpCircle className="w-4 h-4 text-muted-foreground cursor-help" />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                        <p className="max-w-xs text-xs">
                                            {t('Price will be securely converted to the system\'s base currency for global marketplace consistency, but tracked in your selected currency here.')}
                                        </p>
                                    </TooltipContent>
                                </Tooltip>
                            </TooltipProvider>
                        </div>
                        <Select value={data.currency_code} onValueChange={v => setData('currency_code', v)}>
                            <SelectTrigger className={errors?.currency_code ? "border-destructive" : ""}>
                                <SelectValue placeholder={t('Currency')} />
                            </SelectTrigger>
                            <SelectContent>
                                {currencies?.map(c => (
                                    <SelectItem key={c.code} value={c.code}>{c.code} ({c.symbol})</SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {errors?.currency_code && <p className="text-xs text-destructive">{errors.currency_code}</p>}
                    </div>

                    <div className="space-y-2">
                        <Label>{t('Unit Price')} ({selectedCur.symbol}) <span className="text-destructive">*</span></Label>
                        <Input 
                            type="number" 
                            min="0" 
                            step="0.01" 
                            placeholder="0.00" 
                            value={data.price} 
                            onChange={e => setData('price', e.target.value)} 
                            className={errors?.price ? "border-destructive" : ""} 
                        />
                        {errors?.price && <p className="text-xs text-destructive">{errors.price}</p>}
                    </div>
                    
                    <div className="space-y-2">
                        <Label>{t('Stock Quantity')} <span className="text-destructive">*</span></Label>
                        <Input 
                            type="number" 
                            min="0" 
                            placeholder="1000" 
                            value={data.stock} 
                            onChange={e => setData('stock', e.target.value)} 
                            className={errors?.stock ? "border-destructive" : ""} 
                        />
                        {errors?.stock && <p className="text-xs text-destructive">{errors.stock}</p>}
                    </div>
                    
                    <div className="space-y-2">
                        <Label>{t('Minimum Order (MOQ)')} <span className="text-destructive">*</span></Label>
                        <Input 
                            type="number" 
                            min="1" 
                            placeholder="1" 
                            value={data.moq} 
                            onChange={e => setData('moq', e.target.value)} 
                            className={errors?.moq ? "border-destructive" : ""} 
                        />
                        {errors?.moq && <p className="text-xs text-destructive">{errors.moq}</p>}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
};