import React from 'react';
import { __ } from '@/lib/i18n';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';

type InventoryTabProps = {
  manageStock: boolean;
  setManageStock: (value: boolean) => void;
  stockQuantity: string;
  setStockQuantity: (value: string) => void;
  stockStatus: 'instock' | 'outofstock' | 'onbackorder';
  setStockStatus: (value: 'instock' | 'outofstock' | 'onbackorder') => void;
};

export function InventoryTab({
  manageStock,
  setManageStock,
  stockQuantity,
  setStockQuantity,
  stockStatus,
  setStockStatus,
}: InventoryTabProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{__('Inventory Management')}</CardTitle>
        <CardDescription>{__('Track and manage your product stock')}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center space-x-2">
          <Checkbox
            id="manage_stock"
            checked={manageStock}
            onCheckedChange={(checked) => setManageStock(checked as boolean)}
          />
          <Label htmlFor="manage_stock" className="cursor-pointer font-normal">
            {__('Track stock quantity for this product')}
          </Label>
        </div>

        {manageStock && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6 border-l-2 border-primary/20">
            <div>
              <Label htmlFor="stock_quantity">{__('Stock Quantity')}</Label>
              <Input
                id="stock_quantity"
                type="number"
                value={stockQuantity}
                onChange={(e) => setStockQuantity(e.target.value)}
                placeholder="0"
                className="mt-1.5"
              />
              <p className="text-xs text-muted-foreground mt-1">
                {__('Current stock level')}
              </p>
            </div>
          </div>
        )}

        <Separator />

        <div>
          <Label htmlFor="stock_status">{__('Stock Status')}</Label>
          <Select value={stockStatus} onValueChange={(v: any) => setStockStatus(v)}>
            <SelectTrigger id="stock_status" className="mt-1.5">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="instock">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-emerald-500" />
                    {__('In Stock')}
                  </div>
                </SelectItem>
                <SelectItem value="outofstock">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-rose-500" />
                    {__('Out of Stock')}
                  </div>
                </SelectItem>
                <SelectItem value="onbackorder">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-amber-500" />
                    {__('On Backorder')}
                  </div>
                </SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <p className="text-xs text-muted-foreground mt-1">
            {__('Availability status shown to customers')}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
