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 { Info, HelpCircle } from "lucide-react";
import { useTranslation } from '@/hooks/useTranslation';

export const BasicInfo = ({ data, setData, categories, errors }) => {
    const { t } = useTranslation();
    
    const activeCategory = categories.find(c => c.id == data.category_id);
    const subcategories = activeCategory ? activeCategory.subcategories : [];

    return (
        <Card className="shadow-sm border-border/50">
            <CardHeader className="pb-4">
                <CardTitle className="text-lg flex items-center gap-2">
                    <Info className="w-5 h-5 text-primary" />
                    {t('Basic Information')}
                </CardTitle>
                <CardDescription>
                    {t('Provide the core details that help buyers find your product.')}
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
                
                <div className="space-y-2">
                    <div className="flex items-center gap-2">
                        <Label htmlFor="title" className="font-semibold text-sm">
                            {t('Product Name')} <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('Include keywords like material, type, and key features. (e.g., "Wireless Bluetooth 5.0 Waterproof Headphones")')}
                                    </p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                    <Input 
                        id="title"
                        placeholder={t('Enter a descriptive product title')}
                        value={data.title}
                        onChange={e => setData('title', e.target.value)}
                        className={errors.title ? "border-destructive focus-visible:ring-destructive" : ""}
                    />
                    {errors.title && <p className="text-xs font-medium text-destructive">{errors.title}</p>}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    
                    <div className="space-y-2">
                        <Label className="font-semibold text-sm">
                            {t('Primary Category')} <span className="text-destructive">*</span>
                        </Label>
                        <Select 
                            value={data.category_id?.toString()} 
                            onValueChange={(val) => {
                                setData(data => ({
                                    ...data,
                                    category_id: val,
                                    subcategory_id: '' 
                                }));
                            }}
                        >
                            <SelectTrigger className={errors.category_id ? "border-destructive" : ""}>
                                <SelectValue placeholder={t('Select a category')} />
                            </SelectTrigger>
                            <SelectContent>
                                {categories.map(cat => (
                                    <SelectItem key={cat.id} value={cat.id.toString()}>
                                        {cat.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {errors.category_id && <p className="text-xs font-medium text-destructive">{errors.category_id}</p>}
                    </div>

                    <div className="space-y-2">
                        <Label className="font-semibold text-sm">
                            {t('Subcategory (Optional)')}
                        </Label>
                        <Select 
                            value={data.subcategory_id?.toString()} 
                            onValueChange={(val) => setData('subcategory_id', val)}
                            disabled={!data.category_id || subcategories.length === 0}
                        >
                            <SelectTrigger className={errors.subcategory_id ? "border-destructive" : ""}>
                                <SelectValue placeholder={subcategories.length > 0 ? t('Select subcategory') : t('No subcategories')} />
                            </SelectTrigger>
                            <SelectContent>
                                {subcategories.map(sub => (
                                    <SelectItem key={sub.id} value={sub.id.toString()}>
                                        {sub.name}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {errors.subcategory_id && <p className="text-xs font-medium text-destructive">{errors.subcategory_id}</p>}
                    </div>
                </div>

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