{t('Edit Campaign')}

{t('Update campaign settings and content')}

Campaign Name * setFormData({ ...formData, name: e.target.value })} required />

{t('Description')}

setFormData({ ...formData, description: e.target.value })}
                rows={3}
              />
            </div>

<div>
              <Label htmlFor="opt_in_type">Opt-in Type *</Label>
              <Select
                value={formData.opt_in_type}
                onValueChange={(value: 'single' | 'double') =>
                  setFormData({ ...formData, opt_in_type: value })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="single">
                    Single Opt-in (Immediate subscription)
                  </SelectItem>
                  <SelectItem value="double">
                    Double Opt-in (Requires email confirmation)
                  </SelectItem>
                </SelectContent>
              </Select>
              <p className="text-xs text-gray-500 mt-1">
                {formData.opt_in_type === 'double'
                  ? 'Subscribers must confirm via email before receiving campaigns'
                  : 'Subscribers are immediately added without confirmation'}
              </p>
            </div>

<div className="flex items-center justify-between border rounded-lg p-4">
              <div>
                <Label>{t('Active Campaign')}</Label>
                <p className="text-sm text-gray-500">
                  {formData.is_active
                    ? 'Campaign is active and can accept subscribers'
                    : 'Campaign is inactive'}
                </p>
              </div>
              <Toggle
                pressed={formData.is_active}
                onPressedChange={(pressed) =>
                  setFormData({ ...formData, is_active: pressed })
                }
              >
                {formData.is_active ? 'Active' : 'Inactive'}
              </Toggle>
            </div>
          </div>

{formData.opt_in_type === 'double' && (
            <div className="border-t pt-6">
              <h3 className="text-lg font-semibold mb-4">{t('Confirmation Email (Double Opt-in)')}</h3>
              
              <div className="space-y-4">
                <div>
                  <Label htmlFor="confirmation_subject">{t('Confirmation Subject')}</Label>
                  <Input
                    id="confirmation_subject"
                    value={formData.confirmation_subject}
                    onChange={(e) =>
                      setFormData({ ...formData, confirmation_subject: e.target.value })
                    }
                    placeholder={`Please confirm your subscription to ${formData.name || 'our campaign'}`}
                  />
                </div>

<div>
                  <Label htmlFor="confirmation_content">{t('Confirmation Body')}</Label>
                  <Textarea
                    id="confirmation_content"
                    value={formData.confirmation_content}
                    onChange={(e) =>
                      setFormData({ ...formData, confirmation_content: e.target.value })
                    }
                    rows={6}
                    placeholder={t('Please click the link below to confirm your subscription...')}
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    A confirmation link will be automatically included. Use {'{confirmation_url}'} to customize placement.
                  </p>
                </div>
              </div>
            </div>
          )}

<div className="flex gap-4 justify-end pt-6 border-t">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.visit('/admin/campaigns')}
            >
              {t('Cancel')}
            </Button>
            <Button type="submit">{t('Update Campaign')}</Button>
          </div>
        </form>
      </div>
    </AppLayout>
  );
}