import React from 'react';
import { __ } from '@/lib/i18n';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { DollarSign } from 'lucide-react';

type PricingTabProps = {
  type: 'simple' | 'variable' | 'grouped' | 'external';
  sku: string;
  setSku: (value: string) => void;
  regularPrice: string;
  setRegularPrice: (value: string) => void;
  salePrice: string;
  setSalePrice: (value: string) => void;
};

export function PricingTab({
  type,
  sku,
  setSku,
  regularPrice,
  setRegularPrice,
  salePrice,
  setSalePrice,
}: PricingTabProps) {
  const savingsPercent = 
    salePrice && regularPrice && parseFloat(salePrice) < parseFloat(regularPrice)
      ? Math.round((1 - parseFloat(salePrice) / parseFloat(regularPrice)) * 100)
      : 0;

  return (
    <Card>
      <CardHeader>
        <CardTitle>{__('Pricing')}</CardTitle>
        <CardDescription>
          {type === 'variable' 
            ? __('Set base prices (can be overridden per variation)')
            : __('Set your product prices')}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <Label htmlFor="sku">{__('SKU')}</Label>
            <Input
              id="sku"
              value={sku}
              onChange={(e) => setSku(e.target.value)}
              placeholder={__('PROD-001')}
              className="mt-1.5 font-mono"
            />
            <p className="text-xs text-muted-foreground mt-1">
              {__('Stock Keeping Unit (optional)')}
            </p>
          </div>

          <div>
            <Label htmlFor="regular_price">
              {__('Regular Price')} {type === 'simple' && '*'}
            </Label>
            <div className="relative mt-1.5">
              <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                id="regular_price"
                type="number"
                step="0.01"
                value={regularPrice}
                onChange={(e) => setRegularPrice(e.target.value)}
                placeholder="0.00"
                required={type === 'simple'}
                className="pl-10"
              />
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              {__('Base price before discounts')}
            </p>
          </div>

          <div>
            <Label htmlFor="sale_price">{__('Sale Price')}</Label>
            <div className="relative mt-1.5">
              <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                id="sale_price"
                type="number"
                step="0.01"
                value={salePrice}
                onChange={(e) => setSalePrice(e.target.value)}
                placeholder="0.00"
                className="pl-10"
              />
            </div>
            <p className="text-xs text-muted-foreground mt-1">
              {__('Discounted price (optional)')}
            </p>
          </div>
        </div>

        {savingsPercent > 0 && (
          <div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg p-3">
            <p className="text-sm text-emerald-800 dark:text-emerald-300">
              💰 {__('Customers save')} {savingsPercent}%
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
