WooNooW/admin-spa/src/routes/Coupons/CouponForm.tsx

import React, { useState } from 'react';
import { __ } from '@/lib/i18n';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import type { Coupon, CouponFormData } from '@/lib/api/coupons';

interface CouponFormProps {
  mode: 'create' | 'edit';
  initial?: Coupon | null;
  onSubmit: (data: CouponFormData) => Promise<void> | void;
  formRef?: React.RefObject<HTMLFormElement>;
  hideSubmitButton?: boolean;
}

export default function CouponForm({
  mode,
  initial,
  onSubmit,
  formRef,
  hideSubmitButton = false,
}: CouponFormProps) {
  const [formData, setFormData] = useState<CouponFormData>({
    code: initial?.code || '',
    amount: initial?.amount || 0,
    discount_type: initial?.discount_type || 'percent',
    description: initial?.description || '',
    date_expires: initial?.date_expires || null,
    individual_use: initial?.individual_use || false,
    usage_limit: initial?.usage_limit || null,
    usage_limit_per_user: initial?.usage_limit_per_user || null,
    free_shipping: initial?.free_shipping || false,
    exclude_sale_items: initial?.exclude_sale_items || false,
    minimum_amount: initial?.minimum_amount || null,
    maximum_amount: initial?.maximum_amount || null,
  });

  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    try {
      await onSubmit(formData);
    } finally {
      setSubmitting(false);
    }
  };

  const updateField = (field: keyof CouponFormData, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
      {/* General Settings */}
      <Card>
        <CardHeader>
          <CardTitle>{__('General')}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Coupon Code */}
          <div className="space-y-2">
            <Label htmlFor="code">
              {__('Coupon code')} <span className="text-red-500">*</span>
            </Label>
            <Input
              id="code"
              value={formData.code}
              onChange={(e) => updateField('code', e.target.value.toUpperCase())}
              placeholder={__('e.g., SUMMER2024')}
              required
              disabled={mode === 'edit'} // Can't change code after creation
            />
            <p className="text-sm text-muted-foreground">
              {__('Unique code that customers will enter at checkout')}
            </p>
          </div>

          {/* Description */}
          <div className="space-y-2">
            <Label htmlFor="description">{__('Description')}</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => updateField('description', e.target.value)}
              placeholder={__('Optional description for internal use')}
              rows={3}
            />
          </div>

          {/* Discount Type */}
          <div className="space-y-2">
            <Label htmlFor="discount_type">
              {__('Discount type')} <span className="text-red-500">*</span>
            </Label>
            <Select
              value={formData.discount_type}
              onValueChange={(value) => updateField('discount_type', value)}
            >
              <SelectTrigger id="discount_type">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="percent">{__('Percentage discount')}</SelectItem>
                <SelectItem value="fixed_cart">{__('Fixed cart discount')}</SelectItem>
                <SelectItem value="fixed_product">{__('Fixed product discount')}</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Amount */}
          <div className="space-y-2">
            <Label htmlFor="amount">
              {__('Coupon amount')} <span className="text-red-500">*</span>
            </Label>
            <Input
              id="amount"
              type="number"
              step="0.01"
              min="0"
              value={formData.amount}
              onChange={(e) => updateField('amount', parseFloat(e.target.value) || 0)}
              required
            />
            <p className="text-sm text-muted-foreground">
              {formData.discount_type === 'percent'
                ? __('Enter percentage (e.g., 10 for 10%)')
                : __('Enter amount in Rupiah')}
            </p>
          </div>

          {/* Expiry Date */}
          <div className="space-y-2">
            <Label htmlFor="date_expires">{__('Expiry date')}</Label>
            <Input
              id="date_expires"
              type="date"
              value={formData.date_expires || ''}
              onChange={(e) => updateField('date_expires', e.target.value || null)}
            />
            <p className="text-sm text-muted-foreground">
              {__('Leave empty for no expiry')}
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Usage Restrictions */}
      <Card>
        <CardHeader>
          <CardTitle>{__('Usage restrictions')}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Minimum Spend */}
          <div className="space-y-2">
            <Label htmlFor="minimum_amount">{__('Minimum spend')}</Label>
            <Input
              id="minimum_amount"
              type="number"
              step="1"
              min="0"
              value={formData.minimum_amount || ''}
              onChange={(e) => updateField('minimum_amount', e.target.value ? parseFloat(e.target.value) : null)}
              placeholder="0"
            />
            <p className="text-sm text-muted-foreground">
              {__('Minimum order amount required to use this coupon')}
            </p>
          </div>

          {/* Maximum Spend */}
          <div className="space-y-2">
            <Label htmlFor="maximum_amount">{__('Maximum spend')}</Label>
            <Input
              id="maximum_amount"
              type="number"
              step="1"
              min="0"
              value={formData.maximum_amount || ''}
              onChange={(e) => updateField('maximum_amount', e.target.value ? parseFloat(e.target.value) : null)}
              placeholder="0"
            />
            <p className="text-sm text-muted-foreground">
              {__('Maximum order amount allowed to use this coupon')}
            </p>
          </div>

          {/* Individual Use */}
          <div className="flex items-center space-x-2">
            <Checkbox
              id="individual_use"
              checked={formData.individual_use}
              onCheckedChange={(checked) => updateField('individual_use', checked)}
            />
            <label
              htmlFor="individual_use"
              className="text-sm cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              {__('Individual use only')}
            </label>
          </div>
          <p className="text-sm text-muted-foreground ml-6">
            {__('Check this box if the coupon cannot be used in conjunction with other coupons')}
          </p>

          {/* Exclude Sale Items */}
          <div className="flex items-center space-x-2">
            <Checkbox
              id="exclude_sale_items"
              checked={formData.exclude_sale_items}
              onCheckedChange={(checked) => updateField('exclude_sale_items', checked)}
            />
            <label
              htmlFor="exclude_sale_items"
              className="text-sm cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              {__('Exclude sale items')}
            </label>
          </div>
          <p className="text-sm text-muted-foreground ml-6">
            {__('Check this box if the coupon should not apply to items on sale')}
          </p>
        </CardContent>
      </Card>

      {/* Usage Limits */}
      <Card>
        <CardHeader>
          <CardTitle>{__('Usage limits')}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Usage Limit */}
          <div className="space-y-2">
            <Label htmlFor="usage_limit">{__('Usage limit per coupon')}</Label>
            <Input
              id="usage_limit"
              type="number"
              min="0"
              value={formData.usage_limit || ''}
              onChange={(e) => updateField('usage_limit', e.target.value ? parseInt(e.target.value) : null)}
              placeholder={__('Unlimited')}
            />
            <p className="text-sm text-muted-foreground">
              {__('How many times this coupon can be used before it is void')}
            </p>
          </div>

          {/* Usage Limit Per User */}
          <div className="space-y-2">
            <Label htmlFor="usage_limit_per_user">{__('Usage limit per user')}</Label>
            <Input
              id="usage_limit_per_user"
              type="number"
              min="0"
              value={formData.usage_limit_per_user || ''}
              onChange={(e) => updateField('usage_limit_per_user', e.target.value ? parseInt(e.target.value) : null)}
              placeholder={__('Unlimited')}
            />
            <p className="text-sm text-muted-foreground">
              {__('How many times this coupon can be used by an individual user')}
            </p>
          </div>

          {/* Free Shipping */}
          <div className="flex items-center space-x-2">
            <Checkbox
              id="free_shipping"
              checked={formData.free_shipping}
              onCheckedChange={(checked) => updateField('free_shipping', checked)}
            />
            <label
              htmlFor="free_shipping"
              className="text-sm cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            >
              {__('Allow free shipping')}
            </label>
          </div>
          <p className="text-sm text-muted-foreground ml-6">
            {__('Check this box if the coupon grants free shipping')}
          </p>
        </CardContent>
      </Card>

      {/* Submit Button (if not hidden) */}
      {!hideSubmitButton && (
        <div className="flex gap-3">
          <Button type="submit" disabled={submitting}>
            {submitting
              ? __('Saving...')
              : mode === 'create'
              ? __('Create Coupon')
              : __('Update Coupon')}
          </Button>
        </div>
      )}
    </form>
  );
}