import React from 'react';
import { __ } from '@/lib/i18n';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
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';
import { DollarSign } from 'lucide-react';
import { getStoreCurrency } from '@/lib/currency';
import { RichTextEditor } from '@/components/RichTextEditor';

type GeneralTabProps = {
  name: string;
  setName: (value: string) => void;
  type: 'simple' | 'variable' | 'grouped' | 'external';
  setType: (value: 'simple' | 'variable' | 'grouped' | 'external') => void;
  status: 'publish' | 'draft' | 'pending' | 'private';
  setStatus: (value: 'publish' | 'draft' | 'pending' | 'private') => void;
  description: string;
  setDescription: (value: string) => void;
  shortDescription: string;
  setShortDescription: (value: string) => void;
  virtual: boolean;
  setVirtual: (value: boolean) => void;
  downloadable: boolean;
  setDownloadable: (value: boolean) => void;
  featured: boolean;
  setFeatured: (value: boolean) => void;
  // Pricing props
  sku: string;
  setSku: (value: string) => void;
  regularPrice: string;
  setRegularPrice: (value: string) => void;
  salePrice: string;
  setSalePrice: (value: string) => void;
};

export function GeneralTab({
  name,
  setName,
  type,
  setType,
  status,
  setStatus,
  description,
  setDescription,
  shortDescription,
  setShortDescription,
  virtual,
  setVirtual,
  downloadable,
  setDownloadable,
  featured,
  setFeatured,
  sku,
  setSku,
  regularPrice,
  setRegularPrice,
  salePrice,
  setSalePrice,
}: GeneralTabProps) {
  const savingsPercent = 
    salePrice && regularPrice && parseFloat(salePrice) < parseFloat(regularPrice)
      ? Math.round((1 - parseFloat(salePrice) / parseFloat(regularPrice)) * 100)
      : 0;
  
  const store = getStoreCurrency();
  
  return (
    <Card>
      <CardHeader>
        <CardTitle>{__('Basic Information')}</CardTitle>
        <CardDescription>{__('Essential product details')}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Product Name */}
        <div>
          <Label htmlFor="name">{__('Product Name')} *</Label>
          <Input
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder={__('e.g., Premium Cotton T-Shirt')}
            required
            className="mt-1.5"
          />
          <p className="text-xs text-muted-foreground mt-1">
            {__('Give your product a short and clear name')}
          </p>
        </div>

        {/* Type & Status */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <Label htmlFor="type">{__('Product Type')}</Label>
            <Select value={type} onValueChange={(v: any) => setType(v)}>
              <SelectTrigger id="type" className="mt-1.5">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="simple">{__('Simple Product')}</SelectItem>
                  <SelectItem value="variable">{__('Variable Product')}</SelectItem>
                  <SelectItem value="grouped">{__('Grouped Product')}</SelectItem>
                  <SelectItem value="external">{__('External Product')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground mt-1">
              {type === 'simple' && __('A standalone product')}
              {type === 'variable' && __('Product with variations (size, color, etc.)')}
              {type === 'grouped' && __('A collection of related products')}
              {type === 'external' && __('Product sold on another website')}
            </p>
          </div>

          <div>
            <Label htmlFor="status">{__('Status')}</Label>
            <Select value={status} onValueChange={(v: any) => setStatus(v)}>
              <SelectTrigger id="status" className="mt-1.5">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="publish">{__('Published')}</SelectItem>
                  <SelectItem value="draft">{__('Draft')}</SelectItem>
                  <SelectItem value="pending">{__('Pending')}</SelectItem>
                  <SelectItem value="private">{__('Private')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
        </div>

        <Separator />

        {/* Description */}
        <div>
          <Label htmlFor="description">{__('Description')}</Label>
          <div className="mt-1.5">
            <RichTextEditor
              value={description}
              onChange={setDescription}
              placeholder={__('Describe your product in detail...')}
            />
          </div>
          <p className="text-xs text-muted-foreground mt-1">
            {__('Full product description for the product page')}
          </p>
        </div>

        {/* Short Description */}
        <div>
          <Label htmlFor="short_description">{__('Short Description')}</Label>
          <Textarea
            id="short_description"
            value={shortDescription}
            onChange={(e) => setShortDescription(e.target.value)}
            placeholder={__('Brief summary...')}
            rows={3}
            className="mt-1.5"
          />
          <p className="text-xs text-muted-foreground mt-1">
            {__('Brief summary shown in product listings')}
          </p>
        </div>

        {/* Pricing Section */}
        <Separator />
        <div className="space-y-4">
          <h3 className="font-medium">{__('Pricing')}</h3>
          <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">
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
                  {store.symbol}
                </span>
                <Input
                  id="regular_price"
                  type="number"
                  step={store.decimals === 0 ? '1' : '0.01'}
                  value={regularPrice}
                  onChange={(e) => setRegularPrice(e.target.value)}
                  placeholder={store.decimals === 0 ? '0' : '0.00'}
                  required={type === 'simple'}
                  className="pl-9 pr-3 text-right"
                />
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                {type === 'variable' 
                  ? __('Base price (can override per variation)')
                  : __('Base price before discounts')}
              </p>
            </div>

            <div>
              <Label htmlFor="sale_price">{__('Sale Price')}</Label>
              <div className="relative mt-1.5">
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground font-medium">
                  {store.symbol}
                </span>
                <Input
                  id="sale_price"
                  type="number"
                  step={store.decimals === 0 ? '1' : '0.01'}
                  value={salePrice}
                  onChange={(e) => setSalePrice(e.target.value)}
                  placeholder={store.decimals === 0 ? '0' : '0.00'}
                  className="pl-9 pr-3 text-right"
                />
              </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>
          )}
        </div>

        {/* Additional Options */}
        <Separator />
        <div className="space-y-3">
          <Label>{__('Additional Options')}</Label>
          <div className="flex flex-col gap-3">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="virtual"
                checked={virtual}
                onCheckedChange={(checked) => setVirtual(checked as boolean)}
              />
              <Label htmlFor="virtual" className="cursor-pointer font-normal">
                {__('Virtual product (no shipping required)')}
              </Label>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="downloadable"
                checked={downloadable}
                onCheckedChange={(checked) => setDownloadable(checked as boolean)}
              />
              <Label htmlFor="downloadable" className="cursor-pointer font-normal">
                {__('Downloadable product')}
              </Label>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="featured"
                checked={featured}
                onCheckedChange={(checked) => setFeatured(checked as boolean)}
              />
              <Label htmlFor="featured" className="cursor-pointer font-normal">
                {__('Featured product (show in featured sections)')}
              </Label>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
